From 264265eff7b8c6f2ce91152c14a08fe7f9a0eea8 Mon Sep 17 00:00:00 2001
From: 289Adam289 <adam.szwaja@swmansion.com>
Date: Wed, 19 Feb 2025 15:36:19 +0100
Subject: [PATCH 1/3] fix blank area and status bar

---
 .../SearchPageHeader/SearchPageHeader.tsx     |  4 +++-
 src/pages/Search/SearchPageNarrow.tsx         | 22 +++++++++++--------
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/components/Search/SearchPageHeader/SearchPageHeader.tsx b/src/components/Search/SearchPageHeader/SearchPageHeader.tsx
index f79717930266..cef3d9a8301a 100644
--- a/src/components/Search/SearchPageHeader/SearchPageHeader.tsx
+++ b/src/components/Search/SearchPageHeader/SearchPageHeader.tsx
@@ -323,7 +323,7 @@ function SearchPageHeader({queryJSON, searchName, searchRouterListVisible, hideS
     }, [allCards, currencyList, hideProductTrainingTooltip, personalDetails, policyCategories, policyTagsLists, queryJSON, reports, taxRates]);
 
     const InputRightComponent = useMemo(() => {
-        return headerButtonsOptions.length > 0 ? (
+        return headerButtonsOptions.length > 0 && (!shouldUseNarrowLayout || selectionMode?.isEnabled) ? (
             <ButtonWithDropdownMenu
                 onPress={() => null}
                 shouldAlwaysShowDropdownMenu
@@ -363,6 +363,8 @@ function SearchPageHeader({queryJSON, searchName, searchRouterListVisible, hideS
         styles.productTrainingTooltipWrapper,
         styles.searchAutocompleteInputResults,
         translate,
+        selectionMode,
+        shouldUseNarrowLayout,
     ]);
 
     if (shouldUseNarrowLayout && selectionMode?.isEnabled) {
diff --git a/src/pages/Search/SearchPageNarrow.tsx b/src/pages/Search/SearchPageNarrow.tsx
index 917b6daa5e32..07d65ea88676 100644
--- a/src/pages/Search/SearchPageNarrow.tsx
+++ b/src/pages/Search/SearchPageNarrow.tsx
@@ -137,7 +137,9 @@ function SearchPageNarrow({queryJSON, policyID, searchName}: SearchPageBottomTab
                             />
                         </View>
                         <View style={[styles.flex1]}>
-                            <Animated.View style={[topBarAnimatedStyle, !searchRouterListVisible && styles.narrowSearchRouterInactiveStyle, styles.narrowSearchHeaderStyle]}>
+                            <Animated.View
+                                style={[topBarAnimatedStyle, !searchRouterListVisible && styles.narrowSearchRouterInactiveStyle, styles.narrowSearchHeaderStyle, styles.bgTransparent]}
+                            >
                                 <SearchPageHeader
                                     queryJSON={queryJSON}
                                     searchRouterListVisible={searchRouterListVisible}
@@ -149,14 +151,16 @@ function SearchPageNarrow({queryJSON, policyID, searchName}: SearchPageBottomTab
                                         setSearchRouterListVisible(true);
                                     }}
                                 />
-                                {!searchRouterListVisible && (
-                                    <SearchStatusBar
-                                        queryJSON={queryJSON}
-                                        onStatusChange={() => {
-                                            topBarOffset.set(withTiming(StyleUtils.searchHeaderDefaultOffset, {duration: ANIMATION_DURATION_IN_MS}));
-                                        }}
-                                    />
-                                )}
+                                <View style={[styles.appBG]}>
+                                    {!searchRouterListVisible && (
+                                        <SearchStatusBar
+                                            queryJSON={queryJSON}
+                                            onStatusChange={() => {
+                                                topBarOffset.set(withTiming(StyleUtils.searchHeaderDefaultOffset, {duration: ANIMATION_DURATION_IN_MS}));
+                                            }}
+                                        />
+                                    )}
+                                </View>
                             </Animated.View>
                         </View>
                     </View>

From 92407fb78be894e4f5b6931cc232eb6f05ba9488 Mon Sep 17 00:00:00 2001
From: 289Adam289 <adam.szwaja@swmansion.com>
Date: Wed, 19 Feb 2025 16:38:38 +0100
Subject: [PATCH 2/3] fix transparent background

---
 src/pages/Search/SearchPageNarrow.tsx | 24 +++++++++++++-----------
 src/styles/index.ts                   |  1 -
 2 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/pages/Search/SearchPageNarrow.tsx b/src/pages/Search/SearchPageNarrow.tsx
index 07d65ea88676..e97c355f2755 100644
--- a/src/pages/Search/SearchPageNarrow.tsx
+++ b/src/pages/Search/SearchPageNarrow.tsx
@@ -140,17 +140,19 @@ function SearchPageNarrow({queryJSON, policyID, searchName}: SearchPageBottomTab
                             <Animated.View
                                 style={[topBarAnimatedStyle, !searchRouterListVisible && styles.narrowSearchRouterInactiveStyle, styles.narrowSearchHeaderStyle, styles.bgTransparent]}
                             >
-                                <SearchPageHeader
-                                    queryJSON={queryJSON}
-                                    searchRouterListVisible={searchRouterListVisible}
-                                    hideSearchRouterList={() => {
-                                        setSearchRouterListVisible(false);
-                                    }}
-                                    onSearchRouterFocus={() => {
-                                        topBarOffset.set(StyleUtils.searchHeaderDefaultOffset);
-                                        setSearchRouterListVisible(true);
-                                    }}
-                                />
+                                <View style={[{paddingTop: 1}, styles.appBG]}>
+                                    <SearchPageHeader
+                                        queryJSON={queryJSON}
+                                        searchRouterListVisible={searchRouterListVisible}
+                                        hideSearchRouterList={() => {
+                                            setSearchRouterListVisible(false);
+                                        }}
+                                        onSearchRouterFocus={() => {
+                                            topBarOffset.set(StyleUtils.searchHeaderDefaultOffset);
+                                            setSearchRouterListVisible(true);
+                                        }}
+                                    />
+                                </View>
                                 <View style={[styles.appBG]}>
                                     {!searchRouterListVisible && (
                                         <SearchStatusBar
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 5661e0eb40e4..9081430877a4 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -3767,7 +3767,6 @@ const styles = (theme: ThemeColors) =>
         },
 
         narrowSearchHeaderStyle: {
-            paddingTop: 1,
             flex: 1,
         },
 

From cb8aad4c60c2924a77090df83c01365eca7e2714 Mon Sep 17 00:00:00 2001
From: 289Adam289 <adam.szwaja@swmansion.com>
Date: Wed, 19 Feb 2025 18:49:40 +0100
Subject: [PATCH 3/3] fix styles

---
 src/pages/Search/SearchPageNarrow.tsx | 6 ++----
 src/styles/index.ts                   | 3 ++-
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/pages/Search/SearchPageNarrow.tsx b/src/pages/Search/SearchPageNarrow.tsx
index ac1b89a6d8cb..6e207808de04 100644
--- a/src/pages/Search/SearchPageNarrow.tsx
+++ b/src/pages/Search/SearchPageNarrow.tsx
@@ -138,10 +138,8 @@ function SearchPageNarrow({queryJSON, policyID, searchName, shouldGroupByReports
                             />
                         </View>
                         <View style={[styles.flex1]}>
-                            <Animated.View
-                                style={[topBarAnimatedStyle, !searchRouterListVisible && styles.narrowSearchRouterInactiveStyle, styles.narrowSearchHeaderStyle, styles.bgTransparent]}
-                            >
-                                <View style={[{paddingTop: 1}, styles.appBG]}>
+                            <Animated.View style={[topBarAnimatedStyle, !searchRouterListVisible && styles.narrowSearchRouterInactiveStyle, styles.flex1, styles.bgTransparent]}>
+                                <View style={[styles.narrowSearchHeaderStyle]}>
                                     <SearchPageHeader
                                         queryJSON={queryJSON}
                                         searchRouterListVisible={searchRouterListVisible}
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 9081430877a4..927fd9252af0 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -3767,7 +3767,8 @@ const styles = (theme: ThemeColors) =>
         },
 
         narrowSearchHeaderStyle: {
-            flex: 1,
+            paddingTop: 1,
+            backgroundColor: theme.appBG,
         },
 
         narrowSearchRouterInactiveStyle: {