Double scrollbars (#2509)

* hide footer on mobile to avoid double scrollbars

* fix double scrollbars on desktop by removing scroll behaviour from main section

* add scrollbar styles to body and html

* add vertical scrolling back to main section

* prevent header from collapsing and messing around with scrolling

* prevent body from scrolling for main layout

* move tablet breakpoint into breakpoint mixin

* preffify code

* remove js height calc for lower section on mobile and use css

* enable scrolling within a tab on mobile

* remove scrollbar from main section on mobile

* adjust header height on mobile

* add react use to web

* lock body scroll for main layout

web/components/ui/Content/Content.module.scss

@@ -12,8 +12,11 @@
 
   .mainSection {
     display: flex;
-    overflow-y: scroll;
     flex-direction: column;
+
+    @include screen(desktop) {
+      overflow-y: scroll;
+    }
   }
 
   .mainSection::-webkit-scrollbar {
@@ -37,7 +40,15 @@
   }
 
   .lowerSectionMobile {
+    display: flex;
+    flex-grow: 1;
     padding: 0.3em;
+    // Enable overflow scrolling within a tab (∩｀-´)⊃━☆ﾟ.*･｡ﾟ
+    height: 100vw;
+  }
+
+  .tabs {
+    width: 100%;
   }
 }