fix(logs): keep the filter bar below the header on iOS

The logs page rendered its filter bar in a plain View with no top inset,
so under the transparent iOS header it sat behind the header and the
filter buttons weren't tappable. Use a root ScrollView with
contentInsetAdjustmentBehavior='automatic' (like the sibling settings
pages) and make the filter bar a sticky header, so iOS insets the content
below the header and the bar stays pinned while logs scroll.
This commit is contained in:
Gauvain
2026-06-16 21:49:35 +02:00
parent 3035a9019c
commit fc53a7d760

View File

@@ -88,8 +88,15 @@ export default function Page() {
}, [share, loading]); }, [share, loading]);
return ( return (
<View className='flex-1'> <ScrollView
<View className='flex flex-row justify-end py-2 px-4 space-x-2'> // Like the sibling settings pages, let iOS auto-inset the content below the
// transparent header (no manual header-height math). The filter bar is a
// sticky header so it stays pinned just under the header while logs scroll.
contentInsetAdjustmentBehavior='automatic'
stickyHeaderIndices={[0]}
contentContainerStyle={{ paddingBottom: insets.bottom }}
>
<View className='flex flex-row justify-end py-2 px-4 space-x-2 bg-black'>
<FilterButton <FilterButton
id={orderFilterId} id={orderFilterId}
queryKey='log' queryKey='log'
@@ -112,11 +119,7 @@ export default function Page() {
multiple={true} multiple={true}
/> />
</View> </View>
<ScrollView <View className='flex flex-col space-y-2 px-4'>
className='pb-4 px-4'
contentContainerStyle={{ paddingBottom: insets.bottom }}
>
<View className='flex flex-col space-y-2'>
{filteredLogs?.map((log, index) => ( {filteredLogs?.map((log, index) => (
<View className='bg-neutral-900 rounded-xl p-3' key={index}> <View className='bg-neutral-900 rounded-xl p-3' key={index}>
<TouchableOpacity <TouchableOpacity
@@ -173,6 +176,5 @@ export default function Page() {
)} )}
</View> </View>
</ScrollView> </ScrollView>
</View>
); );
} }