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/Header/Header.tsx

@@ -19,7 +19,7 @@ export const Header: FC<HeaderComponentProps> = ({
   chatDisabled,
 }) => (
   <AntHeader className={cn([`${styles.header}`], 'global-header')}>
-    <div className={`${styles.logo}`}>
+    <div className={styles.logo}>
       <div id="header-logo" className={styles.logoImage}>
         <OwncastLogo variant="contrast" />
       </div>