From 881134a505cf0e7da7cb4d90b0febe360e336099 Mon Sep 17 00:00:00 2001
From: MelvinBot <infra+melvinbot@expensify.com>
Date: Fri, 6 Feb 2026 09:19:32 +0000
Subject: [PATCH 1/7] Compact LHN items for Reports page and Workspace Editor
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Reduce row height (52px → 40px), icon size (20px → 16px), and horizontal
padding (16px → 12px) for sidebar navigation items on the Search/Reports
page and Workspace settings page to make them more compact and reduce
unnecessary scrolling.

Co-authored-by: Shawn Borton <shawnborton@users.noreply.github.com>
---
 src/pages/Search/SearchTypeMenu.tsx          | 14 +++++++-------
 src/pages/workspace/WorkspaceInitialPage.tsx |  5 ++++-
 src/styles/index.ts                          |  7 +++++++
 3 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/pages/Search/SearchTypeMenu.tsx b/src/pages/Search/SearchTypeMenu.tsx
index cc673f363636..a2e713d27bf0 100644
--- a/src/pages/Search/SearchTypeMenu.tsx
+++ b/src/pages/Search/SearchTypeMenu.tsx
@@ -214,14 +214,14 @@ function SearchTypeMenu({queryJSON}: SearchTypeMenuProps) {
         (menuItems: MenuItemWithLink[]) => (
             <MenuItemList
                 menuItems={menuItems}
-                wrapperStyle={styles.sectionMenuItem}
+                wrapperStyle={styles.sectionMenuItemCompact}
                 icon={expensifyIcons.Bookmark}
-                iconWidth={variables.iconSizeNormal}
-                iconHeight={variables.iconSizeNormal}
+                iconWidth={variables.iconSizeSmall}
+                iconHeight={variables.iconSizeSmall}
                 shouldUseSingleExecution
             />
         ),
-        [expensifyIcons.Bookmark, styles.sectionMenuItem],
+        [expensifyIcons.Bookmark, styles.sectionMenuItemCompact],
     );
 
     const activeItemIndex = useMemo(() => {
@@ -275,9 +275,9 @@ function SearchTypeMenu({queryJSON}: SearchTypeMenuProps) {
                                                     title={translate(item.translationPath)}
                                                     badgeStyle={styles.todoBadge}
                                                     icon={icon}
-                                                    iconWidth={variables.iconSizeNormal}
-                                                    iconHeight={variables.iconSizeNormal}
-                                                    wrapperStyle={styles.sectionMenuItem}
+                                                    iconWidth={variables.iconSizeSmall}
+                                                    iconHeight={variables.iconSizeSmall}
+                                                    wrapperStyle={styles.sectionMenuItemCompact}
                                                     badgeText={item.badgeText}
                                                     focused={focused}
                                                     onPress={onPress}
diff --git a/src/pages/workspace/WorkspaceInitialPage.tsx b/src/pages/workspace/WorkspaceInitialPage.tsx
index 6967b25934eb..29b61161a71c 100644
--- a/src/pages/workspace/WorkspaceInitialPage.tsx
+++ b/src/pages/workspace/WorkspaceInitialPage.tsx
@@ -48,6 +48,7 @@ import {
 import {getDefaultWorkspaceAvatar} from '@libs/ReportUtils';
 import type WORKSPACE_TO_RHP from '@navigation/linkingConfig/RELATIONS/WORKSPACE_TO_RHP';
 import type {WorkspaceSplitNavigatorParamList} from '@navigation/types';
+import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -567,9 +568,11 @@ function WorkspaceInitialPage({policyDraft, policy: policyProp, route}: Workspac
                                     interactive={!hasPolicyCreationError}
                                     title={translate(item.translationKey)}
                                     icon={item.icon}
+                                    iconWidth={variables.iconSizeSmall}
+                                    iconHeight={variables.iconSizeSmall}
                                     onPress={item.action}
                                     brickRoadIndicator={item.brickRoadIndicator}
-                                    wrapperStyle={styles.sectionMenuItem}
+                                    wrapperStyle={styles.sectionMenuItemCompact}
                                     highlighted={!!item?.highlighted}
                                     focused={!!(item.screenName && activeRoute?.startsWith(item.screenName))}
                                     badgeText={item.badgeText}
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 37fc2d231459..f911cea57456 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -2817,6 +2817,13 @@ const staticStyles = (theme: ThemeColors) =>
             alignItems: 'center',
         },
 
+        sectionMenuItemCompact: {
+            borderRadius: 8,
+            paddingHorizontal: 12,
+            height: 40,
+            alignItems: 'center',
+        },
+
         sectionSelectCircle: {
             backgroundColor: theme.cardBG,
         },

From 052acbabdb129846be7612c61610572736c88320 Mon Sep 17 00:00:00 2001
From: MelvinBot <infra+melvinbot@expensify.com>
Date: Fri, 6 Feb 2026 10:09:44 +0000
Subject: [PATCH 2/7] Reduce Reports page sidebar width from 320px to 260px

Add a new searchSidebarWidth variable (260px) separate from the general
sideBarWithLHBWidth (320px) so the Reports page LHN is narrower without
affecting the Workspace editor sidebar. Updates searchSidebar,
searchSplitContainer, and SearchRowSkeleton to use the new width.

Co-authored-by: Shawn Borton <shawnborton@users.noreply.github.com>
---
 src/components/Skeletons/SearchRowSkeleton.tsx | 2 +-
 src/styles/index.ts                            | 4 ++--
 src/styles/variables.ts                        | 1 +
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/Skeletons/SearchRowSkeleton.tsx b/src/components/Skeletons/SearchRowSkeleton.tsx
index 757dd23ace1e..a0275256dbc1 100644
--- a/src/components/Skeletons/SearchRowSkeleton.tsx
+++ b/src/components/Skeletons/SearchRowSkeleton.tsx
@@ -19,7 +19,7 @@ type SearchRowSkeletonProps = {
 
 const barHeight = 8;
 const longBarWidth = 120;
-const leftPaneWidth = variables.sideBarWithLHBWidth + variables.navigationTabBarSize;
+const leftPaneWidth = variables.searchSidebarWidth + variables.navigationTabBarSize;
 
 // 12 is the gap between the element and the right button
 const gapWidth = 12;
diff --git a/src/styles/index.ts b/src/styles/index.ts
index f911cea57456..8ae01cae93be 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -1599,11 +1599,11 @@ const staticStyles = (theme: ThemeColors) =>
         searchSplitContainer: {
             flex: 1,
             flexDirection: 'row',
-            marginLeft: variables.navigationTabBarSize + variables.sideBarWithLHBWidth,
+            marginLeft: variables.navigationTabBarSize + variables.searchSidebarWidth,
         },
 
         searchSidebar: {
-            width: variables.sideBarWithLHBWidth,
+            width: variables.searchSidebarWidth,
             height: '100%',
             backgroundColor: theme.sidebar,
             justifyContent: 'space-between',
diff --git a/src/styles/variables.ts b/src/styles/variables.ts
index b2cf557fe00a..470ea183aa17 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -111,6 +111,7 @@ export default {
     uploadViewMargin: 20,
     chooseFilesViewMargin: 8,
     sideBarWithLHBWidth: 320,
+    searchSidebarWidth: 260,
     navigationTabBarSize: 72,
     popoverMargin: 18,
     pdfPageMaxWidth: 992,

From 627da0cc991e7ee043b27a48153ab04a47880540 Mon Sep 17 00:00:00 2001
From: MelvinBot <infra+melvinbot@expensify.com>
Date: Fri, 6 Feb 2026 10:28:11 +0000
Subject: [PATCH 3/7] Use condensed 20px height for To-do section badges

Override the default 28px minHeight on todoBadge to make badges 20px
tall, matching the condensed badge style used in badgeNewFeature.

Co-authored-by: Shawn Borton <shawnborton@users.noreply.github.com>
---
 src/styles/index.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/styles/index.ts b/src/styles/index.ts
index 8ae01cae93be..5a3d0b172454 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -5472,6 +5472,8 @@ const staticStyles = (theme: ThemeColors) =>
 
         todoBadge: {
             width: variables.w36,
+            minHeight: 20,
+            height: 20,
             alignItems: 'center',
             justifyContent: 'center',
             paddingLeft: 0,

From 46a587382aa70c9f23ecfded0a08458b26b6793e Mon Sep 17 00:00:00 2001
From: MelvinBot <infra+melvinbot@expensify.com>
Date: Fri, 6 Feb 2026 11:43:03 +0000
Subject: [PATCH 4/7] Use position:fixed for search sidebar to ensure 260px
 width

The searchSidebar was using marginLeft for positioning within its
parent container. Switch to position:fixed with left:72px to ensure
the sidebar renders at exactly 260px width regardless of parent
container layout constraints.

Co-authored-by: Shawn Borton <shawnborton@users.noreply.github.com>
---
 src/styles/index.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/styles/index.ts b/src/styles/index.ts
index 5a3d0b172454..a51823ccfe36 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -1605,11 +1605,12 @@ const staticStyles = (theme: ThemeColors) =>
         searchSidebar: {
             width: variables.searchSidebarWidth,
             height: '100%',
+            position: 'fixed',
+            left: variables.navigationTabBarSize,
             backgroundColor: theme.sidebar,
             justifyContent: 'space-between',
             borderRightWidth: 1,
             borderColor: theme.border,
-            marginLeft: variables.navigationTabBarSize,
         },
 
         // Sidebar Styles

From 488c154a6fbd99c06b852f0b3838eac31e52b742 Mon Sep 17 00:00:00 2001
From: MelvinBot <infra+melvinbot@expensify.com>
Date: Fri, 6 Feb 2026 12:13:58 +0000
Subject: [PATCH 5/7] Reduce To-do badge width from 36px to 24px

Co-authored-by: Shawn Borton <shawnborton@users.noreply.github.com>
---
 src/styles/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/index.ts b/src/styles/index.ts
index a51823ccfe36..af218c746be1 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -5472,7 +5472,7 @@ const staticStyles = (theme: ThemeColors) =>
         },
 
         todoBadge: {
-            width: variables.w36,
+            width: 24,
             minHeight: 20,
             height: 20,
             alignItems: 'center',

From 4c92e1b0ae2188342c93d8b685521f4f9f8cf5c7 Mon Sep 17 00:00:00 2001
From: MelvinBot <infra+melvinbot@expensify.com>
Date: Fri, 6 Feb 2026 12:49:43 +0000
Subject: [PATCH 6/7] Fix todoBadge width by using paddingHorizontal: 0

The defaultBadge style sets paddingHorizontal: 12 which was not being
properly overridden by paddingLeft/paddingRight: 0. Using
paddingHorizontal: 0 directly overrides the inherited padding, allowing
the width: 24 to take effect correctly.

Co-authored-by: Shawn Borton <shawnborton@users.noreply.github.com>
---
 src/styles/index.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/styles/index.ts b/src/styles/index.ts
index af218c746be1..d5d037b8bc65 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -5477,8 +5477,7 @@ const staticStyles = (theme: ThemeColors) =>
             height: 20,
             alignItems: 'center',
             justifyContent: 'center',
-            paddingLeft: 0,
-            paddingRight: 0,
+            paddingHorizontal: 0,
         },
 
         stickToBottom: {

From ead37623665a6b4b58c04697543fec6234314e17 Mon Sep 17 00:00:00 2001
From: MelvinBot <infra+melvinbot@expensify.com>
Date: Fri, 6 Feb 2026 13:19:46 +0000
Subject: [PATCH 7/7] Fix todoBadge width: use
 minWidth/maxWidth/padding/overflow overrides

The todoBadge style override wasn't taking effect on web because
paddingHorizontal: 0 may not properly override the defaultBadge's
paddingHorizontal: 12 in style arrays on React Native Web.

Use a more robust override approach:
- minWidth/maxWidth/width all set to 24 to force exact width
- padding: 0 (shorthand) to override all padding properties
- overflow: hidden to clip any content exceeding bounds

Co-authored-by: Shawn Borton <shawnborton@users.noreply.github.com>
---
 src/styles/index.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/styles/index.ts b/src/styles/index.ts
index d5d037b8bc65..97b823755d1b 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -5473,11 +5473,14 @@ const staticStyles = (theme: ThemeColors) =>
 
         todoBadge: {
             width: 24,
+            minWidth: 24,
+            maxWidth: 24,
             minHeight: 20,
             height: 20,
             alignItems: 'center',
             justifyContent: 'center',
-            paddingHorizontal: 0,
+            padding: 0,
+            overflow: 'hidden',
         },
 
         stickToBottom: {
