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
2024-11-22 04:40:37 +03:00 · 2022-12-29 19:14:12 +01:00 · 2022-12-29 19:14:12 +01:00 · 0a602edf5e
commit 0a602edf5e
parent ccca93695a
10 changed files with 259 additions and 78 deletions
--- a/web/components/layouts/Main.tsx
+++ b/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);
  }, []);
--- a/web/components/ui/Content/Content.module.scss
+++ b/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%;
  }
 }

--- a/web/components/ui/Content/Content.tsx
+++ b/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>
  );
 };
--- a/web/components/ui/Footer/Footer.module.scss
+++ b/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;
-  }
-}
--- a/web/components/ui/Header/Header.module.scss
+++ b/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;
+}
--- a/web/components/ui/Header/Header.tsx
+++ b/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>
--- a/web/package-lock.json
+++ b/web/package-lock.json
@ -39,6 +39,7 @@
 				"react-hotkeys-hook": "3.4.7",
 				"react-linkify": "1.0.0-alpha",
 				"react-markdown": "8.0.4",
+				"react-use": "^17.4.0",
 				"react-virtuoso": "3.1.5",
 				"recoil": "0.7.6",
 				"sharp": "0.31.3",
@ -11739,6 +11740,11 @@
 				"@types/istanbul-lib-report": "*"
 			}
 		},
+		"node_modules/@types/js-cookie": {
+			"version": "2.2.7",
+			"resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-2.2.7.tgz",
+			"integrity": "sha512-aLkWa0C0vO5b4Sr798E26QgOkss68Un0bLjs7u9qxzPT5CG+8DuNTffWES58YzJs3hrVAOs1wonycqEBqNJubA=="
+		},
 		"node_modules/@types/json-schema": {
 			"version": "7.0.11",
 			"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
@ -12702,6 +12708,11 @@
 				"node": ">=10.0.0"
 			}
 		},
+		"node_modules/@xobotyi/scrollbar-width": {
+			"version": "1.9.5",
+			"resolved": "https://registry.npmjs.org/@xobotyi/scrollbar-width/-/scrollbar-width-1.9.5.tgz",
+			"integrity": "sha512-N8tkAACJx2ww8vFMneJmaAgmjAG1tnVBZJRLRcx061tmsLRZHSEZSLuGWnwPtunsSLvSqXQ2wfp7Mgqg1I+2dQ=="
+		},
 		"node_modules/@xstate/react": {
 			"version": "3.0.1",
 			"resolved": "https://registry.npmjs.org/@xstate/react/-/react-3.0.1.tgz",
@ -16455,6 +16466,14 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/css-in-js-utils": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/css-in-js-utils/-/css-in-js-utils-3.1.0.tgz",
+			"integrity": "sha512-fJAcud6B3rRu+KHYk+Bwf+WFL2MDCJJ1XG9x137tJQ0xYxor7XziQtuGFbWNdqrvF4Tk26O3H73nfVqXt/fW1A==",
+			"dependencies": {
+				"hyphenate-style-name": "^1.0.3"
+			}
+		},
 		"node_modules/css-loader": {
 			"version": "6.7.3",
 			"resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.7.3.tgz",
@ -16534,7 +16553,6 @@
 			"version": "1.1.3",
 			"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
 			"integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
-			"dev": true,
 			"dependencies": {
 				"mdn-data": "2.0.14",
 				"source-map": "^0.6.1"
@ -17591,7 +17609,6 @@
 			"version": "2.1.4",
 			"resolved": "https://registry.npmjs.org/error-stack-parser/-/error-stack-parser-2.1.4.tgz",
 			"integrity": "sha512-Sk5V6wVazPhq5MhpO+AUxJn5x7XSXGl1R93Vn7i+zS15KDVxQijejNCrz8340/2bgLBjR9GtEG8ZVKONDjcqGQ==",
-			"dev": true,
 			"dependencies": {
 				"stackframe": "^1.3.4"
 			}
@ -19056,6 +19073,21 @@
 			"integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
 			"dev": true
 		},
+		"node_modules/fast-loops": {
+			"version": "1.1.3",
+			"resolved": "https://registry.npmjs.org/fast-loops/-/fast-loops-1.1.3.tgz",
+			"integrity": "sha512-8EZzEP0eKkEEVX+drtd9mtuQ+/QrlfW/5MlwcwK5Nds6EkZ/tRzEexkzUY2mIssnAyVLT+TKHuRXmFNNXYUd6g=="
+		},
+		"node_modules/fast-shallow-equal": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/fast-shallow-equal/-/fast-shallow-equal-1.0.0.tgz",
+			"integrity": "sha512-HPtaa38cPgWvaCFmRNhlc6NG7pv6NUHqjPgVAkWGoB9mQMwYB27/K0CvOM5Czy+qpT3e8XJ6Q4aPAnzpNpzNaw=="
+		},
+		"node_modules/fastest-stable-stringify": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/fastest-stable-stringify/-/fastest-stable-stringify-2.0.2.tgz",
+			"integrity": "sha512-bijHueCGd0LqqNK9b5oCMHc0MluJAx0cwqASgbWMvkO01lCYgIhacVRLcaDz3QnyYIRNJRDwMb41VuT6pHJ91Q=="
+		},
 		"node_modules/fastq": {
 			"version": "1.14.0",
 			"resolved": "https://registry.npmjs.org/fastq/-/fastq-1.14.0.tgz",
@ -20958,6 +20990,11 @@
 				"node": ">=8.12.0"
 			}
 		},
