From 2eea1e1105243c23ca69d49f332c438a34990f59 Mon Sep 17 00:00:00 2001 From: Shawn Borton Date: Wed, 29 Apr 2026 09:37:55 +0200 Subject: [PATCH 1/6] Add shouldIgnoreCompactStyle prop to exempt bank account rows from compact menu styling Co-Authored-By: Claude Opus 4.6 (1M context) --- src/components/MenuItem.tsx | 6 +++++- src/hooks/useBulkPayOptions.ts | 1 + 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx index 2628e6593f2e..97a080bb9d9e 100644 --- a/src/components/MenuItem.tsx +++ b/src/components/MenuItem.tsx @@ -458,6 +458,9 @@ type MenuItemBaseProps = ForwardedFSClassProps & /** Additional styles for the right icon wrapper */ rightIconWrapperStyle?: StyleProp; + + /** Whether to ignore compact popover menu styling for this item */ + shouldIgnoreCompactStyle?: boolean; }; type MenuItemProps = (IconProps | AvatarProps | NoIcon) & MenuItemBaseProps; @@ -606,6 +609,7 @@ function MenuItem({ tabIndex = 0, rightIconWrapperStyle, titleAccessibilityRole, + shouldIgnoreCompactStyle = false, }: MenuItemProps) { const icons = useMemoizedLazyExpensifyIcons(['ArrowRight', 'FallbackAvatar', 'DotIndicator', 'Checkmark', 'NewWindow']); const {translate} = useLocalize(); @@ -620,7 +624,7 @@ function MenuItem({ const popoverAnchor = useRef(null); const deviceHasHoverSupport = hasHoverSupport(); const isCompactMenu = useIsCompactMenu(); - const isCompactPopoverItem = isCompactMenu && !isSmallScreenWidth; + const isCompactPopoverItem = isCompactMenu && !isSmallScreenWidth && !shouldIgnoreCompactStyle; const compactIconStyle = isCompactPopoverItem && iconType === CONST.ICON_TYPE_ICON && {width: variables.iconSizeNormal}; const isCompact = viewMode === CONST.OPTION_MODE.COMPACT; const isDeleted = style && Array.isArray(style) ? style.includes(styles.offlineFeedbackDeleted) : false; diff --git a/src/hooks/useBulkPayOptions.ts b/src/hooks/useBulkPayOptions.ts index 6ddab11be5b2..a5ea40b07f0c 100644 --- a/src/hooks/useBulkPayOptions.ts +++ b/src/hooks/useBulkPayOptions.ts @@ -143,6 +143,7 @@ function useBulkPayOptions({ iconHeight: typeof account.icon === 'number' ? undefined : account.iconSize, key: CONST.PAYMENT_METHODS.BUSINESS_BANK_ACCOUNT, shouldIgnoreKeyForRendering: true, + shouldIgnoreCompactStyle: true, additionalData: { bankAccountID: account.methodID, paymentMethod: CONST.PAYMENT_METHODS.BUSINESS_BANK_ACCOUNT, From 3b30fd11e94bf97a40d92661071f596280e325c8 Mon Sep 17 00:00:00 2001 From: Shawn Borton Date: Wed, 29 Apr 2026 09:44:57 +0200 Subject: [PATCH 2/6] Add shouldIgnoreCompactStyle to SettlementButton bank account rows Co-Authored-By: Claude Opus 4.6 (1M context) --- src/components/ButtonWithDropdownMenu/types.ts | 3 +++ src/components/SettlementButton/index.tsx | 1 + 2 files changed, 4 insertions(+) diff --git a/src/components/ButtonWithDropdownMenu/types.ts b/src/components/ButtonWithDropdownMenu/types.ts index df3ef7732098..6153eb280a2b 100644 --- a/src/components/ButtonWithDropdownMenu/types.ts +++ b/src/components/ButtonWithDropdownMenu/types.ts @@ -54,6 +54,9 @@ type DropdownOption = WithSentryLabel & { shouldShowLoadingSpinnerIcon?: boolean; /** The type of brick road indicator to show */ brickRoadIndicator?: ValueOf; + + /** Whether to ignore compact popover menu styling for this item */ + shouldIgnoreCompactStyle?: boolean; }; type ButtonWithDropdownMenuProps = WithSentryLabel & { diff --git a/src/components/SettlementButton/index.tsx b/src/components/SettlementButton/index.tsx index 2aed99286385..f63ba7ffc4ec 100644 --- a/src/components/SettlementButton/index.tsx +++ b/src/components/SettlementButton/index.tsx @@ -330,6 +330,7 @@ function SettlementButton({ iconHeight: typeof account.icon === 'number' ? undefined : account.iconSize, value: CONST.PAYMENT_METHODS.BUSINESS_BANK_ACCOUNT, description: account.description, + shouldIgnoreCompactStyle: true, onSelected: () => { if (checkForNecessaryAction(CONST.IOU.PAYMENT_TYPE.VBBA)) { return; From 5f247d421cbd716beaa7af18127e62df8a0f68b8 Mon Sep 17 00:00:00 2001 From: Shawn Borton Date: Wed, 29 Apr 2026 09:51:45 +0200 Subject: [PATCH 3/6] Exempt account switcher delegate rows from compact menu styling Co-Authored-By: Claude Opus 4.6 (1M context) --- src/components/AccountSwitcher.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/AccountSwitcher.tsx b/src/components/AccountSwitcher.tsx index 0247f8cd19c1..277201717181 100644 --- a/src/components/AccountSwitcher.tsx +++ b/src/components/AccountSwitcher.tsx @@ -143,6 +143,7 @@ function AccountSwitcher({isScreenFocused}: AccountSwitcherProps) { icon: personalDetails?.avatar ?? '', iconType: CONST.ICON_TYPE_AVATAR, outerWrapperStyle: shouldUseNarrowLayout ? {} : styles.accountSwitcherPopover, + shouldIgnoreCompactStyle: true, numberOfLinesDescription: 1, errorText: error ?? '', shouldShowRedDotIndicator: !!error, From a1518cd92f6e05b03773eeb41063a0a2098a6c55 Mon Sep 17 00:00:00 2001 From: Shawn Borton Date: Wed, 29 Apr 2026 10:01:44 +0200 Subject: [PATCH 4/6] Add minHeight to compact menu rows and reduce description margin in compact mode Co-Authored-By: Claude Opus 4.6 (1M context) --- src/components/MenuItem.tsx | 2 +- src/styles/index.ts | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx index 97a080bb9d9e..ba7388c598ca 100644 --- a/src/components/MenuItem.tsx +++ b/src/components/MenuItem.tsx @@ -628,7 +628,7 @@ function MenuItem({ const compactIconStyle = isCompactPopoverItem && iconType === CONST.ICON_TYPE_ICON && {width: variables.iconSizeNormal}; const isCompact = viewMode === CONST.OPTION_MODE.COMPACT; const isDeleted = style && Array.isArray(style) ? style.includes(styles.offlineFeedbackDeleted) : false; - const descriptionVerticalMargin = shouldShowDescriptionOnTop ? styles.mb1 : styles.mt1; + const descriptionVerticalMargin = shouldShowDescriptionOnTop ? styles.mb1 : isCompactPopoverItem ? styles.mt0Half : styles.mt1; const menuItemLoadingReasonAttributes: SkeletonSpanReasonAttributes = { context: 'MenuItem', }; diff --git a/src/styles/index.ts b/src/styles/index.ts index 9a33de715ddb..b6293c6f4dd8 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -265,6 +265,7 @@ const webViewStyles = (theme: ThemeColors) => const compactPopoverMenuItemBaseStyle = { ...spacing.ph5, ...spacing.pv1, + minHeight: variables.componentSizeLarge, alignItems: 'center' as const, }; From 5feb64abb29fbaa39f0cb5470b27ded669b171eb Mon Sep 17 00:00:00 2001 From: Shawn Borton Date: Wed, 29 Apr 2026 10:21:35 +0200 Subject: [PATCH 5/6] Fix nested ternary lint error in MenuItem description margin Co-Authored-By: Claude Opus 4.6 (1M context) --- src/components/MenuItem.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx index ba7388c598ca..e6829091a19a 100644 --- a/src/components/MenuItem.tsx +++ b/src/components/MenuItem.tsx @@ -628,7 +628,12 @@ function MenuItem({ const compactIconStyle = isCompactPopoverItem && iconType === CONST.ICON_TYPE_ICON && {width: variables.iconSizeNormal}; const isCompact = viewMode === CONST.OPTION_MODE.COMPACT; const isDeleted = style && Array.isArray(style) ? style.includes(styles.offlineFeedbackDeleted) : false; - const descriptionVerticalMargin = shouldShowDescriptionOnTop ? styles.mb1 : isCompactPopoverItem ? styles.mt0Half : styles.mt1; + let descriptionVerticalMargin = styles.mt1; + if (shouldShowDescriptionOnTop) { + descriptionVerticalMargin = styles.mb1; + } else if (isCompactPopoverItem) { + descriptionVerticalMargin = styles.mt0Half; + } const menuItemLoadingReasonAttributes: SkeletonSpanReasonAttributes = { context: 'MenuItem', }; From 0d418e524474cff98f7dd1964c36f814b0ed6ae7 Mon Sep 17 00:00:00 2001 From: Shawn Borton Date: Wed, 29 Apr 2026 10:30:22 +0200 Subject: [PATCH 6/6] Fix TS error by widening descriptionVerticalMargin type to ViewStyle Co-Authored-By: Claude Opus 4.6 (1M context) --- src/components/MenuItem.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx index e6829091a19a..444c3f912632 100644 --- a/src/components/MenuItem.tsx +++ b/src/components/MenuItem.tsx @@ -628,7 +628,7 @@ function MenuItem({ const compactIconStyle = isCompactPopoverItem && iconType === CONST.ICON_TYPE_ICON && {width: variables.iconSizeNormal}; const isCompact = viewMode === CONST.OPTION_MODE.COMPACT; const isDeleted = style && Array.isArray(style) ? style.includes(styles.offlineFeedbackDeleted) : false; - let descriptionVerticalMargin = styles.mt1; + let descriptionVerticalMargin: ViewStyle = styles.mt1; if (shouldShowDescriptionOnTop) { descriptionVerticalMargin = styles.mb1; } else if (isCompactPopoverItem) {