[$250] Insufficient spacing between Card name and Issue card button when window is resized

[m-natarajan]

If you haven’t already, check out our contributing guidelines for onboarding. To join our Slack channel, fill out this form.

---

Version Number: 9.4.25-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from BrowserStack:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @hungvu193
Slack conversation (hyperlinked to channel name): #Expensify Bugs

Action Performed:

1. Navigate to Workspace > Expensify Card.
2. Resize the browser window to a narrower width.
3. Observe the spacing between the Card name label and the Issue card button.

Expected Result:

Adequate spacing is maintained between the Card name label and the Issue card button at all supported window sizes.

Actual Result:

The spacing between the Card name label and the Issue card button becomes too small when the window is resized, making the UI appear cramped.

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari

Screenshots/Videos

Screen.Recording.2026-06-30.at.13.15.39.mov

Recording.3115.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022071977612508637430
• Upwork Job ID: 2071977612508637430
• Last Price Increase: 2026-07-21

Issue Owner

Current Issue Owner: @MobileMage

[MelvinBot]

Proposal

What is the root cause of that problem?

On the Workspace > Expensify Card page, the page title (Expensify Card) and the Issue card button are rendered in the same header row whenever the layout isn't narrow-portrait. The buttons are passed as children into HeaderWithBackButton:

• WorkspaceExpensifyCardListPage.tsx:291 renders getHeaderButtons() inside the header only when !shouldDisplayButtonsInSeparateLine. That flag is shouldUseNarrowLayout && !isInLandscapeMode (useShouldDisplayButtonsInSeparateLine.ts:9) — i.e. medium-width desktop/browser keeps them in the header row.

Inside the header, the title and the button group are siblings in one justifyContentBetween flex row (HeaderWithBackButton/index.tsx:243). The title container has flex: 1 (Header.tsx:97), so it expands to fill all available width. The only horizontal separation reserved between the title and the button group is reportOptions' fixed marginLeft: 8 (HeaderWithBackButton/index.tsx:290 → styles/index.ts:1327).

So as the window narrows (but is still wide enough to keep the buttons in the header), the flexible title consumes width right up to that fixed 8px margin, and the visible gap shrinks to ~8px → cramped.

What changes do you think we should make in order to solve the problem?

Reserve a larger guaranteed gap between the title and the button group, scoped to this page so it doesn't affect every header.

The button group already has a wrapper style array headerButtonsRowStyle at WorkspaceExpensifyCardListPage.tsx:194-199. Add a left margin (e.g. styles.ml2 / styles.ml3) to that array so the buttons keep adequate spacing from the title at all widths.

What alternative solutions did you explore? (Optional)

A global fix in Header.tsx:97 (adding flexShrink: 1 + a small marginRight to the title container) would solve it everywhere, but it touches every HeaderWithBackButton consumer and is riskier than the scoped change. Prefer the scoped fix unless design wants a global minimum gap.

Investigation details

• Repro is the medium-width (resized but not fully narrow) desktop/web case, which matches the reported video (Chrome resized narrower). In true narrow-portrait the buttons drop to a separate line (WorkspaceExpensifyCardListPage.tsx:293) and the bug doesn't apply.
• Confidence: High — code path and the missing minimum-gap are confirmed; the exact margin value (ml2 vs ml3) is a design call.
• No likely duplicate open issues found.

---