+		"node_modules/hyphenate-style-name": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
+			"integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
+		},
 		"node_modules/iconv-lite": {
 			"version": "0.4.24",
 			"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@ -21134,6 +21171,15 @@
 			"resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.1.1.tgz",
 			"integrity": "sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q=="
 		},
+		"node_modules/inline-style-prefixer": {
+			"version": "6.0.4",
+			"resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-6.0.4.tgz",
+			"integrity": "sha512-FwXmZC2zbeeS7NzGjJ6pAiqRhXR0ugUShSNb6GApMl6da0/XGc4MOJsoWAywia52EEWbXNSy0pzkwz/+Y+swSg==",
+			"dependencies": {
+				"css-in-js-utils": "^3.1.0",
+				"fast-loops": "^1.1.3"
+			}
+		},
 		"node_modules/internal-slot": {
 			"version": "1.0.4",
 			"resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.4.tgz",
@ -22190,6 +22236,11 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/js-cookie": {
+			"version": "2.2.1",
+			"resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz",
+			"integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ=="
+		},
 		"node_modules/js-sdsl": {
 			"version": "4.2.0",
 			"resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.2.0.tgz",
@ -23853,8 +23904,7 @@
 		"node_modules/mdn-data": {
 			"version": "2.0.14",
 			"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
-			"integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==",
-			"dev": true
+			"integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow=="
 		},
 		"node_modules/mdurl": {
 			"version": "1.0.1",
@ -25114,6 +25164,25 @@
 			"dev": true,
 			"optional": true
 		},
+		"node_modules/nano-css": {
+			"version": "5.3.5",
+			"resolved": "https://registry.npmjs.org/nano-css/-/nano-css-5.3.5.tgz",
+			"integrity": "sha512-vSB9X12bbNu4ALBu7nigJgRViZ6ja3OU7CeuiV1zMIbXOdmkLahgtPmh3GBOlDxbKY0CitqlPdOReGlBLSp+yg==",
+			"dependencies": {
+				"css-tree": "^1.1.2",
+				"csstype": "^3.0.6",
+				"fastest-stable-stringify": "^2.0.2",
+				"inline-style-prefixer": "^6.0.0",
+				"rtl-css-js": "^1.14.0",
+				"sourcemap-codec": "^1.4.8",
+				"stacktrace-js": "^2.0.2",
+				"stylis": "^4.0.6"
+			},
+			"peerDependencies": {
+				"react": "*",
+				"react-dom": "*"
+			}
+		},
 		"node_modules/nanoid": {
 			"version": "3.3.4",
 			"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
@ -28470,6 +28539,40 @@
 				"throttle-debounce": "^3.0.1"
 			}
 		},
