[Layout] Scrollbar gutters (#6908)

* Fix sidebar alignment * Make sure scrollbars don't hide * Gift left nav more space * Use stable one-edge, update logic in RightNav * Ope * Increase width * Reset * Add transform to sidebars * Remove bg in sidebars * Handle shifts in layout components * Replace scroll-removal handling * Make react-remove-scroll an explicit dep * Remove unused script
bluesky-social · Dec 4, 2024 · 25b5091 · 25b5091
1 parent 0bd55e2
commit 25b5091
Show file tree

Hide file tree

Showing 14 changed files with 129 additions and 170 deletions.
diff --git a/bskyweb/templates/base.html b/bskyweb/templates/base.html
@@ -38,13 +38,8 @@
       font-style: italic;
       font-display: swap;
     }
-    :root {
-      --scrollbar-offset: 0px;
-      --scrollbar-offset-negative: 0px;
-    }
     html {
       background-color: white;
-      scrollbar-gutter: stable both-edges;
     }
     @media (prefers-color-scheme: dark) {
       html {
@@ -83,24 +78,10 @@
     /* We need this style to prevent web dropdowns from shifting the display when opening */
     body {
       width: 100%;
+      overflow-y: scroll;
     }
   </style>
 
-  <script>
-    try {
-      var windowWidth = window.innerWidth;
-      var html = document.documentElement;
-      var htmlWidth = html.getBoundingClientRect().width;
-      var scrollbarWidth = (windowWidth - htmlWidth) / 2;
-      var scrollbarOffset = scrollbarWidth / 2;
-      var isFF = /firefox/i.test(navigator.userAgent)
-      if (!isFF) {
-        html.style.setProperty('--scrollbar-offset', `${scrollbarOffset}px`);
-        html.style.setProperty('--scrollbar-offset-negative', `-${scrollbarOffset}px`);
-      }
-    } catch (error) {}
-  </script>
-
   {% include "scripts.html" %}
   <link rel="apple-touch-icon" sizes="180x180" href="{{ staticCDNHost }}/static/apple-touch-icon.png">
   <link rel="icon" type="image/png" sizes="32x32" href="{{ staticCDNHost }}/static/favicon-32x32.png">

diff --git a/package.json b/package.json
@@ -194,6 +194,7 @@
     "react-native-web": "~0.19.11",
     "react-native-web-webview": "^1.0.2",
     "react-native-webview": "13.10.2",
+    "react-remove-scroll": "^2.6.0",
     "react-responsive": "^9.0.2",
     "react-textarea-autosize": "^8.5.3",
     "rn-fetch-blob": "^0.12.0",

diff --git a/src/components/Dialog/index.web.tsx b/src/components/Dialog/index.web.tsx
@@ -12,6 +12,7 @@ import {useLingui} from '@lingui/react'
 import {DismissableLayer} from '@radix-ui/react-dismissable-layer'
 import {useFocusGuards} from '@radix-ui/react-focus-guards'
 import {FocusScope} from '@radix-ui/react-focus-scope'
+import {RemoveScroll} from 'react-remove-scroll'
 
 import {logger} from '#/logger'
 import {useDialogStateControlContext} from '#/state/dialogs'
@@ -103,34 +104,36 @@ export function Outer({
       {isOpen && (
         <Portal>
           <Context.Provider value={context}>
-            <TouchableWithoutFeedback
-              accessibilityHint={undefined}
-              accessibilityLabel={_(msg`Close active dialog`)}
-              onPress={handleBackgroundPress}>
-              <View
-                style={[
-                  web(a.fixed),
-                  a.inset_0,
-                  a.z_10,
-                  a.align_center,
-                  gtMobile ? a.p_lg : a.p_md,
-                  {overflowY: 'auto'},
-                ]}>
-                <Backdrop />
+            <RemoveScroll>
+              <TouchableWithoutFeedback
+                accessibilityHint={undefined}
+                accessibilityLabel={_(msg`Close active dialog`)}
+                onPress={handleBackgroundPress}>
                 <View
                   style={[
-                    a.w_full,
-                    a.z_20,
-                    a.justify_center,
+                    web(a.fixed),
+                    a.inset_0,
+                    a.z_10,
                     a.align_center,
-                    {
-                      minHeight: web('calc(90vh - 36px)') || undefined,
-                    },
+                    gtMobile ? a.p_lg : a.p_md,
+                    {overflowY: 'auto'},
                   ]}>
-                  {children}
+                  <Backdrop />
+                  <View
+                    style={[
+                      a.w_full,
+                      a.z_20,
+                      a.justify_center,
+                      a.align_center,
+                      {
+                        minHeight: web('calc(90vh - 36px)') || undefined,
+                      },
+                    ]}>
+                    {children}
+                  </View>
                 </View>
-              </View>
-            </TouchableWithoutFeedback>
+              </TouchableWithoutFeedback>
+            </RemoveScroll>
           </Context.Provider>
         </Portal>
       )}

diff --git a/src/components/Layout/Header/index.tsx b/src/components/Layout/Header/index.tsx
@@ -13,6 +13,7 @@ import {
   useBreakpoints,
   useGutterStyles,
   useTheme,
+  web,
 } from '#/alf'
 import {Button, ButtonIcon} from '#/components/Button'
 import {ArrowLeft_Stroke2_Corner0_Rounded as ArrowLeft} from '#/components/icons/Arrow'
@@ -39,6 +40,14 @@ export function Outer({children}: {children: React.ReactNode}) {
         a.py_sm,
         t.atoms.border_contrast_low,
         gtMobile && [a.mx_auto, {maxWidth: 600}],
+        web({
+          transform: [
+            {
+              translateX:
+                'calc(-1 * var(--removed-body-scroll-bar-size, 0px) / 2)',
+            },
+          ],
+        }),
       ]}>
       {children}
     </View>

diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx
@@ -142,6 +142,10 @@ export const WebCenterBorders = React.forwardRef(function LayoutContent() {
             {
               translateX: '-50%',
             },
+            {
+              translateX:
+                'calc(-1 * var(--removed-body-scroll-bar-size, 0px) / 2)',
+            },
           ],
         }),
       ]}
