Fix scrollbar gutters on web (#1401)

* Fix scrollbar gutters on web

* Fix typecheck

bskyweb/templates/base.html

@@ -91,6 +91,9 @@
     *[data-word-wrap] {
       word-break: break-word;
     }
+    *[data-stable-gutters] {
+      scrollbar-gutter: stable both-edges;
+    }
 
     /* ProseMirror */
     .ProseMirror {

src/view/com/pager/FeedsTabBar.web.tsx

@@ -73,8 +73,4 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
   },
-  tabBarAvi: {
-    marginTop: 1,
-    marginRight: 18,
-  },
 })

src/view/com/util/Views.web.tsx

@@ -70,10 +70,18 @@ export const FlatList = React.forwardRef(function <ItemT>(
   if (desktopFixedHeight) {
     style = addStyle(style, styles.fixedHeight)
     if (!isMobile) {
-      contentContainerStyle = addStyle(
+      // NOTE
-        contentContainerStyle,
+      // react native web produces *three* wrapping divs
-        styles.stableGutters,
+      // the first two use the `style` prop and the innermost uses the
-      )
+      // `contentContainerStyle`. Unfortunately the stable-gutter style
+      // needs to be applied to only the "middle" of these. To hack
+      // around this, we set data-stable-gutters which can then be
+      // styled in our external CSS.
+      // -prf
+      // @ts-ignore web only -prf
+      props.dataSet = props.dataSet || {}
+      // @ts-ignore web only -prf
+      props.dataSet.stableGutters = '1'
     }
   }
   return (
@@ -137,8 +145,4 @@ const styles = StyleSheet.create({
     // @ts-ignore web only
     height: '100vh',
   },
-  stableGutters: {
-    // @ts-ignore web only -prf
-    scrollbarGutter: 'stable both-edges',
-  },
 })

web/index.html

@@ -95,6 +95,9 @@
       *[data-word-wrap] {
         word-break: break-word;
       }
+      *[data-stable-gutters] {
+        scrollbar-gutter: stable both-edges;
+      }
 
       /* ProseMirror */
       .ProseMirror {