about summary refs log tree commit diff
diff options
context:
space:
mode:
-rw-r--r--bskyweb/templates/base.html3
-rw-r--r--src/view/com/pager/FeedsTabBar.web.tsx4
-rw-r--r--src/view/com/util/Views.web.tsx20
-rw-r--r--web/index.html3
4 files changed, 18 insertions, 12 deletions
diff --git a/bskyweb/templates/base.html b/bskyweb/templates/base.html
index 8cb0bcd4f..7eeb7e4cc 100644
--- a/bskyweb/templates/base.html
+++ b/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 {
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',
-  },
 })
diff --git a/web/index.html b/web/index.html
index e8f4eb47e..1a9d63b83 100644
--- a/web/index.html
+++ b/web/index.html
@@ -95,6 +95,9 @@
       *[data-word-wrap] {
         word-break: break-word;
       }
+      *[data-stable-gutters] {
+        scrollbar-gutter: stable both-edges;
+      }
 
       /* ProseMirror */
       .ProseMirror {