+		"node_modules/react-universal-interface": {
+			"version": "0.6.2",
+			"resolved": "https://registry.npmjs.org/react-universal-interface/-/react-universal-interface-0.6.2.tgz",
+			"integrity": "sha512-dg8yXdcQmvgR13RIlZbTRQOoUrDciFVoSBZILwjE2LFISxZZ8loVJKAkuzswl5js8BHda79bIb2b84ehU8IjXw==",
+			"peerDependencies": {
+				"react": "*",
+				"tslib": "*"
+			}
+		},
+		"node_modules/react-use": {
+			"version": "17.4.0",
+			"resolved": "https://registry.npmjs.org/react-use/-/react-use-17.4.0.tgz",
+			"integrity": "sha512-TgbNTCA33Wl7xzIJegn1HndB4qTS9u03QUwyNycUnXaweZkE4Kq2SB+Yoxx8qbshkZGYBDvUXbXWRUmQDcZZ/Q==",
+			"dependencies": {
+				"@types/js-cookie": "^2.2.6",
+				"@xobotyi/scrollbar-width": "^1.9.5",
+				"copy-to-clipboard": "^3.3.1",
+				"fast-deep-equal": "^3.1.3",
+				"fast-shallow-equal": "^1.0.0",
+				"js-cookie": "^2.2.1",
+				"nano-css": "^5.3.1",
+				"react-universal-interface": "^0.6.2",
+				"resize-observer-polyfill": "^1.5.1",
+				"screenfull": "^5.1.0",
+				"set-harmonic-interval": "^1.0.1",
+				"throttle-debounce": "^3.0.1",
+				"ts-easing": "^0.2.0",
+				"tslib": "^2.1.0"
+			},
+			"peerDependencies": {
+				"react": "^16.8.0  || ^17.0.0 || ^18.0.0",
+				"react-dom": "^16.8.0  || ^17.0.0 || ^18.0.0"
+			}
+		},
 		"node_modules/react-virtuoso": {
 			"version": "3.1.5",
 			"resolved": "https://registry.npmjs.org/react-virtuoso/-/react-virtuoso-3.1.5.tgz",
@ -29473,6 +29576,14 @@
 				"node": "6.* || >= 7.*"
 			}
 		},
+		"node_modules/rtl-css-js": {
+			"version": "1.16.1",
+			"resolved": "https://registry.npmjs.org/rtl-css-js/-/rtl-css-js-1.16.1.tgz",
+			"integrity": "sha512-lRQgou1mu19e+Ya0LsTvKrVJ5TYUbqCVPAiImX3UfLTenarvPUl1QFdvu5Z3PYmHT9RCcwIfbjRQBntExyj3Zg==",
+			"dependencies": {
+				"@babel/runtime": "^7.1.2"
+			}
+		},
 		"node_modules/run-parallel": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@ -29983,6 +30094,17 @@
 				"url": "https://opencollective.com/webpack"
 			}
 		},
+		"node_modules/screenfull": {
+			"version": "5.2.0",
+			"resolved": "https://registry.npmjs.org/screenfull/-/screenfull-5.2.0.tgz",
+			"integrity": "sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA==",
+			"engines": {
+				"node": ">=0.10.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
 		"node_modules/scroll-into-view-if-needed": {
 			"version": "2.2.31",
 			"resolved": "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.31.tgz",
@ -30123,6 +30245,14 @@
 			"integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
 			"dev": true
 		},
+		"node_modules/set-harmonic-interval": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/set-harmonic-interval/-/set-harmonic-interval-1.0.1.tgz",
+			"integrity": "sha512-AhICkFV84tBP1aWqPwLZqFvAwqEoVA9kxNMniGEUvzOlm4vLmOFLiTT3UZ6bziJTy4bOVpzWGTfSCbmaayGx8g==",
+			"engines": {
+				"node": ">=6.9"
+			}
+		},
 		"node_modules/set-value": {
 			"version": "2.0.1",
 			"resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.1.tgz",
@ -30863,6 +30993,12 @@
 			"deprecated": "See https://github.com/lydell/source-map-url#deprecated",
 			"dev": true
 		},
+		"node_modules/sourcemap-codec": {
+			"version": "1.4.8",
+			"resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
+			"integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
+			"deprecated": "Please use @jridgewell/sourcemap-codec instead"
+		},
 		"node_modules/space-separated-tokens": {
 			"version": "2.0.2",
 			"resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz",
@ -30966,11 +31102,45 @@
 			"deprecated": "Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility",
 			"dev": true
 		},
+		"node_modules/stack-generator": {
+			"version": "2.0.10",
+			"resolved": "https://registry.npmjs.org/stack-generator/-/stack-generator-2.0.10.tgz",
+			"integrity": "sha512-mwnua/hkqM6pF4k8SnmZ2zfETsRUpWXREfA/goT8SLCV4iOFa4bzOX2nDipWAZFPTjLvQB82f5yaodMVhK0yJQ==",
+			"dependencies": {
+				"stackframe": "^1.3.4"
+			}
+		},
 		"node_modules/stackframe": {
 			"version": "1.3.4",
 			"resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.3.4.tgz",
-			"integrity": "sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw==",
-			"dev": true
+			"integrity": "sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw=="
+		},
+		"node_modules/stacktrace-gps": {
+			"version": "3.1.2",
+			"resolved": "https://registry.npmjs.org/stacktrace-gps/-/stacktrace-gps-3.1.2.tgz",
+			"integrity": "sha512-GcUgbO4Jsqqg6RxfyTHFiPxdPqF+3LFmQhm7MgCuYQOYuWyqxo5pwRPz5d/u6/WYJdEnWfK4r+jGbyD8TSggXQ==",
+			"dependencies": {
+				"source-map": "0.5.6",
+				"stackframe": "^1.3.4"
+			}
+		},
+		"node_modules/stacktrace-gps/node_modules/source-map": {
+			"version": "0.5.6",
+			"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz",
+			"integrity": "sha512-MjZkVp0NHr5+TPihLcadqnlVoGIoWo4IBHptutGh9wI3ttUYvCG26HkSuDi+K6lsZ25syXJXcctwgyVCt//xqA==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/stacktrace-js": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/stacktrace-js/-/stacktrace-js-2.0.2.tgz",
+			"integrity": "sha512-Je5vBeY4S1r/RnLydLl0TBTi3F2qdfWmYsGvtfZgEI+SCprPppaIhQf5nGcal4gI4cGpCV/duLcAzT1np6sQqg==",
+			"dependencies": {
+				"error-stack-parser": "^2.0.6",
+				"stack-generator": "^2.0.5",
+				"stacktrace-gps": "^3.0.4"
+			}
 		},
 		"node_modules/state-toggle": {
 			"version": "1.0.3",
@ -31691,6 +31861,11 @@
 				}
 			}
 		},
