better scroll + back-header on mobile

src/components/tab_switcher/vertical_tab_switcher.jsx

@@ -161,9 +161,13 @@ export default {
 
       return (
         <div class={classes} >
-          {header}
+          <div class="tab-mobile-header">
-          <div class={ ['tab-content', props['full-width'] ? '-full-width' : null].join(' ') } >
+            {header}
-            {renderSlot}
+          </div>
+          <div class="tab-slot-wrapper">
+            <div class={ ['tab-content', props['full-width'] ? '-full-width' : null].join(' ') } >
+              {renderSlot}
+            </div>
           </div>
         </div>
       )

src/components/tab_switcher/vertical_tab_switcher.scss

@@ -30,6 +30,7 @@
 
     .tab-content {
       align-self: center;
+      height: 100%;
 
       &:not(.-full-width) {
         max-width: 40em;
@@ -52,10 +53,16 @@
       }
     }
 
-    .tab-content-wrapper {
+    .tab-slot-wrapper {
+      flex: 1 1 auto;
+      height: 100%;
+      overflow-y: auto;
       display: flex;
       flex-direction: column;
-      overflow-y: auto;
+    }
+
+    .tab-content-wrapper {
+      flex: 1 1 auto;
       height: 100%;
 
       &.-hidden {
@@ -85,6 +92,7 @@
       > .contents {
         display: block;
         flex-grow: 1;
+        flex-shrink: 1;
       }
 
       > .tabs {