Make sidebar scrollable. It prevents content overflow for small screens

Signed-off-by: Dmitriy Zaporozhets <[email protected]>
Koriel · Jul 13, 2015 · a839b2a · a839b2a
1 parent 4f0455c
commit a839b2a
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 8 deletions.
diff --git a/app/assets/stylesheets/generic/sidebar.scss b/app/assets/stylesheets/generic/sidebar.scss
@@ -2,6 +2,8 @@
   .sidebar-wrapper {
     position: fixed;
     top: 0;
+    bottom: 0;
+    overflow-y: scroll;
     left: 0;
     height: 100%;
     transition-duration: .3s;
@@ -21,8 +23,9 @@
 }
 
 .nav-sidebar {
+  margin-top: 29 + $header-height;
+  margin-bottom: 50px;
   transition-duration: .3s;
-  margin: 0;
   list-style: none;
   overflow: hidden;
 
@@ -88,9 +91,6 @@
     width: $sidebar_width;
 
     .nav-sidebar {
-      margin-top: 29px;
-      position: fixed;
-      top: $header-height;
       width: $sidebar_width;
     }
 
@@ -114,9 +114,6 @@
     width: $sidebar_collapsed_width;
 
     .nav-sidebar {
-      margin-top: 29px;
-      position: fixed;
-      top: $header-height;
       width: $sidebar_collapsed_width;
 
       li a {
@@ -178,7 +175,7 @@
 }
 
 .sidebar-user {
-  position: absolute;
+  position: fixed;
   bottom: 0;
   width: $sidebar_width;
   padding: 10px;

diff --git a/app/assets/stylesheets/themes/gitlab-theme.scss b/app/assets/stylesheets/themes/gitlab-theme.scss
@@ -38,6 +38,7 @@
       border-right: 1px solid $color-darker;
 
       .sidebar-user {
+        background: $color-darker;
         color: $color-light;
 
         &:hover {