Move scroller outside settings, always show scrollbar in content

client/src/styles/partials/bdsettings/sidebarview.scss

@@ -111,8 +111,7 @@
     .platform-darwin & {
         top: 0px;
 
-        .bd-sidebar-view .bd-sidebar-region,
-        .bd-sidebar-view .bd-content-region {
+        .bd-sidebar-view .bd-sidebar-region {
             padding-top: 22px;
         }
     }

client/src/styles/partials/generic/scrollable.scss

@@ -8,8 +8,6 @@
         flex-direction: column;
         overflow-y: auto;
         overflow-x: hidden;
-        padding: 10px 10px 10px 0;
-        margin: 10px 0;
 
         @include scrollbar;
     }

client/src/styles/partials/modals/modals.scss

@@ -85,12 +85,16 @@
         .bd-modal-tip {
             flex-grow: 1;
             line-height: 26px;
-            color: #FFF;
+            color: #fff;
         }
 
         .bd-button {
             padding: 5px 10px;
             border-radius: 3px;
+
+            + .bd-button {
+                margin-left: 15px;
+            }
         }
     }
 }

client/src/styles/partials/sidebarview/main.scss

@@ -19,6 +19,10 @@
         z-index: 5;
         max-width: 310px;
         min-width: 310px;
+
+        .bd-scroller {
+            padding: 10px 10px 0 0;
+        }
     }
 
     .bd-content-region {

client/src/styles/partials/sidebarview/settingswrap.scss

@@ -6,7 +6,8 @@
         flex: 1;
         min-height: 1px;
         box-sizing: border-box;
-        padding: 80px 15px 15px 15px;
+        padding: 90px 15px 0 15px;
+        margin-bottom: 5px;
     }
 }
 
@@ -15,17 +16,23 @@
         display: flex;
         flex-direction: column;
         flex-grow: 1;
-        padding: 20px 15px 15px 15px;
 
-        .bd-scroller-wrap {
+        > .bd-scroller-wrap {
             flex-grow: 1;
+
+            > .bd-scroller {
+                overflow-y: scroll;
+
+                .platform-darwin .bd-settings & {
+                    padding-top: 22px;
+                }
+            }
         }
 
         .bd-settingswrap-header {
             outline: 0;
             padding: 0;
-            margin-top: 10px;
-            margin-bottom: 20px;
+            margin: 30px 20px 20px;
             vertical-align: baseline;
             display: flex;
             flex: 0 0 auto;
@@ -38,5 +45,10 @@
                 flex: 1 1 auto;
             }
         }
+
+        .bd-settingswrap-contents {
+            padding: 0 20px;
+            margin-bottom: 84px;
+        }
     }
 }

client/src/ui/components/bd/SettingsWrapper.vue

@@ -10,11 +10,11 @@
 
 <template>
     <div class="bd-settingswrap">
-        <div class="bd-settingswrap-header">
-            <span class="bd-settingswrap-header-text">{{ headertext }}</span>
-            <slot name="header" />
-        </div>
         <ScrollerWrap>
+            <div class="bd-settingswrap-header">
+                <span class="bd-settingswrap-header-text">{{ headertext }}</span>
+                <slot name="header" />
+            </div>
             <div class="bd-settingswrap-contents">
                 <slot />
             </div>