Improve sidebar UI

assets/stylesheets/components/_mobile.scss

@@ -12,7 +12,7 @@
 
   ._app, ._content { overflow: visible; }
 
-  ._container, ._sidebar {
+  ._container {
     margin: 0;
     padding-top: $headerHeight;
   }
@@ -21,26 +21,22 @@
     position: static;
     height: auto;
     margin: 0;
-    padding: .75rem 1rem 2rem;
+    padding: .75rem 1rem 0;
 
     &:before { content: none; }
   }
 
   ._booting:before, ._content-loading:before { font-size: 3rem; }
 
-  ._header, ._footer {
+  ._header { position: fixed; }
-    position: fixed;
-    width: 100%;
-  }
 
-  ._header, ._list, ._footer {
+  ._header, ._list, ._sidebar-footer {
     width: 100%;
     border-right: 0;
     box-shadow: none;
   }
 
-  ._settings { position: static; }
+  ._settings { position: relative; }
-  ._settings ._sidebar { padding-bottom: $headerHeight; }
   ._settings-tabs { display: block; }
   ._header ._settings-btn { width: auto; }
 
@@ -61,11 +57,13 @@
   // Sidebar
 
   ._sidebar {
-    position: static;
+    position: relative;
     min-height: 100%;
     overflow: visible;
   }
 
+  ._resizer { display: none; }
+
   ._list-item {
     white-space: normal;
     word-wrap: break-word;

assets/stylesheets/components/_settings.scss

@@ -12,13 +12,16 @@
   &._in { display: block; }
 
   ._sidebar {
-    bottom: $headerHeight;
+    &:after { // padding bottom
+      content: '';
+      display: block;
+      height: $headerHeight;
+    }
 
     ._sidebar-hidden & { display: block; }
   }
 
   ._header { justify-content: space-between; }
-  ._footer { box-shadow: 1.25rem 0 $contentBackground; } // cover sidebar scrollbar
 }
 
 //
@@ -78,8 +81,8 @@
 // Footer
 //
 
-._footer {
+._sidebar-footer {
-  position: absolute;
+  position: fixed;
   z-index: $headerZ;
   bottom: 0;
   left: 0;

assets/stylesheets/components/_sidebar.scss

@@ -5,11 +5,12 @@
 ._sidebar {
   position: absolute;
   z-index: $sidebarZ;
-  top: $headerHeight;
+  top: 0;
   bottom: 0;
   left: 0;
   overflow-x: hidden;
   overflow-y: scroll;
+  padding-top: $headerHeight;
   background: $sidebarBackground;
   background-clip: content-box;
   -webkit-overflow-scrolling: touch;
@@ -17,6 +18,11 @@
   @extend %border-box;
   @extend %user-select-none;
 
+  @media (-moz-overlay-scrollbars) {
+    padding-top: 0;
+    top: $headerHeight;
+  }
+
   &::-webkit-scrollbar { -webkit-appearance: none; width: 10px; }
   &::-webkit-scrollbar-button { display: none; }
   &::-webkit-scrollbar-track { background: $contentBackground; }
@@ -41,9 +47,9 @@
 
 ._resizer {
   position: absolute;
-  z-index: $sidebarZ;
+  z-index: $sidebarZ + 1;
   top: $headerHeight;
-  bottom: 0;
+  bottom: $headerHeight;
   left: $sidebarWidth;
   margin-left: -2px;
   width: 3px;

views/app.erb

@@ -47,17 +47,18 @@
         <a class="_settings-tab active" data-tab="doc-picker" hidden>Docs</a><a class="_settings-tab" data-tab="settings" hidden>Settings</a>
       </nav>
     </div>
-    <div class="_sidebar"></div>
+    <div class="_sidebar">
-    <div class="_footer">
+      <div class="_sidebar-footer">
-      <button type="submit" class="_settings-btn">
+        <button type="submit" class="_settings-btn">
-        <svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path></svg> Save
+          <svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path></svg> Apply
-      </button>
+        </button>
+      </div>
     </div>
   </form>
 </div>
 <style data-size="<%= app_size %>" data-resizer>
   ._container { margin-left: <%= app_size %>; }
-  ._header, ._list, ._footer { width: <%= app_size %>; }
+  ._header, ._list, ._sidebar-footer { width: <%= app_size %>; }
   ._list-hover.clone { min-width: <%= app_size %>; }
   ._notice, ._path, ._resizer { left: <%= app_size %>; }
 </style>