From fc53a7d760a59ee1732194cb6fa498c1fc221ef7 Mon Sep 17 00:00:00 2001
From: Gauvain <contact@uruk.dev>
Date: Tue, 16 Jun 2026 21:49:35 +0200
Subject: [PATCH] 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.
---
 .../(tabs)/(home)/settings/logs/page.tsx      | 118 +++++++++---------
 1 file changed, 60 insertions(+), 58 deletions(-)

diff --git a/app/(auth)/(tabs)/(home)/settings/logs/page.tsx b/app/(auth)/(tabs)/(home)/settings/logs/page.tsx
index 4ce5736c..f94c4279 100644
--- a/app/(auth)/(tabs)/(home)/settings/logs/page.tsx
+++ b/app/(auth)/(tabs)/(home)/settings/logs/page.tsx
@@ -88,8 +88,15 @@ export default function Page() {
   }, [share, loading]);
 
   return (
-    <View className='flex-1'>
-      <View className='flex flex-row justify-end py-2 px-4 space-x-2'>
+    <ScrollView
+      // 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
           id={orderFilterId}
           queryKey='log'
@@ -112,67 +119,62 @@ export default function Page() {
           multiple={true}
         />
       </View>
-      <ScrollView
-        className='pb-4 px-4'
-        contentContainerStyle={{ paddingBottom: insets.bottom }}
-      >
-        <View className='flex flex-col space-y-2'>
-          {filteredLogs?.map((log, index) => (
-            <View className='bg-neutral-900 rounded-xl p-3' key={index}>
-              <TouchableOpacity
-                disabled={!log.data}
-                onPress={() =>
-                  setState((v) => ({
-                    ...v,
-                    [log.timestamp]: !v[log.timestamp],
-                  }))
-                }
-              >
-                <View className='flex flex-row justify-between'>
-                  <Text
-                    className={`mb-1
+      <View className='flex flex-col space-y-2 px-4'>
+        {filteredLogs?.map((log, index) => (
+          <View className='bg-neutral-900 rounded-xl p-3' key={index}>
+            <TouchableOpacity
+              disabled={!log.data}
+              onPress={() =>
+                setState((v) => ({
+                  ...v,
+                  [log.timestamp]: !v[log.timestamp],
+                }))
+              }
+            >
+              <View className='flex flex-row justify-between'>
+                <Text
+                  className={`mb-1
                       ${log.level === "INFO" && "text-blue-500"}
                       ${log.level === "ERROR" && "text-red-500"}
                       ${log.level === "DEBUG" && "text-purple-500"}
                     `}
-                  >
-                    {log.level}
-                  </Text>
-
-                  <Text className='text-xs'>
-                    {new Date(log.timestamp).toLocaleString()}
-                  </Text>
-                </View>
-                <Text selectable className='text-xs'>
-                  {log.message}
+                >
+                  {log.level}
                 </Text>
-              </TouchableOpacity>
 
-              {log.data && (
-                <>
-                  {!state[log.timestamp] && (
-                    <Text className='text-xs mt-0.5'>
-                      {t("home.settings.logs.click_for_more_info")}
-                    </Text>
-                  )}
-                  <Collapsible collapsed={!state[log.timestamp]}>
-                    <View className='mt-2 flex flex-col space-y-2'>
-                      <ScrollView className='rounded-xl' style={codeBlockStyle}>
-                        <Text>{JSON.stringify(log.data, null, 2)}</Text>
-                      </ScrollView>
-                    </View>
-                  </Collapsible>
-                </>
-              )}
-            </View>
-          ))}
-          {filteredLogs?.length === 0 && (
-            <Text className='opacity-50'>
-              {t("home.settings.logs.no_logs_available")}
-            </Text>
-          )}
-        </View>
-      </ScrollView>
-    </View>
+                <Text className='text-xs'>
+                  {new Date(log.timestamp).toLocaleString()}
+                </Text>
+              </View>
+              <Text selectable className='text-xs'>
+                {log.message}
+              </Text>
+            </TouchableOpacity>
+
+            {log.data && (
+              <>
+                {!state[log.timestamp] && (
+                  <Text className='text-xs mt-0.5'>
+                    {t("home.settings.logs.click_for_more_info")}
+                  </Text>
+                )}
+                <Collapsible collapsed={!state[log.timestamp]}>
+                  <View className='mt-2 flex flex-col space-y-2'>
+                    <ScrollView className='rounded-xl' style={codeBlockStyle}>
+                      <Text>{JSON.stringify(log.data, null, 2)}</Text>
+                    </ScrollView>
+                  </View>
+                </Collapsible>
+              </>
+            )}
+          </View>
+        ))}
+        {filteredLogs?.length === 0 && (
+          <Text className='opacity-50'>
+            {t("home.settings.logs.no_logs_available")}
+          </Text>
+        )}
+      </View>
+    </ScrollView>
   );
 }