Next Steps for Contributor+ team:
To accept: @MelvinBot implement [this](https://github.com/Expensify/App/issues/94988) to create a draft PR.
To refine: @MelvinBot <your feedback>
To reject: Explain why you are rejecting Melvin's proposal.

[shivang-goliyan]

🚨 Edited by proposal-police: This proposal was edited at 2026-06-30 15:26:16 UTC.

Proposal

Please re-state the problem that we are trying to solve in this issue.

On Workspace > Expensify Card, the card feed name on the left and the Issue card button on the right sit in the same row. When you resize the browser to a narrower width (but not yet narrow enough to stack them), the gap between the name and the button collapses to almost nothing and the header looks cramped.

What is the root cause of that problem?

The row that holds these two elements lives at WorkspaceExpensifyCardListPage.tsx:295. Its two children are the FeedSelector (the card name) and getHeaderButtons() (Issue card / More). In the wide/landscape case the row gets flexRow + alignItemsCenter + justifyContentBetween, but it reserves no gap:

<View style={[styles.w100, styles.ph5, styles.pb3, (!shouldChangeLayout || isInLandscapeMode) && [styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween]]}>

justifyContentBetween only spreads out whatever free space is left in the row. The FeedSelector's pressable wrapper is flexShrink1 (FeedSelector.tsx:48) and its name Text is flexShrink1 + numberOfLines={1} (lines 59-60). So as the window narrows, the free space runs out, the selector shrinks to fill the row, and the name ends up flush against the Issue card button. Nothing on the row enforces a minimum spacing, so it drops to ~0.

This only shows up in the side-by-side state. The horizontal row is active when (!shouldChangeLayout || isInLandscapeMode), and shouldChangeLayout = isMediumScreenWidth || shouldUseNarrowLayout. Below the medium breakpoint the conditional flips off and the buttons stack onto their own line, which is why the bug appears when resizing down toward — but not yet hitting — medium, and disappears once you cross it. Worth noting the headerButtonsRowStyle array (lines 194-199) does carry a gap2, but that is the spacing between the Issue card and More buttons, not between the FeedSelector and the button group, so it doesn't help here.

The cleanest evidence this is the right layer: the sibling Company Cards header renders the same FeedSelector-left / buttons-right row and does not have this bug, because its container already reserves a styles.gap5 (WorkspaceCompanyCardsTableHeaderButtons.tsx:129-136). The two card pages just got out of sync on this one style.

What changes do you think we should make in order to solve the problem?

Reserve a minimum horizontal gap on the row, inside the existing row-only conditional so the stacked layout is untouched:

(!shouldChangeLayout || isInLandscapeMode) && [styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween, styles.gap5]

The gap is honored before justifyContentBetween distributes any leftover space, so the name and buttons always keep a minimum separation while the FeedSelector's flexShrink1 still lets the name truncate into whatever room remains. I'd match the Company Cards header's styles.gap5 (20px) here so the two card pages line up on the same value rather than picking a new one. Because the change sits inside the (!shouldChangeLayout || isInLandscapeMode) branch, the medium/narrow stacked layout and every other consumer of getHeaderButtons() are unaffected — zero blast radius.

This is a flex/CSS value, so it's not something a Jest test can meaningfully assert (RNTL can't measure rendered gap at a viewport width). I'll verify it visually on web by resizing through the large → medium range and capturing screenshots at a few widths.

What alternative solutions did you explore? (Optional)

Adding a right margin (mr*) or padding to the FeedSelector wrapper instead. It works, but it bakes the spacing into the shrinking child rather than the row, leaves stray spacing if the button side ever stops rendering, and diverges from how the Company Cards header solves the identical layout. A container gap is the symmetric fix that holds at every width.

A global change in Header.tsx / HeaderWithBackButton was also a non-starter: this row isn't a HeaderWithBackButton (the cramped element is the FeedSelector, which only renders when a feed exists), and a header-wide change would touch every consumer for a bug that lives on one page.

[MobileMage]

🚨 Edited by proposal-police: This proposal was edited at 2026-06-30 16:04:07 UTC.

Proposal

Please re-state the problem that we are trying to solve in this issue.

On the Workspace > Expensify Card page, the row that shows the card feed name ("Expensify Card") on the left and the "Issue card" / "More" buttons on the right has no guaranteed spacing between them.

• When the browser window is narrowed (but still wide enough to keep both on the same line), the gap between the card name and the Issue card button collapses to almost nothing.
• When the screen width hits the "medium" (tablet) breakpoint, the elements stack vertically but have zero vertical space between them, looking cramped.

What is the root cause of that problem?

The feed name and the action buttons are laid out inside a single flex container in WorkspaceExpensifyCardListPage.

App/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx

