From 641c76ae62a958d1edd3399e642b01f51fdc32a0 Mon Sep 17 00:00:00 2001
From: Kyle Spearrin <kyle.spearrin@gmail.com>
Date: Thu, 12 Oct 2017 22:42:12 -0400
Subject: [PATCH] overflow y on control-sidebar sections

---
 src/app/vault/views/vault.html | 74 ++++++++++++++++++----------------
 src/less/vault.less            |  8 ++++
 2 files changed, 47 insertions(+), 35 deletions(-)

diff --git a/src/app/vault/views/vault.html b/src/app/vault/views/vault.html
index e088dee508..def3d5afa0 100644
--- a/src/app/vault/views/vault.html
+++ b/src/app/vault/views/vault.html
@@ -267,46 +267,50 @@
         <h3 class="control-sidebar-heading">
             <i class="fa fa-tag fa-fw"></i> Types
         </h3>
-        <ul class="control-sidebar-menu">
-            <li>
-                <a href="#" stop-click ng-click="filterType(constants.cipherType.login)">
-                    <i class="fa fa-check fa-fw" ng-if="constants.cipherType.login === typeFilter"></i>
-                    <i class="fa fa-globe fa-fw" ng-if="constants.cipherType.login !== typeFilter"></i> Login
-                </a>
-            </li>
-            <li>
-                <a href="#" stop-click ng-click="filterType(constants.cipherType.card)">
-                    <i class="fa fa-check fa-fw" ng-if="constants.cipherType.card === typeFilter"></i>
-                    <i class="fa fa-credit-card fa-fw" ng-if="constants.cipherType.card !== typeFilter"></i> Card
-                </a>
-            </li>
-            <li>
-                <a href="#" stop-click ng-click="filterType(constants.cipherType.identity)">
-                    <i class="fa fa-check fa-fw" ng-if="constants.cipherType.identity === typeFilter"></i>
-                    <i class="fa fa-id-card-o fa-fw" ng-if="constants.cipherType.identity !== typeFilter"></i> Identity
-                </a>
-            </li>
-            <li>
-                <a href="#" stop-click ng-click="filterType(constants.cipherType.secureNote)">
-                    <i class="fa fa-check fa-fw" ng-if="constants.cipherType.secureNote === typeFilter"></i>
-                    <i class="fa fa-sticky-note-o fa-fw" ng-if="constants.cipherType.secureNote !== typeFilter"></i> Secure Note
-                </a>
-            </li>
-        </ul>
+        <div class="control-sidebar-section">
+            <ul class="control-sidebar-menu">
+                <li>
+                    <a href="#" stop-click ng-click="filterType(constants.cipherType.login)">
+                        <i class="fa fa-check fa-fw" ng-if="constants.cipherType.login === typeFilter"></i>
+                        <i class="fa fa-globe fa-fw" ng-if="constants.cipherType.login !== typeFilter"></i> Login
+                    </a>
+                </li>
+                <li>
+                    <a href="#" stop-click ng-click="filterType(constants.cipherType.card)">
+                        <i class="fa fa-check fa-fw" ng-if="constants.cipherType.card === typeFilter"></i>
+                        <i class="fa fa-credit-card fa-fw" ng-if="constants.cipherType.card !== typeFilter"></i> Card
+                    </a>
+                </li>
+                <li>
+                    <a href="#" stop-click ng-click="filterType(constants.cipherType.identity)">
+                        <i class="fa fa-check fa-fw" ng-if="constants.cipherType.identity === typeFilter"></i>
+                        <i class="fa fa-id-card-o fa-fw" ng-if="constants.cipherType.identity !== typeFilter"></i> Identity
+                    </a>
+                </li>
+                <li>
+                    <a href="#" stop-click ng-click="filterType(constants.cipherType.secureNote)">
+                        <i class="fa fa-check fa-fw" ng-if="constants.cipherType.secureNote === typeFilter"></i>
+                        <i class="fa fa-sticky-note-o fa-fw" ng-if="constants.cipherType.secureNote !== typeFilter"></i> Secure Note
+                    </a>
+                </li>
+            </ul>
+        </div>
         <h3 class="control-sidebar-heading">
             <i class="fa fa-folder fa-fw"></i> Folders
         </h3>
         <div ng-show="loading && !vaultFolders.length">
             <p>Loading...</p>
         </div>
-        <ul class="control-sidebar-menu" ng-show="!loading && vaultFolders.length">
-            <li ng-repeat="folder in vaultFolders track by folder.id">
-                <a href="#" stop-click ng-click="filterFolder(folder)">
-                    <i class="fa fa-check fa-fw" ng-if="folder.id === folderIdFilter"></i>
-                    <i class="fa fa-caret-right fa-fw" ng-if="folder.id !== folderIdFilter"></i>
-                    {{folder.name}}
-                </a>
-            </li>
-        </ul>
+        <div class="control-sidebar-section">
+            <ul class="control-sidebar-menu" ng-show="!loading && vaultFolders.length">
+                <li ng-repeat="folder in vaultFolders track by folder.id">
+                    <a href="#" stop-click ng-click="filterFolder(folder)">
+                        <i class="fa fa-check fa-fw" ng-if="folder.id === folderIdFilter"></i>
+                        <i class="fa fa-caret-right fa-fw" ng-if="folder.id !== folderIdFilter"></i>
+                        {{folder.name}}
+                    </a>
+                </li>
+            </ul>
+        </div>
     </div>
 </aside>
diff --git a/src/less/vault.less b/src/less/vault.less
index 8e723d576d..32091c133e 100644
--- a/src/less/vault.less
+++ b/src/less/vault.less
@@ -159,6 +159,7 @@ body.skin-blue {
     li a {
         padding-top: 5px;
         padding-bottom: 5px;
+        white-space: nowrap;
     }
 
     li.active a {
@@ -166,6 +167,13 @@ body.skin-blue {
     }
 }
 
+.control-sidebar-section {
+    max-height: 350px;
+    overflow-y: auto;
+    padding-right: 15px;
+    margin-right: -15px;
+}
+
 .control-sidebar-open {
     @media (min-width: @screen-sm) {
         .main-footer {