[Layout] Base

bskyweb/templates/base.html

@@ -40,7 +40,6 @@
     }
     html {
       background-color: white;
-      scrollbar-gutter: stable both-edges;
     }
     @media (prefers-color-scheme: dark) {
       html {
@@ -76,9 +75,15 @@
       top: 50%;
       transform: translateX(-50%) translateY(-50%) translateY(-50px);
     }
-    /* We need this style to prevent web dropdowns from shifting the display when opening */
+    /**
+     * We need these styles to prevent shifting due to scrollbar show/hide on
+     * OSs that have them enabled by default. This also handles cases where the
+     * screen wouldn't otherwise scroll, and therefore hide the scrollbar and
+     * shift the content, by forcing the page to show a scrollbar.
+     */
     body {
       width: 100%;
+      overflow-y: scroll;
     }
   </style>
 

package.json

@@ -193,6 +193,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",

src/alf/atoms.ts

@@ -1,7 +1,8 @@
 import {Platform, StyleProp, StyleSheet, ViewStyle} from 'react-native'
 
 import * as tokens from '#/alf/tokens'
-import {ios, native, web} from '#/alf/util/platform'
+import {ios, native, platform, web} from '#/alf/util/platform'
+import * as Layout from '#/components/Layout'
 
 export const atoms = {
   debug: {
@@ -21,6 +22,9 @@ export const atoms = {
   relative: {
     position: 'relative',
   },
+  sticky: web({
+    position: 'sticky',
+  }),
   inset_0: {
     top: 0,
     left: 0,
@@ -941,4 +945,20 @@ export const atoms = {
     transitionTimingFunction: 'cubic-bezier(0.17, 0.73, 0.14, 1)',
     transitionDuration: '100ms',
   }),
+
+  /**
+   * {@link Layout.SCROLLBAR_OFFSET}
+   */
+  scrollbar_offset: platform({
+    web: {
+      transform: [
+        {
+          translateX: Layout.SCROLLBAR_OFFSET,
+        },
+      ],
+    },
+    native: {
+      transform: [],
+    },
+  }) as {transform: Exclude<ViewStyle['transform'], string | undefined>},
 } as const

src/alf/index.tsx

@@ -20,6 +20,7 @@
 export * from '#/alf/util/flatten'
 export * from '#/alf/util/platform'
 export * from '#/alf/util/themeSelector'
+export * from '#/alf/util/useGutterStyles'
 
 export type Alf = {
   themeName: ThemeName
@@ -74,7 +75,7 @@
   const setFontScaleAndPersist = React.useCallback<
     Alf['fonts']['setFontScale']
   >(
     fontScale => {
       setFontScale(fontScale)
       persistFontScale(fontScale)
       setFontScaleMultiplier(computeFontScaleMultiplier(fontScale))
@@ -87,7 +88,7 @@
   const setFontFamilyAndPersist = React.useCallback<
     Alf['fonts']['setFontFamily']
   >(
     fontFamily => {
       setFontFamily(fontFamily)
       persistFontFamily(fontFamily)
     },

src/alf/util/useGutterStyles.ts

@@ -0,0 +1,21 @@
+import React from 'react'
+
+import {atoms as a, useBreakpoints, ViewStyleProp} from '#/alf'
+
+export function useGutterStyles({
+  top,
+  bottom,
+}: {
+  top?: boolean
+  bottom?: boolean
+} = {}) {
+  const {gtMobile} = useBreakpoints()
+  return React.useMemo<ViewStyleProp['style']>(() => {
+    return [
+      a.px_lg,
+      top && a.pt_md,
+      bottom && a.pb_md,
+      gtMobile && [a.px_xl, top && a.pt_lg, bottom && a.pb_lg],
+    ]
+  }, [gtMobile, top, bottom])
+}

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