Lines 294 to 304 in 371c63d

	{shouldShowSelector && (
	<View style={[styles.w100, styles.ph5, styles.pb3, (!shouldChangeLayout || isInLandscapeMode) && [styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween]]}>
	<FeedSelector
	wrapperStyle={isInLandscapeMode ? styles.flex1 : undefined}
	onFeedSelect={() => Navigation.navigate(createDynamicRoute(DYNAMIC_ROUTES.WORKSPACE_EXPENSIFY_CARD_SELECT_FEED.path))}
	CardFeedIcon={cardFeedIcon}
	feedName={translate('workspace.common.expensifyCard')}
	supportingText={getExpensifyCardFeedDescription(cardSettings, allPolicies, domains, fundID, cardList)}
	/>
	{isBankAccountVerified && (canWriteExpensifyCard || secondaryActions.length > 0 || !isCardListEmpty) && getHeaderButtons()}
	</View>

There are two distinct layout issues going on here:

1. Horizontal collapse on wide screens: The row uses justifyContentBetween but has no gap. With justifyContent: 'space-between', the visible gap between the two children only exists as long as there is leftover free space. As the window narrows, the FeedSelector (which is flexShrink1) consumes available space. Once it fills the row, space-between has no free space to distribute, and the elements touch horizontally.
2. Vertical collapse on medium screens: When the screen hits the isMediumScreenWidth breakpoint, the layout automatically drops flexRow and stacks the elements vertically. However, the top margin intended to separate them vertically (shouldShowSelector && shouldDisplayButtonsInSeparateLine && styles.mt3) relies on shouldDisplayButtonsInSeparateLine, which is only true on narrow (mobile) screens, not medium screens. Because there's no vertical margin applied and no gap on the container, the elements touch vertically.

What changes do you think we should make in order to solve the problem?

We can elegantly fix both issues by applying a universal gap to the parent container, which works in both flex directions (horizontal and vertical).

1. Add styles.gap3 as a permanent style to the parent View wrapping the selector and the buttons:

                    style={[
                        styles.w100,
                        styles.ph5,
                        styles.pb3,
                        styles.gap3, // Add gap3 here universally
                        (!shouldChangeLayout || isInLandscapeMode) && [styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween],
                    ]}

2. Remove the conditional marginTop logic from the action buttons themselves in getHeaderButtons:

        const headerButtonsRowStyle = [
            styles.flexRow,
            styles.gap2,
            !shouldShowSelector && shouldDisplayButtonsInSeparateLine && styles.mb3,
            // REMOVE: shouldShowSelector && shouldDisplayButtonsInSeparateLine && styles.mt3,
        ];

Because React Native flexbox gap works in both directions, it solves both problems at once:

• Wide Screens (row): It acts as a minimum horizontal gap so the items never touch when they shrink.
• Medium & Narrow Screens (stacked): It acts as a vertical gap, applying exactly 12px of space between the Feed Selector and the buttons without needing brittle conditional margins.

What alternative solutions did you explore? (Optional)

We could have fixed the medium screen issue by changing the condition for styles.mt3 to include medium screens, and fixed the horizontal issue by adding styles.gap3 conditionally just for the flexRow. However, leveraging a universal flex gap is much cleaner since it handles both layout directions gracefully and lets us delete the confusing conditional margin code entirely.

[yusufdeveloper2903]

Proposal

What is the root cause of that problem?

On the Workspace > Expensify Card page, when there is at least one Expensify Card feed we render the feed-selector header row that holds the card-feed name label on the left and the Issue card/More buttons on the right:

App/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx

Lines 294 to 305 in 0d736c7

	{shouldShowSelector && (
	<View style={[styles.w100, styles.ph5, styles.pb3, (!shouldChangeLayout || isInLandscapeMode) && [styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween]]}>
	<FeedSelector
	wrapperStyle={isInLandscapeMode ? styles.flex1 : undefined}
	onFeedSelect={() => Navigation.navigate(createDynamicRoute(DYNAMIC_ROUTES.WORKSPACE_EXPENSIFY_CARD_SELECT_FEED.path))}
	CardFeedIcon={cardFeedIcon}
	feedName={translate('workspace.common.expensifyCard')}
	supportingText={getExpensifyCardFeedDescription(cardSettings, allPolicies, domains, fundID, cardList)}
	/>
	{isBankAccountVerified && (canWriteExpensifyCard || secondaryActions.length > 0 || !isCardListEmpty) && getHeaderButtons()}
	</View>
	)}

In the wide/landscape layout this container is laid out as [styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween] — but it has no gap between its two children:

App/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx

Line 295 in 0d736c7

<View style={[styles.w100, styles.ph5, styles.pb3, (!shouldChangeLayout || isInLandscapeMode) && [styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween]]}>

The FeedSelector on the left is flexShrink1, so it shrinks to make room for the buttons as the row narrows (the feed-name Text is also flexShrink1 + numberOfLines={1}):

App/src/components/FeedSelector.tsx

Lines 46 to 60 in 0d736c7

	<PressableWithFeedback
	onPress={onFeedSelect}
	wrapperStyle={[styles.flexShrink1, wrapperStyle]}
	style={[styles.flexRow, styles.alignItemsCenter, styles.gap3]}
	accessibilityLabel={feedName ?? ''}
	sentryLabel="FeedSelector"
	>
	{CardFeedIcon}
	<View style={styles.flex1}>
	<View style={[styles.flexRow, styles.gap1, styles.alignItemsCenter]}>
	<CaretWrapper>
	<Text
	numberOfLines={1}
	style={[styles.textStrong, styles.flexShrink1]}

justifyContentBetween only distributes the free space in the row. While the window is wide there is plenty of free space, so the label and the buttons look well separated. As the window narrows, the free space disappears, the FeedSelector shrinks right up against the Issue card button, and because there is no minimum gap reserved between them the spacing collapses to ~0 — the cramped UI in the report.

The sibling Company Cards header renders the exact same FeedSelector-on-the-left / buttons-on-the-right row, and it does not have this problem because its container reserves a styles.gap5 between the two sides:

App/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableHeaderButtons.tsx

Lines 129 to 136 in 0d736c7

	<View
	style={[
	styles.w100,
	styles.ph5,
	styles.gap5,
	styles.pb2,
	!shouldShowNarrowLayout && [styles.flexColumn, styles.pv2, styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween],
	]}

So: narrow window → no free space for justifyContentBetween to distribute → FeedSelector shrinks flush against the buttons → no minimum gap is reserved → insufficient spacing between the card name label and the Issue card button.

What changes do you think we should make in order to solve the problem?

Reserve a minimum horizontal gap on the header row, exactly like the working Company Cards header already does with styles.gap5. The fix is one style addition to the conditional row array at WorkspaceExpensifyCardListPage.tsx#L295:

- <View style={[styles.w100, styles.ph5, styles.pb3, (!shouldChangeLayout || isInLandscapeMode) && [styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween]]}>
+ <View style={[styles.w100, styles.ph5, styles.pb3, (!shouldChangeLayout || isInLandscapeMode) && [styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween, styles.gap5]]}>

gap reserves a guaranteed spacing between the two children before justifyContentBetween distributes any remaining free space, so the label and buttons stay separated at every window width while the FeedSelector’s flexShrink1 still lets the label truncate as needed. Placing it inside the existing row-only conditional means the stacked (narrow, non-landscape) layout is untouched — zero regression. This mirrors the proven sibling pattern (styles.gap5) so spacing is consistent across both card pages.

What alternative solutions did you explore? (Optional)

Adding a fixed styles.mr*/styles.pr* to the FeedSelector wrapper. It works, but it bakes spacing into one child instead of the row, doesn’t match how the Company Cards header solves the same problem, and is less robust if the button side changes — gap5 on the shared container is the cleaner, consistent fix. Minor refinements (exact gap size) can be discussed in the PR phase.

[lorretheboy]

Note: This isn't a duplicate — the proposal it was flagged against was posted before the Help Wanted label (2026-06-30T15:22:05Z, before 2026-06-30T15:22:06Z), so it isn't a valid earlier proposal.

Proposal

What is the root cause of that problem?

On the Expensify Card page, when a feed selector is shown, the FeedSelector (card name + description) and the header buttons are laid out side‑by‑side in a flexRow whose only horizontal separation comes from justifyContentBetween — the row defines no gap:

App/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx

Lines 294 to 304 in 371c63d

	{shouldShowSelector && (
	<View style={[styles.w100, styles.ph5, styles.pb3, (!shouldChangeLayout || isInLandscapeMode) && [styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween]]}>
	<FeedSelector
	wrapperStyle={isInLandscapeMode ? styles.flex1 : undefined}
	onFeedSelect={() => Navigation.navigate(createDynamicRoute(DYNAMIC_ROUTES.WORKSPACE_EXPENSIFY_CARD_SELECT_FEED.path))}
	CardFeedIcon={cardFeedIcon}
	feedName={translate('workspace.common.expensifyCard')}
	supportingText={getExpensifyCardFeedDescription(cardSettings, allPolicies, domains, fundID, cardList)}
	/>
	{isBankAccountVerified && (canWriteExpensifyCard || secondaryActions.length > 0 || !isCardListEmpty) && getHeaderButtons()}
	</View>

justifyContentBetween only produces space when there is free room in the row. The FeedSelector is flexShrink1 (it can shrink but otherwise grows to its natural content width, and its supporting description text can be long):

App/src/components/FeedSelector.tsx

Lines 46 to 48 in 371c63d

	<PressableWithFeedback
	onPress={onFeedSelect}
	wrapperStyle={[styles.flexShrink1, wrapperStyle]}

So as the window narrows, the selector consumes the remaining free space → justifyContentBetween has nothing left to distribute → the card name label ends up directly against the Issue card button with no guaranteed minimum spacing.

What changes do you think we should make in order to solve the problem?

Add an explicit horizontal gap to the row container that holds the FeedSelector and the header buttons, so a minimum spacing is always preserved regardless of window width. In the wrapping View:

App/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx

Line 295 in 371c63d

<View style={[styles.w100, styles.ph5, styles.pb3, (!shouldChangeLayout || isInLandscapeMode) && [styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween]]}>

include styles.gap2 (or gap4) in the same conditional branch that applies flexRow/justifyContentBetween. A gap is honored even when the row is full, guaranteeing the buttons never touch the label.

What alternative solutions did you explore? (Optional)

Add a right margin (e.g. styles.mr2) to the FeedSelector wrapper, or wrap the buttons with styles.flexShrink0 plus left margin. These work but the gap on the shared row is the cleaner single fix and avoids touching the reusable FeedSelector.

[KJ21-ENG]

🚨 Edited by proposal-police: This proposal was edited at 2026-06-30 15:35:10 UTC.

Proposal

What is the root cause of that problem?

The Expensify Card page uses one responsive condition to decide when the feed selector and header buttons should stop sharing a horizontal row: shouldChangeLayout is true for medium-width web and narrow layouts. In that stacked state, the FeedSelector renders first and getHeaderButtons() renders immediately after it.

App/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx

Lines 86 to 88 in 371c63d

	const shouldChangeLayout = isMediumScreenWidth || shouldUseNarrowLayout;
	const {windowHeight} = useWindowDimensions();
	const shouldDisplayButtonsInSeparateLine = useShouldDisplayButtonsInSeparateLine();

App/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx

Lines 295 to 303 in 371c63d

	<View style={[styles.w100, styles.ph5, styles.pb3, (!shouldChangeLayout || isInLandscapeMode) && [styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween]]}>
	<FeedSelector
	wrapperStyle={isInLandscapeMode ? styles.flex1 : undefined}
	onFeedSelect={() => Navigation.navigate(createDynamicRoute(DYNAMIC_ROUTES.WORKSPACE_EXPENSIFY_CARD_SELECT_FEED.path))}
	CardFeedIcon={cardFeedIcon}
	feedName={translate('workspace.common.expensifyCard')}
	supportingText={getExpensifyCardFeedDescription(cardSettings, allPolicies, domains, fundID, cardList)}
	/>
	{isBankAccountVerified && (canWriteExpensifyCard || secondaryActions.length > 0 || !isCardListEmpty) && getHeaderButtons()}

The spacing for that returned button row is controlled by a different condition. headerButtonsRowStyle only adds the selector top margin when shouldDisplayButtonsInSeparateLine is true, but that hook only returns true for narrow portrait layouts.

App/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx

Lines 194 to 198 in 371c63d

	const headerButtonsRowStyle = [
	styles.flexRow,
	styles.gap2,
	!shouldShowSelector && shouldDisplayButtonsInSeparateLine && styles.mb3,
	shouldShowSelector && shouldDisplayButtonsInSeparateLine && styles.mt3,

App/src/hooks/useShouldDisplayButtonsInSeparateLine.ts

Lines 7 to 9 in 371c63d

	function useShouldDisplayButtonsInSeparateLine() {
	const {shouldUseNarrowLayout, isInLandscapeMode} = useResponsiveLayout();
	return shouldUseNarrowLayout && !isInLandscapeMode;

Medium-width web is a separate responsive state between the mobile and tablet breakpoints, so the selector/buttons can stack while shouldDisplayButtonsInSeparateLine is still false. That leaves no intended vertical gap between the card name area and the Issue card button at the resized desktop widths shown in the issue media.

App/src/hooks/useResponsiveLayout/index.ts

Lines 32 to 33 in 371c63d

	const isSmallScreenWidth = windowWidth <= variables.mobileResponsiveWidthBreakpoint;
	const isMediumScreenWidth = windowWidth > variables.mobileResponsiveWidthBreakpoint && windowWidth <= variables.tabletResponsiveWidthBreakpoint;

App/src/styles/variables.ts

Lines 104 to 105 in 371c63d

	mobileResponsiveWidthBreakpoint: 800,
	tabletResponsiveWidthBreakpoint: 1024,

What changes do you think we should make in order to solve the problem?

In WorkspaceExpensifyCardListPage, add a page-local boolean for the feed selector/header-button stack state, based on the same condition that makes the selector section stop using the wide row layout. For example, derive something like shouldStackFeedSelectorAndButtons from shouldShowSelector, shouldChangeLayout, and !isInLandscapeMode.

Use that stack-state boolean for the selector path spacing instead of relying only on shouldDisplayButtonsInSeparateLine. Concretely, when the feed selector and getHeaderButtons() are stacked, add the existing top margin or an equivalent parent gap between them. If the Issue card and Settings controls should stretch in that stacked selector layout, use the same boolean for their flex styles too.

Keep the existing shouldDisplayButtonsInSeparateLine behavior for the no-selector HeaderWithBackButton path, and keep the current large-width row layout unchanged. This fixes the cramped medium-width desktop layout without changing unrelated headers that use the generic hook.

Test coverage: Manually verify Workspace > Expensify Card on web with a verified bank account and at least one card at large desktop width, medium resized width around 801-1024px, and narrow portrait width. Confirm the feed/card name area and Issue card button keep visible spacing in the stacked layout, while the large-width row still lays out correctly. If a component test is practical for this page, mock useResponsiveLayout() with isMediumScreenWidth: true and shouldUseNarrowLayout: false, then assert the selector/action stack receives the spacing condition.

What alternative solutions did you explore? (Optional)

We could update useShouldDisplayButtonsInSeparateLine() to return true for medium-width web globally, but that hook is shared by unrelated workspace and money request headers. A page-local stack condition is safer because this bug comes from the Expensify Card page using one condition to stack the selector and another condition to space the buttons.

[abbasifaizan70]

Proposal

Please re-state the problem that we are trying to solve in this issue.

When viewing Workspace > Expensify Card with multiple card feeds (causing the feed selector to appear), and the browser window is resized to a narrower-but-still-wide width, the gap between the Card name label (inside the FeedSelector) and the "Issue card" button shrinks until they appear cramped with insufficient spacing.

What is the root cause of that problem?

The container that holds the FeedSelector and the header buttons uses flexRow + justifyContentBetween whenever the layout is "wide" (!shouldChangeLayout, i.e., not narrow and not medium width) OR in landscape mode. However, the FeedSelector only receives flex1 via wrapperStyle when isInLandscapeMode is true — the non-landscape wide layout case is left out.

The outer container applies flexRow + justifyContentBetween when !shouldChangeLayout || isInLandscapeMode, but the FeedSelector is only given flex1 for the isInLandscapeMode half of that condition:

App/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx

Lines 295 to 304 in a9199d6

	<View style={[styles.w100, styles.ph5, styles.pb3, (!shouldChangeLayout || isInLandscapeMode) && [styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween]]}>
	<FeedSelector
	wrapperStyle={isInLandscapeMode ? styles.flex1 : undefined}
	onFeedSelect={() => Navigation.navigate(createDynamicRoute(DYNAMIC_ROUTES.WORKSPACE_EXPENSIFY_CARD_SELECT_FEED.path))}
	CardFeedIcon={cardFeedIcon}
	feedName={translate('workspace.common.expensifyCard')}
	supportingText={getExpensifyCardFeedDescription(cardSettings, allPolicies, domains, fundID, cardList)}
	/>
	{isBankAccountVerified && (canWriteExpensifyCard || secondaryActions.length > 0 || !isCardListEmpty) && getHeaderButtons()}
	</View>

Without flex1, the FeedSelector wrapper relies solely on its internal flexShrink1 (set inside FeedSelector.tsx at line 48). In a flexRow + justifyContentBetween parent, flexShrink1 means the selector only occupies the space its content needs and shrinks as the window narrows — instead of growing to fill available space and maintaining a stable gap before the button. As the window gets narrower (while still in "wide" layout mode), the card name and the Issue card button are pushed progressively closer together.

The internal wrapperStyle application in FeedSelector confirms the flex behaviour:

App/src/components/FeedSelector.tsx

Lines 46 to 51 in a9199d6

	<PressableWithFeedback
	onPress={onFeedSelect}
	wrapperStyle={[styles.flexShrink1, wrapperStyle]}
	style={[styles.flexRow, styles.alignItemsCenter, styles.gap3]}
	accessibilityLabel={feedName ?? ''}
	sentryLabel="FeedSelector"

flexShrink1 without a corresponding flex1 or flexGrow1 means the element shrinks freely but never expands to fill space, causing the spacing problem on wide-but-narrowing windows.

What changes do you think we should make in order to solve the problem?

Extend the flex1 condition on the FeedSelector's wrapperStyle to match the outer View's flexRow condition. Currently only isInLandscapeMode triggers flex1; it should be !shouldChangeLayout || isInLandscapeMode — the same predicate used by the parent to enter row layout:

App/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx

Line 297 in a9199d6

wrapperStyle={isInLandscapeMode ? styles.flex1 : undefined}

wrapperStyle={(!shouldChangeLayout || isInLandscapeMode) ? styles.flex1 : undefined}

This ensures that whenever the container is in flexRow mode (both wide desktop and landscape), the FeedSelector fills the available horizontal space and keeps the Issue card button consistently separated to the right edge.

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @rojiphil (External)

[kitvasyl]

Proposal

Please re-state the problem that we are trying to solve in this issue.

When the Expensify Card page is resized to a narrower desktop width, the Issue card button is displayed too close to the Card name table header.

What is the root cause of that problem?

In src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx, the Issue card button switches to the shouldDisplayButtonsInSeparateLine layout and receives styles.flex1, but that responsive branch does not add sufficient bottom spacing before the card-list header rendered below it.

What changes do you think we should make in order to solve the problem?

Update the Issue card action container in WorkspaceExpensifyCardListPage to apply an appropriate bottom margin when shouldDisplayButtonsInSeparateLine is true. This will preserve the existing wide-screen layout while maintaining consistent separation from the Card name header after resizing.

What alternative solutions did you explore? (Optional)

Adding spacing to WorkspaceCardListHeader would also separate the elements, but it would affect the table header in every layout. Scoping the margin to the responsive action-row branch keeps the change limited to the failing state.