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%;
   }
 }
 

web/components/ui/Content/Content.tsx

@@ -1,7 +1,6 @@
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { Layout, Tabs, Skeleton } from 'antd';
-import { FC, MutableRefObject, useEffect, useRef, useState } from 'react';
-import cn from 'classnames';
+import { FC, useEffect, useState } from 'react';
 import dynamic from 'next/dynamic';
 import { LOCAL_STORAGE_KEYS, getLocalStorage, setLocalStorage } from '../../../utils/localStorage';
 
@@ -98,27 +97,6 @@ const DesktopContent = ({
   );
 };
 
-function useHeight(ref: MutableRefObject<HTMLDivElement>) {
-  const [contentH, setContentH] = useState(0);
-  const handleResize = () => {
-    if (!ref.current) return;
-    const fromTop = ref.current.getBoundingClientRect().top;
-    const { innerHeight } = window;
-    setContentH(innerHeight - fromTop);
-  };
-
-  useEffect(() => {
-    handleResize();
-    window.addEventListener('resize', handleResize);
-
-    return () => {
-      window.removeEventListener('resize', handleResize);
-    };
-  }, []);
-
-  return contentH;
-}
-
 const MobileContent = ({
   name,
   streamTitle,
@@ -137,9 +115,6 @@ const MobileContent = ({
   if (!currentUser) {
     return null;
   }
-
-  const mobileContentRef = useRef<HTMLDivElement>();
-
   const { id, displayName } = currentUser;
 
   const chatContent = showChat && (
@@ -174,8 +149,6 @@ const MobileContent = ({
     { label: 'Followers', key: '3', children: followersTabContent },
   ];
 
-  const height = `${useHeight(mobileContentRef)}px`;
-
   const replacementTabBar = (props, DefaultTabBar) => (
     <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start' }}>
       <DefaultTabBar {...props} style={{ width: '85%' }} />
@@ -191,8 +164,13 @@ const MobileContent = ({
   );
 
   return (
-    <div className={cn(styles.lowerSectionMobile)} ref={mobileContentRef} style={{ height }}>
-      <Tabs defaultActiveKey="0" items={items} renderTabBar={replacementTabBar} />
+    <div className={styles.lowerSectionMobile}>
+      <Tabs
+        className={styles.tabs}
+        defaultActiveKey="0"
+        items={items}
+        renderTabBar={replacementTabBar}
+      />
     </div>
   );
 };