Fix more layout

This commit is contained in:
Dan Abramov
2023-12-08 02:03:54 +00:00
parent ccc287274e
commit a71f96a527
2 changed files with 26 additions and 2 deletions
+15 -1
View File
@@ -14,6 +14,7 @@ import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
import {useAnalytics} from 'lib/analytics/analytics'
import {NavigationProp} from 'lib/routes/types'
import {useSetDrawerOpen} from '#/state/shell'
import {isWeb} from '#/platform/detection'
const BACK_HITSLOP = {left: 20, top: 20, right: 50, bottom: 20}
@@ -47,7 +48,14 @@ export function SimpleViewHeader({
const Container = isMobile ? View : CenteredView
return (
<Container style={[styles.header, isMobile && styles.headerMobile, style]}>
<Container
style={[
styles.header,
isMobile && styles.headerMobile,
isWeb && styles.headerWeb,
pal.view,
style,
]}>
{showBackButton ? (
<TouchableOpacity
testID="viewHeaderDrawerBtn"
@@ -89,6 +97,12 @@ const styles = StyleSheet.create({
paddingHorizontal: 12,
paddingVertical: 10,
},
headerWeb: {
// @ts-ignore web-only
position: 'sticky',
top: 0,
zIndex: 1,
},
backBtn: {
width: 30,
height: 30,
+11 -1
View File
@@ -63,6 +63,7 @@ export const FlatList = React.forwardRef(function FlatListImpl<ItemT>(
onScroll,
ListHeaderComponent,
ListFooterComponent,
desktopFixedHeight,
...props
}: React.PropsWithChildren<FlatListProps<ItemT> & AddedProps>,
ref: React.Ref<Animated.FlatList<ItemT>>,
@@ -161,7 +162,12 @@ export const FlatList = React.forwardRef(function FlatListImpl<ItemT>(
return (
<Animated.ScrollView {...props} style={style} ref={nativeRef}>
<View
style={[styles.contentContainer, contentContainerStyle, pal.border]}>
style={[
styles.contentContainer,
contentContainerStyle,
desktopFixedHeight ? styles.minHeightViewport : null,
pal.border,
]}>
{header}
{(data as Array<ItemT>).map((item, index) => (
<Row<ItemT>
@@ -287,4 +293,8 @@ const styles = StyleSheet.create({
// @ts-ignore web
contentVisibility: 'auto',
},
minHeightViewport: {
// @ts-ignore web only
minHeight: '100vh',
},
})