diff --git a/bskyweb/templates/base.html b/bskyweb/templates/base.html
index 8cb0bcd4..7eeb7e4c 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 6e94ab60..48a6ed3a 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 bbd9ce04..891d3f2e 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 (
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 e8f4eb47..1a9d63b8 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 {