Fix scrollbar gutters on web (#1401)

* Fix scrollbar gutters on web

* Fix typecheck

2 files changed, 12 insertions, 12 deletions

diff --git a/src/view/com/pager/FeedsTabBar.web.tsx b/src/view/com/pager/FeedsTabBar.web.tsx
index 6e94ab60e..48a6ed3a9 100644
--- a/src/view/com/pager/FeedsTabBar.web.tsx
+++ b/src/view/com/pager/FeedsTabBar.web.tsx
@@ -73,8 +73,4 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
   },
-  tabBarAvi: {
-    marginTop: 1,
-    marginRight: 18,
-  },
 })
diff --git a/src/view/com/util/Views.web.tsx b/src/view/com/util/Views.web.tsx
index bbd9ce04a..891d3f2ee 100644
--- a/src/view/com/util/Views.web.tsx
+++ b/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(
-        contentContainerStyle,
-        styles.stableGutters,
-      )
+      // NOTE
+      // react native web produces *three* wrapping divs
+      // 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',
-  },
 })