Merge pull request Expensify#63247 from software-mansion-labs/nav/fix-workspaces-list-page-header-padding

Workspaces - Green loading line overlaps with + New workspace button

Author: mountiny

src/pages/Search/SearchPageNarrow.tsx

@@ -158,7 +158,7 @@ function SearchPageNarrow({queryJSON, headerButtonsOptions, currentSearchResults
                         </View>
                         <View style={[styles.flex1]}>
                             <Animated.View style={[topBarAnimatedStyle, !searchRouterListVisible && styles.narrowSearchRouterInactiveStyle, styles.flex1, styles.bgTransparent]}>
-                                <View style={[styles.narrowSearchHeaderStyle, styles.flex1]}>
+                                <View style={[styles.flex1, styles.pt2, styles.appBG]}>
                                     <SearchPageHeader
                                         queryJSON={queryJSON}
                                         searchRouterListVisible={searchRouterListVisible}

src/pages/Search/SearchTypeMenu.tsx

@@ -261,7 +261,7 @@ function SearchTypeMenu({queryJSON}: SearchTypeMenuProps) {
                 ))}
                 {shouldShowSavedSearchesMenuItemTitle && (
                     <View>
-                        <Text style={[styles.sectionTitle, styles.pb1]}>{translate('search.savedSearchesMenuItemTitle')}</Text>
+                        <Text style={styles.sectionTitle}>{translate('search.savedSearchesMenuItemTitle')}</Text>
                         {renderSavedSearchesSection(savedSearchesMenuItems)}
                         <DeleteConfirmModal />
                     </View>

src/pages/home/sidebar/SidebarLinks.tsx

@@ -84,7 +84,7 @@ function SidebarLinks({insets, optionListItems, isLoading, priorityMode = CONST.
     const viewMode = priorityMode === CONST.PRIORITY_MODE.GSD ? CONST.OPTION_MODE.COMPACT : CONST.OPTION_MODE.DEFAULT;
 
     // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
-    const contentContainerStyles = useMemo(() => StyleSheet.flatten([styles.sidebarListContainer, {paddingBottom: StyleUtils.getSafeAreaMargins(insets).marginBottom}]), [insets]);
+    const contentContainerStyles = useMemo(() => StyleSheet.flatten([styles.pt2, {paddingBottom: StyleUtils.getSafeAreaMargins(insets).marginBottom}]), [insets]);
 
     return (
         <View style={[styles.flex1, styles.h100]}>

src/pages/workspace/WorkspacesListPage.tsx

@@ -318,7 +318,7 @@ function WorkspacesListPage() {
 
     const listHeaderComponent = useCallback(() => {
         if (isLessThanMediumScreen) {
-            return <View style={styles.mt3} />;
+            return <View style={styles.mt2} />;
         }
 
         return (
@@ -490,7 +490,7 @@ function WorkspacesListPage() {
                     <FullScreenLoadingIndicator style={[styles.flex1, styles.pRelative]} />
                 ) : (
                     <ScrollView
-                        contentContainerStyle={styles.pt3}
+                        contentContainerStyle={styles.pt2}
                         addBottomSafeAreaPadding
                     >
                         <View style={[styles.flex1, isLessThanMediumScreen ? styles.workspaceSectionMobile : styles.workspaceSection]}>
@@ -524,7 +524,7 @@ function WorkspacesListPage() {
         >
             <View style={styles.flex1}>
                 <TopBar breadcrumbLabel={translate('common.workspaces')}>{!shouldUseNarrowLayout && <View style={[styles.pr2]}>{getHeaderButton()}</View>}</TopBar>
-                {shouldUseNarrowLayout && <View style={[styles.ph5]}>{getHeaderButton()}</View>}
+                {shouldUseNarrowLayout && <View style={[styles.ph5, styles.pt2]}>{getHeaderButton()}</View>}
                 <FlatList
                     data={workspaces}
                     renderItem={getMenuItem}

src/styles/index.ts

@@ -1815,11 +1815,6 @@ const styles = (theme: ThemeColors) =>
             lineHeight: 20,
         },
 
-        sidebarListContainer: {
-            ...spacing.pt3,
-            paddingBottom: 4,
-        },
-
         sidebarListItem: {
             justifyContent: 'center',
             textDecorationLine: 'none',
@@ -3069,8 +3064,7 @@ const styles = (theme: ThemeColors) =>
         },
 
         sectionTitle: {
-            ...spacing.pt2,
-            ...spacing.pb4,
+            ...spacing.pv2,
             ...spacing.ph2,
             fontSize: 13,
             ...FontUtils.fontFamily.platform.EXP_NEUE,
@@ -3857,12 +3851,6 @@ const styles = (theme: ThemeColors) =>
             justifyContent: 'flex-start',
         },
 
-        narrowSearchHeaderStyle: {
-            flex: 1,
-            paddingTop: 12,
-            backgroundColor: theme.appBG,
-        },
-
         narrowSearchRouterInactiveStyle: {
             left: 0,
             right: 0,