From ce349c87bed66102be41497071b26fbb7cf9933b Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Wed, 25 Sep 2024 11:15:34 -0500
Subject: [PATCH] Couple tweaks

---
 src/view/screens/Search/Search.tsx | 32 ++++++++++--------------------
 1 file changed, 10 insertions(+), 22 deletions(-)

diff --git a/src/view/screens/Search/Search.tsx b/src/view/screens/Search/Search.tsx
index 0c40270960..abd1f13349 100644
--- a/src/view/screens/Search/Search.tsx
+++ b/src/view/screens/Search/Search.tsx
@@ -70,8 +70,6 @@ import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu'
 import {SettingsGear2_Stroke2_Corner0_Rounded as Gear} from '#/components/icons/SettingsGear2'
 import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
 
-const HEADER_HEIGHT = 56
-
 function Loader() {
   const pal = usePalette('default')
   const {isMobile} = useWebMediaQueries()
@@ -420,12 +418,12 @@ function useQueryManager({initialQuery}: {initialQuery: string}) {
     return parseSearchQuery(initialQuery || '')
   }, [initialQuery])
   const prevInitialQuery = React.useRef(initialQuery)
-
   const [lang, setLang] = React.useState(
     initialParams.lang || contentLanguages[0],
   )
 
   if (initialQuery !== prevInitialQuery.current) {
+    // handle new queryParam change (from manual search entry)
     prevInitialQuery.current = initialQuery
     setLang(initialParams.lang || contentLanguages[0])
   }
@@ -531,7 +529,10 @@ let SearchScreenInner = ({
           style={[
             pal.border,
             pal.view,
-            styles.tabBarContainer,
+            web({
+              position: isWeb ? 'sticky' : '',
+              zIndex: 1,
+            }),
             {top: isWeb ? headerHeight : undefined},
           ]}>
           <TabBar items={sections.map(section => section.title)} {...props} />
@@ -621,7 +622,11 @@ export function SearchScreen(
   })
   const showFiltersButton = Boolean(query && !showAutocomplete)
   const [showFilters, setShowFilters] = React.useState(false)
-  const headerHeight = HEADER_HEIGHT + (showFilters ? 40 : 0)
+  /*
+   * Arbitrary sizing, so guess and check, used for sticky header alignment and
+   * sizing.
+   */
+  const headerHeight = 56 + (showFilters ? 40 : 0)
 
   useFocusEffect(
     useNonReactiveCallback(() => {
@@ -1226,18 +1231,6 @@ function scrollToTopWeb() {
 }
 
 const styles = StyleSheet.create({
-  header: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: 12,
-    paddingLeft: 13,
-    paddingVertical: 4,
-    height: isWeb ? HEADER_HEIGHT : undefined,
-    // @ts-ignore web only
-    position: isWeb ? 'sticky' : '',
-    top: 0,
-    zIndex: 1,
-  },
   headerMenuBtn: {
     width: 30,
     height: 30,
@@ -1269,11 +1262,6 @@ const styles = StyleSheet.create({
     zIndex: -1,
     elevation: -1, // For Android
   },
-  tabBarContainer: {
-    // @ts-ignore web only
-    position: isWeb ? 'sticky' : '',
-    zIndex: 1,
-  },
   searchHistoryContainer: {
     width: '100%',
     paddingHorizontal: 12,