From 881134a505cf0e7da7cb4d90b0febe360e336099 Mon Sep 17 00:00:00 2001 From: MelvinBot 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 --- 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[]) => ( ), - [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 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 --- 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 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 --- 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 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 --- 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 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 --- 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 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 --- 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 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 --- 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: {