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);
   }, []);

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

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

web/components/ui/Header/Header.module.scss

@@ -1,9 +1,7 @@
 @import '../../../styles/mixins.scss';
 
 .header {
-  position: sticky;
-  top: 0px;
-  height: var(--header-height) !important;
+  height: var(--header-height);
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -11,31 +9,36 @@
   padding: 1rem 0.7rem;
   box-shadow: 0px 1px 3px 1px rgb(0 0 0 / 10%);
   background-color: var(--theme-color-background-header);
-  flex-basis: content;
 
-  .logoImage {
-    @include screen(mobile) {
-      display: none;
-    }
-    padding: 0.2rem;
-  }
-
-  .logo {
-    display: flex;
-    align-items: center;
-
-    .title {
-      color: var(--theme-color-components-text-on-dark);
-      font-family: var(--theme-text-display-font-family);
-      margin-left: 0.5rem;
-      margin-bottom: 0px;
-      font-size: clamp(1rem, 4vw, 1.6rem);
-      font-weight: 600;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      width: 70vw;
-      overflow: hidden;
-      line-height: 1.4;
-    }
+  @include screen(mobile) {
+    --header-height: 3.85rem;
   }
 }
+
+.logoImage {
+  padding: 0.2rem;
+  display: none;
+
+  @include screen(desktop) {
+    display: block;
+  }
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+}
+
+.title {
+  color: var(--theme-color-components-text-on-dark);
+  font-family: var(--theme-text-display-font-family);
+  margin-left: 0.5rem;
+  margin-bottom: 0px;
+  font-size: clamp(1rem, 4vw, 1.6rem);
+  font-weight: 600;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  width: 70vw;
+  overflow: hidden;
+  line-height: 1.4;
+}

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>