diff --git a/web/components/layouts/Main.tsx b/web/components/layouts/Main.tsx index 1ead29ee9..753e9c7da 100644 --- 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(null); const { chatDisabled } = clientConfig; + useLockBodyScroll(true); + useEffect(() => { setupNoLinkReferrer(layoutRef.current); }, []); diff --git a/web/components/ui/Content/Content.module.scss b/web/components/ui/Content/Content.module.scss index 6667c8bd7..4c9a9b58c 100644 --- 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%; } } diff --git a/web/components/ui/Content/Content.tsx b/web/components/ui/Content/Content.tsx index 15345687e..9775098ea 100644 --- 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) { - 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(); - 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) => (
@@ -191,8 +164,13 @@ const MobileContent = ({ ); return ( -
- +
+
); }; diff --git a/web/components/ui/Footer/Footer.module.scss b/web/components/ui/Footer/Footer.module.scss index 845eca62a..0eb0891d5 100644 --- 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; - } -} diff --git a/web/components/ui/Header/Header.module.scss b/web/components/ui/Header/Header.module.scss index 36d5b295d..9b373b904 100644 --- 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; +} diff --git a/web/components/ui/Header/Header.tsx b/web/components/ui/Header/Header.tsx index 542e8258b..c34ad4854 100644 --- a/web/components/ui/Header/Header.tsx +++ b/web/components/ui/Header/Header.tsx @@ -19,7 +19,7 @@ export const Header: FC = ({ chatDisabled, }) => ( -
+
diff --git a/web/package-lock.json b/web/package-lock.json index bb65b26b2..16c8d416e 100644 --- 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", diff --git a/web/package.json b/web/package.json index 2933930cc..0d407fad2 100644 --- 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", diff --git a/web/styles/globals.scss b/web/styles/globals.scss index 9d3726aab..ee9a2cbd8 100644 --- 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, diff --git a/web/styles/mixins.scss b/web/styles/mixins.scss index 5edfe1218..6a457e041 100644 --- 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;