diff options
| author | Paul Frazee <pfrazee@gmail.com> | 2023-09-07 09:32:14 -0700 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2023-09-07 09:32:14 -0700 |
| commit | 2963fb4c6dec398a0c39c35e717e175de986622f (patch) | |
| tree | e9c24733fd00fd75a40d2bd24eaf58efddd14a46 | |
| parent | 138e6d9b9769e33cfe75f9c8dd697d65e7037fb2 (diff) | |
| download | voidsky-2963fb4c6dec398a0c39c35e717e175de986622f.tar.zst | |
Fix scrollbar gutters on web (#1401)
* Fix scrollbar gutters on web * Fix typecheck
| -rw-r--r-- | bskyweb/templates/base.html | 3 | ||||
| -rw-r--r-- | src/view/com/pager/FeedsTabBar.web.tsx | 4 | ||||
| -rw-r--r-- | src/view/com/util/Views.web.tsx | 20 | ||||
| -rw-r--r-- | web/index.html | 3 |
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 { |