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