@@ -165,6 +169,14 @@ export const Center = React.forwardRef(function LayoutContent(
           maxWidth: 600,
         },
         style,
+        web({
+          transform: [
+            {
+              translateX:
+                'calc(-1 * var(--removed-body-scroll-bar-size, 0px) / 2)',
+            },
+          ],
+        }),
       ]}
       {...props}>
       {children}

diff --git a/src/lib/hooks/useWebBodyScrollLock.ts b/src/lib/hooks/useWebBodyScrollLock.ts
diff --git a/src/view/com/lightbox/Lightbox.web.tsx b/src/view/com/lightbox/Lightbox.web.tsx
@@ -15,8 +15,8 @@ import {
 } from '@fortawesome/react-native-fontawesome'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
+import {RemoveScroll} from 'react-remove-scroll'
 
-import {useWebBodyScrollLock} from '#/lib/hooks/useWebBodyScrollLock'
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {colors, s} from '#/lib/styles'
 import {useLightbox, useLightboxControls} from '#/state/lightbox'
@@ -28,7 +28,6 @@ export function Lightbox() {
   const {activeLightbox} = useLightbox()
   const {closeLightbox} = useLightboxControls()
   const isActive = !!activeLightbox
-  useWebBodyScrollLock(isActive)
 
   if (!isActive) {
     return null
@@ -37,11 +36,13 @@ export function Lightbox() {
   const initialIndex = activeLightbox.index
   const imgs = activeLightbox.images
   return (
-    <LightboxInner
-      imgs={imgs}
-      initialIndex={initialIndex}
-      onClose={closeLightbox}
-    />
+    <RemoveScroll>
+      <LightboxInner
+        imgs={imgs}
+        initialIndex={initialIndex}
+        onClose={closeLightbox}
+      />
+    </RemoveScroll>
   )
 }
 

diff --git a/src/view/com/modals/Modal.web.tsx b/src/view/com/modals/Modal.web.tsx
@@ -1,8 +1,8 @@
 import {StyleSheet, TouchableWithoutFeedback, View} from 'react-native'
 import Animated, {FadeIn, FadeOut} from 'react-native-reanimated'
+import {RemoveScroll} from 'react-remove-scroll'
 
 import {usePalette} from '#/lib/hooks/usePalette'
-import {useWebBodyScrollLock} from '#/lib/hooks/useWebBodyScrollLock'
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import type {Modal as ModalIface} from '#/state/modals'
 import {useModalControls, useModals} from '#/state/modals'
@@ -22,18 +22,17 @@ import * as VerifyEmailModal from './VerifyEmail'
 
 export function ModalsContainer() {
   const {isModalActive, activeModals} = useModals()
-  useWebBodyScrollLock(isModalActive)
 
   if (!isModalActive) {
     return null
   }
 
   return (
-    <>
+    <RemoveScroll>
       {activeModals.map((modal, i) => (
         <Modal key={`modal-${i}`} modal={modal} />
       ))}
-    </>
+    </RemoveScroll>
   )
 }
 

diff --git a/src/view/shell/Composer.web.tsx b/src/view/shell/Composer.web.tsx
@@ -3,8 +3,8 @@ import {StyleSheet, View} from 'react-native'
 import {DismissableLayer} from '@radix-ui/react-dismissable-layer'
 import {useFocusGuards} from '@radix-ui/react-focus-guards'
 import {FocusScope} from '@radix-ui/react-focus-scope'
+import {RemoveScroll} from 'react-remove-scroll'
 
-import {useWebBodyScrollLock} from '#/lib/hooks/useWebBodyScrollLock'
 import {useModals} from '#/state/modals'
 import {ComposerOpts, useComposerState} from '#/state/shell/composer'
 import {
@@ -20,16 +20,18 @@ export function Composer({}: {winHeight: number}) {
   const state = useComposerState()
   const isActive = !!state
 
-  useWebBodyScrollLock(isActive)
-
   // rendering
   // =
 
   if (!isActive) {
     return <View />
   }
 
-  return <Inner state={state} />
+  return (
+    <RemoveScroll>
+      <Inner state={state} />
+    </RemoveScroll>
+  )
 }
 
 function Inner({state}: {state: ComposerOpts}) {

diff --git a/src/view/shell/desktop/LeftNav.tsx b/src/view/shell/desktop/LeftNav.tsx
@@ -180,12 +180,14 @@ function NavItem({count, href, icon, iconFilled, label}: NavItemProps) {
             accessibilityLabel={_(msg`${count} unread items`)}
             accessibilityHint=""
             accessible={true}
+            numberOfLines={1}
             style={[
               a.absolute,
               a.text_xs,
               a.font_bold,
               a.rounded_full,
               a.text_center,
+              a.leading_tight,
               {
                 top: '-10%',
                 left: count.length === 1 ? '50%' : '40%',
@@ -322,9 +324,9 @@ export function DesktopLeftNav() {
     <View
       role="navigation"
       style={[
+        a.px_xl,
         styles.leftNav,
         isTablet && styles.leftNavTablet,
-        pal.view,
         pal.border,
       ]}>
       {hasSession ? (
@@ -479,8 +481,20 @@ const styles = StyleSheet.create({
     position: 'fixed',
     top: 10,
     // @ts-ignore web only
-    left: 'calc(50vw - 300px - 220px - 20px)',
-    width: 220,
+    left: '50%',
+    transform: [
+      {
+        translateX: -300,
+      },
+      {
+        translateX: '-100%',
+      },
+      {
+        // @ts-ignore web only -esb
+        translateX: 'calc(-1 * var(--removed-body-scroll-bar-size, 0px) / 2)',
+      },
+    ],
+    width: 240,
     // @ts-ignore web only
     maxHeight: 'calc(100vh - 10px)',
     overflowY: 'auto',
@@ -492,7 +506,10 @@ const styles = StyleSheet.create({
     borderRightWidth: 1,
     height: '100%',
     width: 76,
+    paddingLeft: 0,
+    paddingRight: 0,
     alignItems: 'center',
+    transform: [],
   },
 
   profileCard: {

diff --git a/src/view/shell/desktop/RightNav.tsx b/src/view/shell/desktop/RightNav.tsx
@@ -28,7 +28,7 @@ export function DesktopRightNav({routeName}: {routeName: string}) {
   }
 
   return (
-    <View style={[styles.rightNav, pal.view]}>
+    <View style={[a.px_xl, styles.rightNav]}>
       <View style={{paddingVertical: 20}}>
         {routeName === 'Search' ? (
           <View style={{marginBottom: 18}}>
@@ -122,8 +122,16 @@ const styles = StyleSheet.create({
     // @ts-ignore web only
     position: 'fixed',
     // @ts-ignore web only
-    left: 'calc(50vw + 300px + 20px)',
-    width: 300,
+    left: '50%',
+    transform: [
+      {
+        translateX: 300,
+      },
+      {
+        // @ts-ignore web only -esb
+        translateX: 'calc(-1 * var(--removed-body-scroll-bar-size, 0px) / 2)',
+      },
+    ],
     maxHeight: '100%',
     overflowY: 'auto',
   },