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/Footer/Footer.module.scss

@@ -1,7 +1,7 @@
-$Tablet-breakpoint: 768px;
+@import '../../../styles/mixins.scss';
 
 .footer {
-  display: flex;
+  display: none;
   align-items: center;
   flex-wrap: wrap;
   height: var(--footer-height);
@@ -17,6 +17,14 @@ $Tablet-breakpoint: 768px;
   font-weight: 600;
   border-top: 1px solid rgba(214, 211, 211, 0.5);
 
+  @include screen(tablet) {
+    font-size: 10px;
+  }
+
+  @include screen(desktop) {
+    display: flex;
+  }
+
   a {
     color: var(--theme-color-components-text-on-dark);
     text-decoration: none;
@@ -30,9 +38,3 @@ $Tablet-breakpoint: 768px;
     flex-direction: row;
   }
 }
-
-@media (max-width: $Tablet-breakpoint) {
-  .footer {
-    font-size: 10px;
-  }
-}