+		"node_modules/stylis": {
+			"version": "4.1.3",
+			"resolved": "https://registry.npmjs.org/stylis/-/stylis-4.1.3.tgz",
+			"integrity": "sha512-GP6WDNWf+o403jrEp9c5jibKavrtLW+/qYGhFxFrG8maXhwTBI7gLLhiBb0o7uFccWN+EOS9aMO6cGHWAO07OA=="
+		},
 		"node_modules/supports-color": {
 			"version": "5.5.0",
 			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@ -32054,7 +32229,6 @@
 			"version": "3.0.1",
 			"resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-3.0.1.tgz",
 			"integrity": "sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg==",
-			"dev": true,
 			"engines": {
 				"node": ">=10"
 			}
@ -32361,6 +32535,11 @@
 				"node": ">=6.10"
 			}
 		},
+		"node_modules/ts-easing": {
+			"version": "0.2.0",
+			"resolved": "https://registry.npmjs.org/ts-easing/-/ts-easing-0.2.0.tgz",
+			"integrity": "sha512-Z86EW+fFFh/IFB1fqQ3/+7Zpf9t2ebOAxNI/V6Wo7r5gqiqtxmgTlQ1qbqQcjLKYeSHPTsEmvlJUDg/EuL0uHQ=="
+		},
 		"node_modules/ts-pnp": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/ts-pnp/-/ts-pnp-1.2.0.tgz",
--- a/web/package.json
+++ b/web/package.json
@ -43,6 +43,7 @@
 		"react-hotkeys-hook": "3.4.7",
 		"react-linkify": "1.0.0-alpha",
 		"react-markdown": "8.0.4",
+		"react-use": "^17.4.0",
 		"react-virtuoso": "3.1.5",
 		"recoil": "0.7.6",
 		"sharp": "0.31.3",
@ -87,8 +88,8 @@
 		"babel-loader": "9.1.0",
 		"chromatic": "6.14.0",
 		"css-loader": "6.7.3",
-		"eslint": "8.30.0",
 		"cypress": "^12.0.0",
+		"eslint": "8.30.0",
 		"eslint-config-airbnb": "19.0.4",
 		"eslint-config-next": "13.0.6",
 		"eslint-config-prettier": "8.5.0",
--- a/web/styles/globals.scss
+++ b/web/styles/globals.scss
@ -9,7 +9,7 @@
 :root {
  --content-padding: 12px;
  --module-spacing: 12px; // margin size between lines of stuff, if needed
-  --header-height: 2.5rem; // needed for making main content scrollable;
+  --header-height: 5.375rem; // needed for making main content scrollable;
  --footer-height: 2.5rem; // needed for making main content scrollable;
  --content-height: calc(100vh - var(--header-height));
 }
@ -26,7 +26,6 @@ body {
  font-family: var(--theme-text-body-font-family);
  line-height: 1.5em;
  margin: 0;
-
  background-color: var(--theme-color-background-main);

  div,
--- a/web/styles/mixins.scss
+++ b/web/styles/mixins.scss
@ -10,6 +10,11 @@
      @content;
    }
  }
+  @if $breakpoint == tablet {
+    @media only screen and (max-width: 768px) {
+      @content;
+    }
+  }
  @if $breakpoint == mobile {
    @media only screen and (max-width: 481px) {
      @content;