From 17501c8d1fb384337c16572676c4f389766787fe Mon Sep 17 00:00:00 2001
From: 289Adam289 <adam.szwaja@swmansion.com>
Date: Fri, 14 Mar 2025 13:02:25 +0100
Subject: [PATCH 1/9] align buttons search and help buttons

---
 src/components/HeaderWithBackButton/index.tsx       | 6 +++---
 src/components/Navigation/TopBar.tsx                | 6 +++---
 src/components/Search/SearchRouter/SearchRouter.tsx | 1 +
 src/components/SidePane/HelpButton.tsx              | 2 +-
 4 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/components/HeaderWithBackButton/index.tsx b/src/components/HeaderWithBackButton/index.tsx
index 68b59879d3dfd..85e590f0a04f0 100755
--- a/src/components/HeaderWithBackButton/index.tsx
+++ b/src/components/HeaderWithBackButton/index.tsx
@@ -148,7 +148,7 @@ function HeaderWithBackButton({
                 style,
             ]}
         >
-            <View style={[styles.dFlex, styles.flexRow, styles.alignItemsCenter, styles.flexGrow1, styles.justifyContentBetween, styles.overflowHidden]}>
+            <View style={[styles.dFlex, styles.flexRow, styles.alignItemsCenter, styles.flexGrow1, styles.justifyContentBetween, styles.overflowHidden, styles.mr3]}>
                 {shouldShowBackButton && (
                     <Tooltip text={translate('common.back')}>
                         <PressableWithoutFeedback
@@ -194,7 +194,7 @@ function HeaderWithBackButton({
                     />
                 )}
                 {middleContent}
-                <View style={[styles.reportOptions, styles.flexRow, styles.pr5, styles.alignItemsCenter]}>
+                <View style={[styles.reportOptions, styles.flexRow, styles.pr2, styles.alignItemsCenter]}>
                     {children}
                     {shouldShowDownloadButton &&
                         (!isDownloading ? (
@@ -259,7 +259,7 @@ function HeaderWithBackButton({
                     )}
                 </View>
                 {shouldDisplayHelpButton && <HelpButton />}
-                {shouldDisplaySearchRouter && <SearchButton style={styles.mr5} />}
+                {shouldDisplaySearchRouter && <SearchButton />}
             </View>
         </View>
     );
diff --git a/src/components/Navigation/TopBar.tsx b/src/components/Navigation/TopBar.tsx
index dd7e848f8fe12..f740bb385fd97 100644
--- a/src/components/Navigation/TopBar.tsx
+++ b/src/components/Navigation/TopBar.tsx
@@ -44,10 +44,10 @@ function TopBar({breadcrumbLabel, activeWorkspaceID, shouldDisplaySearch = true,
     return (
         <View style={[styles.w100, styles.zIndex10]}>
             <View
-                style={[styles.flexRow, styles.gap4, styles.mh5, styles.mv5, styles.alignItemsCenter, styles.justifyContentBetween]}
+                style={[styles.flexRow, styles.mh5, styles.mv5, styles.alignItemsCenter, styles.justifyContentBetween]}
                 dataSet={{dragArea: true}}
             >
-                <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
+                <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.pr2]}>
                     <WorkspaceSwitcherButton policy={policy} />
 
                     <View style={[styles.ml3, styles.flex1]}>
@@ -65,7 +65,7 @@ function TopBar({breadcrumbLabel, activeWorkspaceID, shouldDisplaySearch = true,
                 {!!cancelSearch && (
                     <PressableWithoutFeedback
                         accessibilityLabel={translate('common.cancel')}
-                        style={[styles.textBlue]}
+                        style={[styles.textBlue, styles.ph2]}
                         onPress={() => {
                             cancelSearch();
                         }}
diff --git a/src/components/Search/SearchRouter/SearchRouter.tsx b/src/components/Search/SearchRouter/SearchRouter.tsx
index 5281032967cfc..a1b0a6f942fc9 100644
--- a/src/components/Search/SearchRouter/SearchRouter.tsx
+++ b/src/components/Search/SearchRouter/SearchRouter.tsx
@@ -312,6 +312,7 @@ function SearchRouter({onRouterClose, shouldHideInputCaret}: SearchRouterProps,
                 <HeaderWithBackButton
                     title={translate('common.search')}
                     onBackButtonPress={() => onRouterClose()}
+                    shouldDisplayHelpButton={false}
                 />
             )}
             {isRecentSearchesDataLoaded && (
diff --git a/src/components/SidePane/HelpButton.tsx b/src/components/SidePane/HelpButton.tsx
index f436016540084..87fce5a15368a 100644
--- a/src/components/SidePane/HelpButton.tsx
+++ b/src/components/SidePane/HelpButton.tsx
@@ -30,7 +30,7 @@ function HelpButton({style}: HelpButtonProps) {
         <Tooltip text={translate('common.help')}>
             <PressableWithoutFeedback
                 accessibilityLabel={translate('common.help')}
-                style={[styles.flexRow, styles.touchableButtonImage, styles.mr2, style]}
+                style={[styles.flexRow, styles.touchableButtonImage, style]}
                 onPress={() => {
                     triggerSidePane({
                         isOpen: isExtraLargeScreenWidth ? !sidePane?.open : !sidePane?.openNarrowScreen,

From 81f88921a5e302461c0411c46c249ea3e4311d56 Mon Sep 17 00:00:00 2001
From: 289Adam289 <adam.szwaja@swmansion.com>
Date: Fri, 14 Mar 2025 13:02:59 +0100
Subject: [PATCH 2/9] remove redundant help button

---
 src/pages/home/sidebar/SignInButton.tsx                        | 2 +-
 src/pages/workspace/WorkspaceMoreFeaturesPage.tsx              | 1 +
 src/pages/workspace/WorkspacePageWithSections.tsx              | 1 +
 src/pages/workspace/accounting/PolicyAccountingPage.tsx        | 1 +
 src/pages/workspace/categories/WorkspaceCategoriesPage.tsx     | 1 +
 src/pages/workspace/distanceRates/PolicyDistanceRatesPage.tsx  | 1 +
 src/pages/workspace/perDiem/WorkspacePerDiemPage.tsx           | 1 +
 src/pages/workspace/reportFields/WorkspaceReportFieldsPage.tsx | 1 +
 src/pages/workspace/tags/WorkspaceTagsPage.tsx                 | 1 +
 src/pages/workspace/taxes/WorkspaceTaxesPage.tsx               | 1 +
 10 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/pages/home/sidebar/SignInButton.tsx b/src/pages/home/sidebar/SignInButton.tsx
index c55ee3ce7b39d..f0fed077818b2 100644
--- a/src/pages/home/sidebar/SignInButton.tsx
+++ b/src/pages/home/sidebar/SignInButton.tsx
@@ -17,7 +17,7 @@ function SignInButton() {
             role={CONST.ROLE.BUTTON}
             onPress={() => Session.signOutAndRedirectToSignIn()}
         >
-            <View style={styles.signInButtonAvatar}>
+            <View style={(styles.signInButtonAvatar, styles.ph2)}>
                 <Button
                     success
                     text={translate('common.signIn')}
diff --git a/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx b/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx
index 6cf2a73d3ece9..e5d2dfef19b53 100644
--- a/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx
+++ b/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx
@@ -453,6 +453,7 @@ function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPagePro
                     shouldUseHeadlineHeader
                     title={translate('workspace.common.moreFeatures')}
                     shouldShowBackButton={shouldUseNarrowLayout}
+                    shouldDisplayHelpButton={shouldUseNarrowLayout}
                 />
 
                 <ScrollView contentContainerStyle={safeAreaPaddingBottomStyle}>
diff --git a/src/pages/workspace/WorkspacePageWithSections.tsx b/src/pages/workspace/WorkspacePageWithSections.tsx
index 41d1370003496..9434579e166af 100644
--- a/src/pages/workspace/WorkspacePageWithSections.tsx
+++ b/src/pages/workspace/WorkspacePageWithSections.tsx
@@ -186,6 +186,7 @@ function WorkspacePageWithSections({
                     shouldShowThreeDotsButton={shouldShowThreeDotsButton}
                     threeDotsMenuItems={threeDotsMenuItems}
                     threeDotsAnchorPosition={threeDotsAnchorPosition}
+                    shouldDisplayHelpButton={shouldUseNarrowLayout}
                 >
                     {headerContent}
                 </HeaderWithBackButton>
diff --git a/src/pages/workspace/accounting/PolicyAccountingPage.tsx b/src/pages/workspace/accounting/PolicyAccountingPage.tsx
index a3384bd2bbd51..801db2a1116bf 100644
--- a/src/pages/workspace/accounting/PolicyAccountingPage.tsx
+++ b/src/pages/workspace/accounting/PolicyAccountingPage.tsx
@@ -570,6 +570,7 @@ function PolicyAccountingPage({policy}: PolicyAccountingPageProps) {
                     icon={Illustrations.Accounting}
                     shouldUseHeadlineHeader
                     threeDotsAnchorPosition={styles.threeDotsPopoverOffsetNoCloseButton(windowWidth)}
+                    shouldDisplayHelpButton={shouldUseNarrowLayout}
                 />
                 <ScrollView contentContainerStyle={styles.pt3}>
                     <View style={[styles.flex1, shouldUseNarrowLayout ? styles.workspaceSectionMobile : styles.workspaceSection]}>
diff --git a/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx b/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx
index d3dba477d95ce..be28083742ebb 100644
--- a/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx
+++ b/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx
@@ -422,6 +422,7 @@ function WorkspaceCategoriesPage({route}: WorkspaceCategoriesPageProps) {
                     style={styles.headerBarDesktopHeight}
                     threeDotsMenuItems={threeDotsMenuItems}
                     threeDotsAnchorPosition={styles.threeDotsPopoverOffsetNoCloseButton(windowWidth)}
+                    shouldDisplayHelpButton={shouldUseNarrowLayout}
                 >
                     {!shouldUseNarrowLayout && getHeaderButtons()}
                 </HeaderWithBackButton>
diff --git a/src/pages/workspace/distanceRates/PolicyDistanceRatesPage.tsx b/src/pages/workspace/distanceRates/PolicyDistanceRatesPage.tsx
index 313f4ebdc1152..97615c0a699d2 100644
--- a/src/pages/workspace/distanceRates/PolicyDistanceRatesPage.tsx
+++ b/src/pages/workspace/distanceRates/PolicyDistanceRatesPage.tsx
@@ -358,6 +358,7 @@ function PolicyDistanceRatesPage({
                         }
                         Navigation.goBack();
                     }}
+                    shouldDisplayHelpButton={shouldUseNarrowLayout}
                 >
                     {!shouldUseNarrowLayout && headerButtons}
                 </HeaderWithBackButton>
diff --git a/src/pages/workspace/perDiem/WorkspacePerDiemPage.tsx b/src/pages/workspace/perDiem/WorkspacePerDiemPage.tsx
index 5b5bf3a19ea4e..62274cf644a5f 100644
--- a/src/pages/workspace/perDiem/WorkspacePerDiemPage.tsx
+++ b/src/pages/workspace/perDiem/WorkspacePerDiemPage.tsx
@@ -386,6 +386,7 @@ function WorkspacePerDiemPage({route}: WorkspacePerDiemPageProps) {
                     shouldShowThreeDotsButton
                     threeDotsMenuItems={threeDotsMenuItems}
                     threeDotsAnchorPosition={styles.threeDotsPopoverOffsetNoCloseButton(windowWidth)}
+                    shouldDisplayHelpButton={shouldUseNarrowLayout}
                 >
                     {!shouldUseNarrowLayout && getHeaderButtons()}
                 </HeaderWithBackButton>
diff --git a/src/pages/workspace/reportFields/WorkspaceReportFieldsPage.tsx b/src/pages/workspace/reportFields/WorkspaceReportFieldsPage.tsx
index d2ef52d431ae5..820fa9b075bb7 100644
--- a/src/pages/workspace/reportFields/WorkspaceReportFieldsPage.tsx
+++ b/src/pages/workspace/reportFields/WorkspaceReportFieldsPage.tsx
@@ -257,6 +257,7 @@ function WorkspaceReportFieldsPage({
                         }
                         Navigation.goBack();
                     }}
+                    shouldDisplayHelpButton={shouldUseNarrowLayout}
                 >
                     {!shouldUseNarrowLayout && !hasAccountingConnections && getHeaderButtons()}
                 </HeaderWithBackButton>
diff --git a/src/pages/workspace/tags/WorkspaceTagsPage.tsx b/src/pages/workspace/tags/WorkspaceTagsPage.tsx
index 3931451217750..a7627c4084d7f 100644
--- a/src/pages/workspace/tags/WorkspaceTagsPage.tsx
+++ b/src/pages/workspace/tags/WorkspaceTagsPage.tsx
@@ -456,6 +456,7 @@ function WorkspaceTagsPage({route}: WorkspaceTagsPageProps) {
                     shouldShowThreeDotsButton={!policy?.hasMultipleTagLists}
                     threeDotsMenuItems={threeDotsMenuItems}
                     threeDotsAnchorPosition={styles.threeDotsPopoverOffsetNoCloseButton(windowWidth)}
+                    shouldDisplayHelpButton={shouldUseNarrowLayout}
                 >
                     {!shouldUseNarrowLayout && getHeaderButtons()}
                 </HeaderWithBackButton>
diff --git a/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx b/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx
index 0e41e3844e283..ebd56607fc187 100644
--- a/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx
+++ b/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx
@@ -357,6 +357,7 @@ function WorkspaceTaxesPage({
                         }
                         Navigation.goBack();
                     }}
+                    shouldDisplayHelpButton={shouldUseNarrowLayout}
                 >
                     {!shouldUseNarrowLayout && headerButtons}
                 </HeaderWithBackButton>

From 0681a752b4744b1daa4a02974297c515b67d8fbd Mon Sep 17 00:00:00 2001
From: Blazej Kustra <blazej.kustra@swmansion.com>
Date: Mon, 17 Mar 2025 11:23:56 +0100
Subject: [PATCH 3/9] TEMP: always show HelpButton

---
 src/components/SidePane/HelpButton.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/SidePane/HelpButton.tsx b/src/components/SidePane/HelpButton.tsx
index 3f45e31b0d773..b0f2935161c43 100644
--- a/src/components/SidePane/HelpButton.tsx
+++ b/src/components/SidePane/HelpButton.tsx
@@ -24,7 +24,7 @@ function HelpButton({style}: HelpButtonProps) {
     const {sidePane, shouldHideHelpButton} = useSidePane();
 
     if (shouldHideHelpButton) {
-        return null;
+        // return null;
     }
 
     return (

From a520097999874e78b87fceab783e3b40ef1d4c00 Mon Sep 17 00:00:00 2001
From: 289Adam289 <adam.szwaja@swmansion.com>
Date: Mon, 17 Mar 2025 11:39:48 +0100
Subject: [PATCH 4/9] fix changed lint

---
 src/pages/home/sidebar/SignInButton.tsx       |  6 ++--
 .../WorkspaceReportFieldsPage.tsx             | 36 +++++++++----------
 2 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/src/pages/home/sidebar/SignInButton.tsx b/src/pages/home/sidebar/SignInButton.tsx
index f0fed077818b2..228bc70fe08db 100644
--- a/src/pages/home/sidebar/SignInButton.tsx
+++ b/src/pages/home/sidebar/SignInButton.tsx
@@ -4,7 +4,7 @@ import Button from '@components/Button';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
-import * as Session from '@userActions/Session';
+import {signOutAndRedirectToSignIn} from '@userActions/Session';
 import CONST from '@src/CONST';
 
 function SignInButton() {
@@ -15,13 +15,13 @@ function SignInButton() {
         <PressableWithoutFeedback
             accessibilityLabel={translate('sidebarScreen.buttonMySettings')}
             role={CONST.ROLE.BUTTON}
-            onPress={() => Session.signOutAndRedirectToSignIn()}
+            onPress={() => signOutAndRedirectToSignIn()}
         >
             <View style={(styles.signInButtonAvatar, styles.ph2)}>
                 <Button
                     success
                     text={translate('common.signIn')}
-                    onPress={() => Session.signOutAndRedirectToSignIn()}
+                    onPress={() => signOutAndRedirectToSignIn()}
                 />
             </View>
         </PressableWithoutFeedback>
diff --git a/src/pages/workspace/reportFields/WorkspaceReportFieldsPage.tsx b/src/pages/workspace/reportFields/WorkspaceReportFieldsPage.tsx
index 820fa9b075bb7..5a32f315470c8 100644
--- a/src/pages/workspace/reportFields/WorkspaceReportFieldsPage.tsx
+++ b/src/pages/workspace/reportFields/WorkspaceReportFieldsPage.tsx
@@ -32,16 +32,16 @@ import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {isConnectionInProgress} from '@libs/actions/connections';
 import {turnOffMobileSelectionMode} from '@libs/actions/MobileSelectionMode';
-import * as DeviceCapabilities from '@libs/DeviceCapabilities';
+import {canUseTouchScreen} from '@libs/DeviceCapabilities';
 import localeCompare from '@libs/LocaleCompare';
 import Navigation from '@libs/Navigation/Navigation';
 import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
 import type {WorkspaceSplitNavigatorParamList} from '@libs/Navigation/types';
-import * as PolicyUtils from '@libs/PolicyUtils';
-import * as ReportUtils from '@libs/ReportUtils';
-import * as WorkspaceReportFieldUtils from '@libs/WorkspaceReportFieldUtils';
+import {getCurrentConnectionName, hasAccountingConnections, shouldShowSyncError} from '@libs/PolicyUtils';
+import {getReportFieldKey} from '@libs/ReportUtils';
+import {getReportFieldTypeTranslationKey} from '@libs/WorkspaceReportFieldUtils';
 import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
-import * as ReportField from '@userActions/Policy/ReportField';
+import {deleteReportFields, openPolicyReportFieldsPage} from '@userActions/Policy/ReportField';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
@@ -81,17 +81,17 @@ function WorkspaceReportFieldsPage({
     }, [policy]);
     const [selectedReportFields, setSelectedReportFields] = useState<PolicyReportField[]>([]);
     const [deleteReportFieldsConfirmModalVisible, setDeleteReportFieldsConfirmModalVisible] = useState(false);
-    const hasAccountingConnections = PolicyUtils.hasAccountingConnections(policy);
+    const hasReportAccountingConnections = hasAccountingConnections(policy);
     const [connectionSyncProgress] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CONNECTION_SYNC_PROGRESS}${policy?.id}`);
     const isSyncInProgress = isConnectionInProgress(connectionSyncProgress, policy);
-    const hasSyncError = PolicyUtils.shouldShowSyncError(policy, isSyncInProgress);
+    const hasSyncError = shouldShowSyncError(policy, isSyncInProgress);
     const isConnectedToAccounting = Object.keys(policy?.connections ?? {}).length > 0;
-    const currentConnectionName = PolicyUtils.getCurrentConnectionName(policy);
+    const currentConnectionName = getCurrentConnectionName(policy);
 
-    const canSelectMultiple = !hasAccountingConnections && (isSmallScreenWidth ? selectionMode?.isEnabled : true);
+    const canSelectMultiple = !hasReportAccountingConnections && (isSmallScreenWidth ? selectionMode?.isEnabled : true);
 
     const fetchReportFields = useCallback(() => {
-        ReportField.openPolicyReportFieldsPage(policyID);
+        openPolicyReportFieldsPage(policyID);
     }, [policyID]);
 
     const {isOffline} = useNetwork({onReconnect: fetchReportFields});
@@ -125,7 +125,7 @@ function WorkspaceReportFieldsPage({
                         isSelected: selectedReportFields.find((selectedReportField) => selectedReportField.name === reportField.name) !== undefined && canSelectMultiple,
                         isDisabled: reportField.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE,
                         text: reportField.name,
-                        rightElement: <ListItemRightCaretWithLabel labelText={Str.recapitalize(translate(WorkspaceReportFieldUtils.getReportFieldTypeTranslationKey(reportField.type)))} />,
+                        rightElement: <ListItemRightCaretWithLabel labelText={Str.recapitalize(translate(getReportFieldTypeTranslationKey(reportField.type)))} />,
                     })),
                 isDisabled: false,
             },
@@ -135,7 +135,7 @@ function WorkspaceReportFieldsPage({
     useAutoTurnSelectionModeOffWhenHasNoActiveOption(reportFieldsSections.at(0)?.data ?? ([] as ListItem[]));
 
     const updateSelectedReportFields = (item: ReportFieldForList) => {
-        const fieldKey = ReportUtils.getReportFieldKey(item.fieldID);
+        const fieldKey = getReportFieldKey(item.fieldID);
         const updatedReportFields = selectedReportFields.find((selectedReportField) => selectedReportField.name === item.value)
             ? selectedReportFields.filter((selectedReportField) => selectedReportField.name !== item.value)
             : [...selectedReportFields, filteredPolicyFieldList[fieldKey]];
@@ -153,9 +153,9 @@ function WorkspaceReportFieldsPage({
     };
 
     const handleDeleteReportFields = () => {
-        const reportFieldKeys = selectedReportFields.map((selectedReportField) => ReportUtils.getReportFieldKey(selectedReportField.fieldID));
+        const reportFieldKeys = selectedReportFields.map((selectedReportField) => getReportFieldKey(selectedReportField.fieldID));
         setSelectedReportFields([]);
-        ReportField.deleteReportFields(policyID, reportFieldKeys);
+        deleteReportFields(policyID, reportFieldKeys);
         setDeleteReportFieldsConfirmModalVisible(false);
     };
 
@@ -259,9 +259,9 @@ function WorkspaceReportFieldsPage({
                     }}
                     shouldDisplayHelpButton={shouldUseNarrowLayout}
                 >
-                    {!shouldUseNarrowLayout && !hasAccountingConnections && getHeaderButtons()}
+                    {!shouldUseNarrowLayout && !hasReportAccountingConnections && getHeaderButtons()}
                 </HeaderWithBackButton>
-                {shouldUseNarrowLayout && <View style={[styles.pl5, styles.pr5]}>{!hasAccountingConnections && getHeaderButtons()}</View>}
+                {shouldUseNarrowLayout && <View style={[styles.pl5, styles.pr5]}>{!hasReportAccountingConnections && getHeaderButtons()}</View>}
                 <ConfirmModal
                     isVisible={deleteReportFieldsConfirmModalVisible}
                     onConfirm={handleDeleteReportFields}
@@ -295,7 +295,7 @@ function WorkspaceReportFieldsPage({
                 {!shouldShowEmptyState && !isLoading && (
                     <SelectionListWithModal
                         canSelectMultiple={canSelectMultiple}
-                        turnOnSelectionModeOnLongPress={!hasAccountingConnections}
+                        turnOnSelectionModeOnLongPress={!hasReportAccountingConnections}
                         onTurnOnSelectionMode={(item) => item && updateSelectedReportFields(item)}
                         sections={reportFieldsSections}
                         onCheckboxPress={updateSelectedReportFields}
@@ -304,7 +304,7 @@ function WorkspaceReportFieldsPage({
                         ListItem={TableListItem}
                         customListHeader={getCustomListHeader()}
                         listHeaderContent={shouldUseNarrowLayout ? getHeaderText() : null}
-                        shouldPreventDefaultFocusOnSelectRow={!DeviceCapabilities.canUseTouchScreen()}
+                        shouldPreventDefaultFocusOnSelectRow={!canUseTouchScreen()}
                         listHeaderWrapperStyle={[styles.ph9, styles.pv3, styles.pb5]}
                         showScrollIndicator={false}
                     />

From 6df9a6526efbc19f69667e6fab6173167b5ee31c Mon Sep 17 00:00:00 2001
From: 289Adam289 <adam.szwaja@swmansion.com>
Date: Mon, 17 Mar 2025 14:05:55 +0100
Subject: [PATCH 5/9] fix padding and margin on HeaderView

---
 src/components/HeaderWithBackButton/index.tsx | 2 +-
 src/components/Navigation/TopBar.tsx          | 2 +-
 src/pages/home/HeaderView.tsx                 | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/HeaderWithBackButton/index.tsx b/src/components/HeaderWithBackButton/index.tsx
index 85e590f0a04f0..0927a1d4b4254 100755
--- a/src/components/HeaderWithBackButton/index.tsx
+++ b/src/components/HeaderWithBackButton/index.tsx
@@ -143,7 +143,7 @@ function HeaderWithBackButton({
                 // progressBarPercentage can be 0 which would
                 // be falsey, hence using !== undefined explicitly
                 progressBarPercentage !== undefined && styles.pl0,
-                shouldShowBackButton && [styles.pl2, styles.pr2],
+                shouldShowBackButton && [styles.pl2],
                 shouldOverlay && StyleSheet.absoluteFillObject,
                 style,
             ]}
diff --git a/src/components/Navigation/TopBar.tsx b/src/components/Navigation/TopBar.tsx
index f740bb385fd97..e4913efe2eb19 100644
--- a/src/components/Navigation/TopBar.tsx
+++ b/src/components/Navigation/TopBar.tsx
@@ -44,7 +44,7 @@ function TopBar({breadcrumbLabel, activeWorkspaceID, shouldDisplaySearch = true,
     return (
         <View style={[styles.w100, styles.zIndex10]}>
             <View
-                style={[styles.flexRow, styles.mh5, styles.mv5, styles.alignItemsCenter, styles.justifyContentBetween]}
+                style={[styles.flexRow, styles.ml5, styles.mr3, styles.mv5, styles.alignItemsCenter, styles.justifyContentBetween]}
                 dataSet={{dragArea: true}}
             >
                 <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.pr2]}>
diff --git a/src/pages/home/HeaderView.tsx b/src/pages/home/HeaderView.tsx
index faf0aeb2e9632..ec77fa771bf86 100644
--- a/src/pages/home/HeaderView.tsx
+++ b/src/pages/home/HeaderView.tsx
@@ -235,7 +235,7 @@ function HeaderView({report, parentReportAction, onNavigationMenuButtonClicked,
                 style={[styles.borderBottom]}
                 dataSet={{dragArea: true}}
             >
-                <View style={[styles.appContentHeader, !shouldUseNarrowLayout && styles.headerBarDesktopHeight]}>
+                <View style={[styles.appContentHeader, styles.pr3, !shouldUseNarrowLayout && styles.headerBarDesktopHeight]}>
                     {isLoading ? (
                         <ReportHeaderSkeletonView onBackButtonPress={onNavigationMenuButtonClicked} />
                     ) : (
@@ -354,7 +354,7 @@ function HeaderView({report, parentReportAction, onNavigationMenuButtonClicked,
                                     {!isParentReportLoading && canJoin && !shouldUseNarrowLayout && joinButton}
                                 </View>
                                 <HelpButton style={styles.ml2} />
-                                {shouldDisplaySearchRouter && <SearchButton style={styles.ml2} />}
+                                {shouldDisplaySearchRouter && <SearchButton />}
                             </View>
                             <ConfirmModal
                                 isVisible={isDeleteTaskConfirmModalVisible}

From 1fed0203f4ac071dd7faf1fa1df307cc8daa2a5e Mon Sep 17 00:00:00 2001
From: 289Adam289 <adam.szwaja@swmansion.com>
Date: Tue, 18 Mar 2025 15:39:47 +0100
Subject: [PATCH 6/9] fix double line header and rhm workspace lhn help button

---
 src/components/Header.tsx                     |  7 +-
 src/components/HeaderWithBackButton/index.tsx | 69 ++++++++++---------
 src/pages/workspace/WorkspaceInitialPage.tsx  |  3 +
 .../workspace/WorkspaceMoreFeaturesPage.tsx   |  1 -
 .../workspace/WorkspacePageWithSections.tsx   |  1 -
 .../accounting/PolicyAccountingPage.tsx       |  1 -
 .../categories/WorkspaceCategoriesPage.tsx    |  1 -
 .../distanceRates/PolicyDistanceRatesPage.tsx |  1 -
 .../perDiem/WorkspacePerDiemPage.tsx          |  1 -
 .../WorkspaceReportFieldsPage.tsx             |  1 -
 .../workspace/tags/WorkspaceTagsPage.tsx      |  1 -
 .../workspace/taxes/WorkspaceTaxesPage.tsx    |  1 -
 12 files changed, 44 insertions(+), 44 deletions(-)

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 25fcbccd8c9e0..cdd72d77b2b42 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -28,9 +28,12 @@ type HeaderProps = {
 
     /** The URL link associated with the attachment's subtitle, if available */
     subTitleLink?: string;
+
+    /** Line number for the title */
+    numberOfTitleLines?: number;
 };
 
-function Header({title = '', subtitle = '', textStyles = [], style, containerStyles = [], shouldShowEnvironmentBadge = false, subTitleLink = ''}: HeaderProps) {
+function Header({title = '', subtitle = '', textStyles = [], style, containerStyles = [], shouldShowEnvironmentBadge = false, subTitleLink = '', numberOfTitleLines = 2}: HeaderProps) {
     const styles = useThemeStyles();
     const renderedSubtitle = useMemo(
         () => (
@@ -72,7 +75,7 @@ function Header({title = '', subtitle = '', textStyles = [], style, containerSty
                 {typeof title === 'string'
                     ? !!title && (
                           <Text
-                              numberOfLines={2}
+                              numberOfLines={numberOfTitleLines}
                               style={[styles.headerText, styles.textLarge, textStyles]}
                           >
                               {title}
diff --git a/src/components/HeaderWithBackButton/index.tsx b/src/components/HeaderWithBackButton/index.tsx
index 0927a1d4b4254..605d2f6d3938b 100755
--- a/src/components/HeaderWithBackButton/index.tsx
+++ b/src/components/HeaderWithBackButton/index.tsx
@@ -108,6 +108,7 @@ function HeaderWithBackButton({
                 subtitle={stepCounter ? translate('stepCounter', stepCounter) : subtitle}
                 textStyles={[titleColor ? StyleUtils.getTextColorStyle(titleColor) : {}, shouldUseHeadlineHeader && styles.textHeadlineH2]}
                 subTitleLink={subTitleLink}
+                numberOfTitleLines={1}
             />
         );
     }, [
@@ -194,42 +195,44 @@ function HeaderWithBackButton({
                     />
                 )}
                 {middleContent}
-                <View style={[styles.reportOptions, styles.flexRow, styles.pr2, styles.alignItemsCenter]}>
-                    {children}
-                    {shouldShowDownloadButton &&
-                        (!isDownloading ? (
-                            <Tooltip text={translate('common.download')}>
-                                <PressableWithoutFeedback
-                                    onPress={(event) => {
-                                        // Blur the pressable in case this button triggers a Growl notification
-                                        // We do not want to overlap Growl with the Tooltip (#15271)
-                                        (event?.currentTarget as HTMLElement)?.blur();
+                <View style={[styles.reportOptions, styles.flexRow, styles.alignItemsCenter]}>
+                    <View style={[styles.pr2]}>
+                        {children}
+                        {shouldShowDownloadButton &&
+                            (!isDownloading ? (
+                                <Tooltip text={translate('common.download')}>
+                                    <PressableWithoutFeedback
+                                        onPress={(event) => {
+                                            // Blur the pressable in case this button triggers a Growl notification
+                                            // We do not want to overlap Growl with the Tooltip (#15271)
+                                            (event?.currentTarget as HTMLElement)?.blur();
 
-                                        if (!isDownloadButtonActive) {
-                                            return;
-                                        }
+                                            if (!isDownloadButtonActive) {
+                                                return;
+                                            }
 
-                                        onDownloadButtonPress();
-                                        temporarilyDisableDownloadButton();
-                                    }}
+                                            onDownloadButtonPress();
+                                            temporarilyDisableDownloadButton();
+                                        }}
+                                        style={[styles.touchableButtonImage]}
+                                        role="button"
+                                        accessibilityLabel={translate('common.download')}
+                                    >
+                                        <Icon
+                                            src={Expensicons.Download}
+                                            fill={iconFill ?? StyleUtils.getIconFillColor(getButtonState(false, false, !isDownloadButtonActive))}
+                                        />
+                                    </PressableWithoutFeedback>
+                                </Tooltip>
+                            ) : (
+                                <ActivityIndicator
                                     style={[styles.touchableButtonImage]}
-                                    role="button"
-                                    accessibilityLabel={translate('common.download')}
-                                >
-                                    <Icon
-                                        src={Expensicons.Download}
-                                        fill={iconFill ?? StyleUtils.getIconFillColor(getButtonState(false, false, !isDownloadButtonActive))}
-                                    />
-                                </PressableWithoutFeedback>
-                            </Tooltip>
-                        ) : (
-                            <ActivityIndicator
-                                style={[styles.touchableButtonImage]}
-                                size="small"
-                                color={theme.spinner}
-                            />
-                        ))}
-                    {shouldShowPinButton && !!report && <PinButton report={report} />}
+                                    size="small"
+                                    color={theme.spinner}
+                                />
+                            ))}
+                        {shouldShowPinButton && !!report && <PinButton report={report} />}
+                    </View>
                     {shouldShowThreeDotsButton && (
                         <ThreeDotsMenu
                             icon={threeDotsMenuIcon}
diff --git a/src/pages/workspace/WorkspaceInitialPage.tsx b/src/pages/workspace/WorkspaceInitialPage.tsx
index 50061827cb570..61694ced88abf 100644
--- a/src/pages/workspace/WorkspaceInitialPage.tsx
+++ b/src/pages/workspace/WorkspaceInitialPage.tsx
@@ -35,6 +35,7 @@ import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails'
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import usePrevious from '@hooks/usePrevious';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useSingleExecution from '@hooks/useSingleExecution';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWaitForNavigation from '@hooks/useWaitForNavigation';
@@ -114,6 +115,7 @@ function WorkspaceInitialPage({policyDraft, policy: policyProp, route}: Workspac
     const waitForNavigate = useWaitForNavigation();
     const {singleExecution, isExecuting} = useSingleExecution();
     const activeRoute = useNavigationState((state) => findFocusedRoute(state)?.name);
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
     const {translate} = useLocalize();
     const {isOffline} = useNetwork();
     const wasRendered = useRef(false);
@@ -444,6 +446,7 @@ function WorkspaceInitialPage({policyDraft, policy: policyProp, route}: Workspac
                     onBackButtonPress={() => Navigation.goBack(route.params?.backTo ?? ROUTES.SETTINGS_WORKSPACES.route)}
                     policyAvatar={policyAvatar}
                     style={styles.headerBarDesktopHeight}
+                    shouldDisplayHelpButton={shouldUseNarrowLayout}
                 />
 
                 <ScrollView contentContainerStyle={[styles.flexColumn]}>
diff --git a/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx b/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx
index 43a9478fea173..e156aac0c465f 100644
--- a/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx
+++ b/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx
@@ -453,7 +453,6 @@ function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPagePro
                     shouldUseHeadlineHeader
                     title={translate('workspace.common.moreFeatures')}
                     shouldShowBackButton={shouldUseNarrowLayout}
-                    shouldDisplayHelpButton={shouldUseNarrowLayout}
                 />
 
                 <ScrollView contentContainerStyle={safeAreaPaddingBottomStyle}>
diff --git a/src/pages/workspace/WorkspacePageWithSections.tsx b/src/pages/workspace/WorkspacePageWithSections.tsx
index 9434579e166af..41d1370003496 100644
--- a/src/pages/workspace/WorkspacePageWithSections.tsx
+++ b/src/pages/workspace/WorkspacePageWithSections.tsx
@@ -186,7 +186,6 @@ function WorkspacePageWithSections({
                     shouldShowThreeDotsButton={shouldShowThreeDotsButton}
                     threeDotsMenuItems={threeDotsMenuItems}
                     threeDotsAnchorPosition={threeDotsAnchorPosition}
-                    shouldDisplayHelpButton={shouldUseNarrowLayout}
                 >
                     {headerContent}
                 </HeaderWithBackButton>
diff --git a/src/pages/workspace/accounting/PolicyAccountingPage.tsx b/src/pages/workspace/accounting/PolicyAccountingPage.tsx
index 801db2a1116bf..a3384bd2bbd51 100644
--- a/src/pages/workspace/accounting/PolicyAccountingPage.tsx
+++ b/src/pages/workspace/accounting/PolicyAccountingPage.tsx
@@ -570,7 +570,6 @@ function PolicyAccountingPage({policy}: PolicyAccountingPageProps) {
                     icon={Illustrations.Accounting}
                     shouldUseHeadlineHeader
                     threeDotsAnchorPosition={styles.threeDotsPopoverOffsetNoCloseButton(windowWidth)}
-                    shouldDisplayHelpButton={shouldUseNarrowLayout}
                 />
                 <ScrollView contentContainerStyle={styles.pt3}>
                     <View style={[styles.flex1, shouldUseNarrowLayout ? styles.workspaceSectionMobile : styles.workspaceSection]}>
diff --git a/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx b/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx
index be28083742ebb..d3dba477d95ce 100644
--- a/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx
+++ b/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx
@@ -422,7 +422,6 @@ function WorkspaceCategoriesPage({route}: WorkspaceCategoriesPageProps) {
                     style={styles.headerBarDesktopHeight}
                     threeDotsMenuItems={threeDotsMenuItems}
                     threeDotsAnchorPosition={styles.threeDotsPopoverOffsetNoCloseButton(windowWidth)}
-                    shouldDisplayHelpButton={shouldUseNarrowLayout}
                 >
                     {!shouldUseNarrowLayout && getHeaderButtons()}
                 </HeaderWithBackButton>
diff --git a/src/pages/workspace/distanceRates/PolicyDistanceRatesPage.tsx b/src/pages/workspace/distanceRates/PolicyDistanceRatesPage.tsx
index 97615c0a699d2..313f4ebdc1152 100644
--- a/src/pages/workspace/distanceRates/PolicyDistanceRatesPage.tsx
+++ b/src/pages/workspace/distanceRates/PolicyDistanceRatesPage.tsx
@@ -358,7 +358,6 @@ function PolicyDistanceRatesPage({
                         }
                         Navigation.goBack();
                     }}
-                    shouldDisplayHelpButton={shouldUseNarrowLayout}
                 >
                     {!shouldUseNarrowLayout && headerButtons}
                 </HeaderWithBackButton>
diff --git a/src/pages/workspace/perDiem/WorkspacePerDiemPage.tsx b/src/pages/workspace/perDiem/WorkspacePerDiemPage.tsx
index 62274cf644a5f..5b5bf3a19ea4e 100644
--- a/src/pages/workspace/perDiem/WorkspacePerDiemPage.tsx
+++ b/src/pages/workspace/perDiem/WorkspacePerDiemPage.tsx
@@ -386,7 +386,6 @@ function WorkspacePerDiemPage({route}: WorkspacePerDiemPageProps) {
                     shouldShowThreeDotsButton
                     threeDotsMenuItems={threeDotsMenuItems}
                     threeDotsAnchorPosition={styles.threeDotsPopoverOffsetNoCloseButton(windowWidth)}
-                    shouldDisplayHelpButton={shouldUseNarrowLayout}
                 >
                     {!shouldUseNarrowLayout && getHeaderButtons()}
                 </HeaderWithBackButton>
diff --git a/src/pages/workspace/reportFields/WorkspaceReportFieldsPage.tsx b/src/pages/workspace/reportFields/WorkspaceReportFieldsPage.tsx
index 5a32f315470c8..8515fa0d67c9e 100644
--- a/src/pages/workspace/reportFields/WorkspaceReportFieldsPage.tsx
+++ b/src/pages/workspace/reportFields/WorkspaceReportFieldsPage.tsx
@@ -257,7 +257,6 @@ function WorkspaceReportFieldsPage({
                         }
                         Navigation.goBack();
                     }}
-                    shouldDisplayHelpButton={shouldUseNarrowLayout}
                 >
                     {!shouldUseNarrowLayout && !hasReportAccountingConnections && getHeaderButtons()}
                 </HeaderWithBackButton>
diff --git a/src/pages/workspace/tags/WorkspaceTagsPage.tsx b/src/pages/workspace/tags/WorkspaceTagsPage.tsx
index a7627c4084d7f..3931451217750 100644
--- a/src/pages/workspace/tags/WorkspaceTagsPage.tsx
+++ b/src/pages/workspace/tags/WorkspaceTagsPage.tsx
@@ -456,7 +456,6 @@ function WorkspaceTagsPage({route}: WorkspaceTagsPageProps) {
                     shouldShowThreeDotsButton={!policy?.hasMultipleTagLists}
                     threeDotsMenuItems={threeDotsMenuItems}
                     threeDotsAnchorPosition={styles.threeDotsPopoverOffsetNoCloseButton(windowWidth)}
-                    shouldDisplayHelpButton={shouldUseNarrowLayout}
                 >
                     {!shouldUseNarrowLayout && getHeaderButtons()}
                 </HeaderWithBackButton>
diff --git a/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx b/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx
index ebd56607fc187..0e41e3844e283 100644
--- a/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx
+++ b/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx
@@ -357,7 +357,6 @@ function WorkspaceTaxesPage({
                         }
                         Navigation.goBack();
                     }}
-                    shouldDisplayHelpButton={shouldUseNarrowLayout}
                 >
                     {!shouldUseNarrowLayout && headerButtons}
                 </HeaderWithBackButton>

From c663f5c90ee5fdd1aea011b14af9aead51b75a25 Mon Sep 17 00:00:00 2001
From: 289Adam289 <adam.szwaja@swmansion.com>
Date: Tue, 18 Mar 2025 18:32:47 +0100
Subject: [PATCH 7/9] move help button on reports page and remove on attachment
 modal

---
 src/components/AttachmentModal.tsx            |  1 +
 src/components/Navigation/TopBar.tsx          |  6 +-
 .../SearchPageHeaderInput.tsx                 | 83 ++++++++++---------
 src/components/SidePane/HelpButton.tsx        |  2 +-
 src/pages/Search/SearchPage.tsx               |  1 +
 src/pages/home/sidebar/BaseSidebarScreen.tsx  |  2 +-
 src/styles/index.ts                           |  3 +-
 7 files changed, 53 insertions(+), 45 deletions(-)

diff --git a/src/components/AttachmentModal.tsx b/src/components/AttachmentModal.tsx
index 4373dae8ac730..7831e116a89d4 100644
--- a/src/components/AttachmentModal.tsx
+++ b/src/components/AttachmentModal.tsx
@@ -537,6 +537,7 @@ function AttachmentModal({
                         threeDotsMenuItems={threeDotsMenuItems}
                         shouldOverlayDots
                         subTitleLink={currentAttachmentLink ?? ''}
+                        shouldDisplayHelpButton={false}
                     />
                     <View style={styles.imageModalImageCenterContainer}>
                         {isLoading && <FullScreenLoadingIndicator />}
diff --git a/src/components/Navigation/TopBar.tsx b/src/components/Navigation/TopBar.tsx
index e4913efe2eb19..e6ff26c43d7ab 100644
--- a/src/components/Navigation/TopBar.tsx
+++ b/src/components/Navigation/TopBar.tsx
@@ -20,11 +20,11 @@ type TopBarProps = {
     breadcrumbLabel: string;
     activeWorkspaceID?: string;
     shouldDisplaySearch?: boolean;
-    shouldDisplaySidePane?: boolean;
+    shouldDisplayHelpButton?: boolean;
     cancelSearch?: () => void;
 };
 
-function TopBar({breadcrumbLabel, activeWorkspaceID, shouldDisplaySearch = true, shouldDisplaySidePane = true, cancelSearch}: TopBarProps) {
+function TopBar({breadcrumbLabel, activeWorkspaceID, shouldDisplaySearch = true, shouldDisplayHelpButton = true, cancelSearch}: TopBarProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const policy = usePolicy(activeWorkspaceID);
@@ -73,7 +73,7 @@ function TopBar({breadcrumbLabel, activeWorkspaceID, shouldDisplaySearch = true,
                         <Text style={[styles.textBlue]}>{translate('common.cancel')}</Text>
                     </PressableWithoutFeedback>
                 )}
-                {shouldDisplaySidePane && <HelpButton />}
+                {shouldDisplayHelpButton && <HelpButton />}
                 {displaySearch && <SearchButton />}
             </View>
             <LoadingBar shouldShow={isLoadingReportData ?? false} />
diff --git a/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx b/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx
index 35fd8c2d30efc..7f6a38d70b574 100644
--- a/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx
+++ b/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx
@@ -18,6 +18,7 @@ import type {SearchQueryJSON, SearchQueryString} from '@components/Search/types'
 import {isSearchQueryItem} from '@components/SelectionList/Search/SearchQueryListItem';
 import type {SearchQueryItem} from '@components/SelectionList/Search/SearchQueryListItem';
 import type {SelectionListHandle} from '@components/SelectionList/types';
+import HelpButton from '@components/SidePane/HelpButton';
 import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -291,60 +292,64 @@ function SearchPageHeaderInput({queryJSON, searchRouterListVisible, hideSearchRo
         setIsAutocompleteListVisible(true);
     };
     // we need `- BORDER_WIDTH` to achieve the effect that the input will not "jump"
-    const popoverHorizontalPosition = 12 - BORDER_WIDTH;
+    const leftPopoverHorizontalPosition = 12 - BORDER_WIDTH;
+    const rightPopoverHorizontalPosition = 4 - BORDER_WIDTH;
     const autocompleteInputStyle = isAutocompleteListVisible
         ? [
               styles.border,
               styles.borderRadiusComponentLarge,
               styles.pAbsolute,
               styles.pt2,
-              {top: 8 - BORDER_WIDTH, left: popoverHorizontalPosition, right: popoverHorizontalPosition},
+              {top: 8 - BORDER_WIDTH, left: leftPopoverHorizontalPosition, right: rightPopoverHorizontalPosition},
               {boxShadow: variables.popoverMenuShadow},
           ]
         : [styles.pt4];
     const inputWrapperActiveStyle = isAutocompleteListVisible ? styles.ph2 : null;
 
     return (
-        <View
-            dataSet={{dragArea: false}}
-            style={[styles.searchResultsHeaderBar, isAutocompleteListVisible && styles.ph3]}
-        >
-            <View style={[styles.appBG, ...autocompleteInputStyle]}>
-                <SearchInputSelectionWrapper
-                    value={textInputValue}
-                    onSearchQueryChange={onSearchQueryChange}
-                    isFullWidth
-                    onSubmit={() => {
-                        const focusedOption = listRef.current?.getFocusedOption();
-                        if (focusedOption) {
-                            return;
-                        }
-                        submitSearch(textInputValue);
-                    }}
-                    autoFocus={false}
-                    onFocus={showAutocompleteList}
-                    onBlur={hideAutocompleteList}
-                    wrapperStyle={{...styles.searchAutocompleteInputResults, ...styles.br2}}
-                    wrapperFocusedStyle={styles.searchAutocompleteInputResultsFocused}
-                    outerWrapperStyle={[inputWrapperActiveStyle, styles.pb2]}
-                    rightComponent={inputRightComponent}
-                    autocompleteListRef={listRef}
-                    ref={textInputRef}
-                    selection={selection}
-                    substitutionMap={autocompleteSubstitutions}
-                />
-                <View style={[styles.mh65vh, !isAutocompleteListVisible && styles.dNone]}>
-                    <SearchAutocompleteList
-                        autocompleteQueryValue={autocompleteQueryValue}
-                        searchQueryItem={searchQueryItem}
-                        onListItemPress={onListItemPress}
-                        setTextQuery={setTextAndUpdateSelection}
-                        updateAutocompleteSubstitutions={updateAutocompleteSubstitutions}
-                        ref={listRef}
-                        shouldSubscribeToArrowKeyEvents={isAutocompleteListVisible}
+        <View style={[styles.flexRow, styles.alignItemsCenter, styles.zIndex10, styles.mr3]}>
+            <View
+                dataSet={{dragArea: false}}
+                style={[styles.searchResultsHeaderBar, styles.flex1, isAutocompleteListVisible && styles.pr1, isAutocompleteListVisible && styles.pl3]}
+            >
+                <View style={[styles.appBG, ...autocompleteInputStyle]}>
+                    <SearchInputSelectionWrapper
+                        value={textInputValue}
+                        onSearchQueryChange={onSearchQueryChange}
+                        isFullWidth
+                        onSubmit={() => {
+                            const focusedOption = listRef.current?.getFocusedOption();
+                            if (focusedOption) {
+                                return;
+                            }
+                            submitSearch(textInputValue);
+                        }}
+                        autoFocus={false}
+                        onFocus={showAutocompleteList}
+                        onBlur={hideAutocompleteList}
+                        wrapperStyle={{...styles.searchAutocompleteInputResults, ...styles.br2}}
+                        wrapperFocusedStyle={styles.searchAutocompleteInputResultsFocused}
+                        outerWrapperStyle={[inputWrapperActiveStyle, styles.pb2]}
+                        rightComponent={inputRightComponent}
+                        autocompleteListRef={listRef}
+                        ref={textInputRef}
+                        selection={selection}
+                        substitutionMap={autocompleteSubstitutions}
                     />
+                    <View style={[styles.mh65vh, !isAutocompleteListVisible && styles.dNone]}>
+                        <SearchAutocompleteList
+                            autocompleteQueryValue={autocompleteQueryValue}
+                            searchQueryItem={searchQueryItem}
+                            onListItemPress={onListItemPress}
+                            setTextQuery={setTextAndUpdateSelection}
+                            updateAutocompleteSubstitutions={updateAutocompleteSubstitutions}
+                            ref={listRef}
+                            shouldSubscribeToArrowKeyEvents={isAutocompleteListVisible}
+                        />
+                    </View>
                 </View>
             </View>
+            <HelpButton style={[styles.mt1Half]} />
         </View>
     );
 }
diff --git a/src/components/SidePane/HelpButton.tsx b/src/components/SidePane/HelpButton.tsx
index b0f2935161c43..3f45e31b0d773 100644
--- a/src/components/SidePane/HelpButton.tsx
+++ b/src/components/SidePane/HelpButton.tsx
@@ -24,7 +24,7 @@ function HelpButton({style}: HelpButtonProps) {
     const {sidePane, shouldHideHelpButton} = useSidePane();
 
     if (shouldHideHelpButton) {
-        // return null;
+        return null;
     }
 
     return (
diff --git a/src/pages/Search/SearchPage.tsx b/src/pages/Search/SearchPage.tsx
index 72d6b4f77acb1..12f942f380ff0 100644
--- a/src/pages/Search/SearchPage.tsx
+++ b/src/pages/Search/SearchPage.tsx
@@ -404,6 +404,7 @@ function SearchPage({route}: SearchPageProps) {
                                         activeWorkspaceID={policyID}
                                         breadcrumbLabel={translate('common.reports')}
                                         shouldDisplaySearch={false}
+                                        shouldDisplayHelpButton={false}
                                     />
                                     <SearchTypeMenu queryJSON={queryJSON} />
                                 </View>
diff --git a/src/pages/home/sidebar/BaseSidebarScreen.tsx b/src/pages/home/sidebar/BaseSidebarScreen.tsx
index b5c1fbe9ce5bc..247c1f95665ad 100644
--- a/src/pages/home/sidebar/BaseSidebarScreen.tsx
+++ b/src/pages/home/sidebar/BaseSidebarScreen.tsx
@@ -73,7 +73,7 @@ function BaseSidebarScreen() {
                         breadcrumbLabel={translate('common.inbox')}
                         activeWorkspaceID={activeWorkspaceID}
                         shouldDisplaySearch={shouldUseNarrowLayout}
-                        shouldDisplaySidePane={shouldUseNarrowLayout}
+                        shouldDisplayHelpButton={shouldUseNarrowLayout}
                     />
                     <View style={[styles.flex1]}>
                         <SidebarLinksData insets={insets} />
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 565d354ccfe96..9bc66803f5c18 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -2656,7 +2656,8 @@ const styles = (theme: ThemeColors) =>
             height: variables.contentHeaderDesktopHeight,
             zIndex: variables.popoverzIndex,
             position: 'relative',
-            paddingHorizontal: 20,
+            paddingLeft: 20,
+            paddingRight: 12,
         },
 
         headerBarDesktopHeight: {

From d4838ca86178732e16798c4aa68d52260e02d7f9 Mon Sep 17 00:00:00 2001
From: 289Adam289 <adam.szwaja@swmansion.com>
Date: Wed, 19 Mar 2025 13:10:35 +0100
Subject: [PATCH 8/9] Remove help button from centered modals

---
 src/components/ConnectToQuickbooksOnlineFlow/index.native.tsx    | 1 +
 src/components/ConnectToXeroFlow/index.native.tsx                | 1 +
 .../settings/Subscription/CardAuthenticationModal/index.tsx      | 1 +
 3 files changed, 3 insertions(+)

diff --git a/src/components/ConnectToQuickbooksOnlineFlow/index.native.tsx b/src/components/ConnectToQuickbooksOnlineFlow/index.native.tsx
index 497c2f91e767b..2044708e91a5c 100644
--- a/src/components/ConnectToQuickbooksOnlineFlow/index.native.tsx
+++ b/src/components/ConnectToQuickbooksOnlineFlow/index.native.tsx
@@ -46,6 +46,7 @@ function ConnectToQuickbooksOnlineFlow({policyID, session}: ConnectToQuickbooksO
                 <HeaderWithBackButton
                     title={translate('workspace.accounting.title')}
                     onBackButtonPress={() => setWebViewOpen(false)}
+                    shouldDisplayHelpButton={false}
                 />
                 <FullPageOfflineBlockingView>
                     <WebView
diff --git a/src/components/ConnectToXeroFlow/index.native.tsx b/src/components/ConnectToXeroFlow/index.native.tsx
index 5cda933a7ebe5..b78586520422d 100644
--- a/src/components/ConnectToXeroFlow/index.native.tsx
+++ b/src/components/ConnectToXeroFlow/index.native.tsx
@@ -59,6 +59,7 @@ function ConnectToXeroFlow({policyID}: ConnectToXeroFlowProps) {
                 <HeaderWithBackButton
                     title={translate('workspace.accounting.title')}
                     onBackButtonPress={() => setWebViewOpen(false)}
+                    shouldDisplayHelpButton={false}
                 />
                 <FullPageOfflineBlockingView>
                     <WebView
diff --git a/src/pages/settings/Subscription/CardAuthenticationModal/index.tsx b/src/pages/settings/Subscription/CardAuthenticationModal/index.tsx
index b323c668b0b5a..9926d1a13fdee 100644
--- a/src/pages/settings/Subscription/CardAuthenticationModal/index.tsx
+++ b/src/pages/settings/Subscription/CardAuthenticationModal/index.tsx
@@ -77,6 +77,7 @@ function CardAuthenticationModal({headerTitle, policyID}: CardAuthenticationModa
                     shouldShowCloseButton
                     onCloseButtonPress={onModalClose}
                     shouldShowBackButton={false}
+                    shouldDisplayHelpButton={false}
                 />
                 {isLoading && <FullScreenLoadingIndicator />}
                 <View style={[styles.flex1]}>

From f6fe1a8f4fed832ffc3be201a49fd0034c021105 Mon Sep 17 00:00:00 2001
From: 289Adam289 <adam.szwaja@swmansion.com>
Date: Wed, 19 Mar 2025 13:26:42 +0100
Subject: [PATCH 9/9] fix changed lint and useOnyx migration

---
 .../index.native.tsx                          | 22 +++++--------------
 .../CardAuthenticationModal/index.tsx         | 10 ++++-----
 2 files changed, 11 insertions(+), 21 deletions(-)

diff --git a/src/components/ConnectToQuickbooksOnlineFlow/index.native.tsx b/src/components/ConnectToQuickbooksOnlineFlow/index.native.tsx
index 2044708e91a5c..1f8b225c4f0c5 100644
--- a/src/components/ConnectToQuickbooksOnlineFlow/index.native.tsx
+++ b/src/components/ConnectToQuickbooksOnlineFlow/index.native.tsx
@@ -1,6 +1,5 @@
 import React, {useEffect, useRef, useState} from 'react';
-import type {OnyxEntry} from 'react-native-onyx';
-import {withOnyx} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
 import {WebView} from 'react-native-webview';
 import FullPageOfflineBlockingView from '@components/BlockingViews/FullPageOfflineBlockingView';
 import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
@@ -8,29 +7,24 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import Modal from '@components/Modal';
 import useLocalize from '@hooks/useLocalize';
 import {getQuickbooksOnlineSetupLink} from '@libs/actions/connections/QuickbooksOnline';
-import * as PolicyAction from '@userActions/Policy/Policy';
+import {enablePolicyTaxes} from '@userActions/Policy/Policy';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {Session} from '@src/types/onyx';
 import type {ConnectToQuickbooksOnlineFlowProps} from './types';
 
-type ConnectToQuickbooksOnlineFlowOnyxProps = {
-    /** Session info for the currently logged in user. */
-    session: OnyxEntry<Session>;
-};
-
 const renderLoading = () => <FullScreenLoadingIndicator />;
 
-function ConnectToQuickbooksOnlineFlow({policyID, session}: ConnectToQuickbooksOnlineFlowProps & ConnectToQuickbooksOnlineFlowOnyxProps) {
+function ConnectToQuickbooksOnlineFlow({policyID}: ConnectToQuickbooksOnlineFlowProps) {
     const {translate} = useLocalize();
     const webViewRef = useRef<WebView>(null);
     const [isWebViewOpen, setWebViewOpen] = useState(false);
+    const [session] = useOnyx(ONYXKEYS.SESSION);
 
     const authToken = session?.authToken ?? null;
 
     useEffect(() => {
         // Since QBO doesn't support Taxes, we should disable them from the LHN when connecting to QBO
-        PolicyAction.enablePolicyTaxes(policyID, false);
+        enablePolicyTaxes(policyID, false);
         setWebViewOpen(true);
         // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
     }, []);
@@ -69,8 +63,4 @@ function ConnectToQuickbooksOnlineFlow({policyID, session}: ConnectToQuickbooksO
 
 ConnectToQuickbooksOnlineFlow.displayName = 'ConnectToQuickbooksOnlineFlow';
 
-export default withOnyx<ConnectToQuickbooksOnlineFlowProps & ConnectToQuickbooksOnlineFlowOnyxProps, ConnectToQuickbooksOnlineFlowOnyxProps>({
-    session: {
-        key: ONYXKEYS.SESSION,
-    },
-})(ConnectToQuickbooksOnlineFlow);
+export default ConnectToQuickbooksOnlineFlow;
diff --git a/src/pages/settings/Subscription/CardAuthenticationModal/index.tsx b/src/pages/settings/Subscription/CardAuthenticationModal/index.tsx
index 9926d1a13fdee..50dbd93e536f2 100644
--- a/src/pages/settings/Subscription/CardAuthenticationModal/index.tsx
+++ b/src/pages/settings/Subscription/CardAuthenticationModal/index.tsx
@@ -6,8 +6,8 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import Modal from '@components/Modal';
 import ScreenWrapper from '@components/ScreenWrapper';
 import useThemeStyles from '@hooks/useThemeStyles';
-import * as PaymentMethods from '@userActions/PaymentMethods';
-import * as PolicyActions from '@userActions/Policy/Policy';
+import {clearPaymentCard3dsVerification, verifySetupIntent} from '@userActions/PaymentMethods';
+import {verifySetupIntentAndRequestPolicyOwnerChange} from '@userActions/Policy/Policy';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 
@@ -26,7 +26,7 @@ function CardAuthenticationModal({headerTitle, policyID}: CardAuthenticationModa
 
     const onModalClose = useCallback(() => {
         setIsVisible(false);
-        PaymentMethods.clearPaymentCard3dsVerification();
+        clearPaymentCard3dsVerification();
     }, []);
 
     useEffect(() => {
@@ -41,9 +41,9 @@ function CardAuthenticationModal({headerTitle, policyID}: CardAuthenticationModa
             const message = event.data;
             if (message === CONST.GBP_AUTHENTICATION_COMPLETE) {
                 if (policyID) {
-                    PolicyActions.verifySetupIntentAndRequestPolicyOwnerChange(policyID);
+                    verifySetupIntentAndRequestPolicyOwnerChange(policyID);
                 } else {
-                    PaymentMethods.verifySetupIntent(session?.accountID ?? -1, true);
+                    verifySetupIntent(session?.accountID ?? CONST.DEFAULT_NUMBER_ID, true);
                 }
                 onModalClose();
             }