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/layouts/Main.tsx

@@ -4,6 +4,7 @@ import { Layout } from 'antd';
 import { useRecoilValue } from 'recoil';
 import Head from 'next/head';
 import { FC, useEffect, useRef } from 'react';
+import { useLockBodyScroll } from 'react-use';
 import {
   ClientConfigStore,
   isChatAvailableSelector,
@@ -30,6 +31,8 @@ export const Main: FC = () => {
   const layoutRef = useRef<HTMLDivElement>(null);
   const { chatDisabled } = clientConfig;
 
+  useLockBodyScroll(true);
+
   useEffect(() => {
     setupNoLinkReferrer(layoutRef.current);
   }, []);