[$250] Reports - The `Add expense` button in the create report empty state feels unnecessarily wide

[izarutskaya]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.3.17-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
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: @shawnborton
Slack conversation (hyperlinked to channel name):

Action Performed:

Prerequisites: Account with workspace

1. Go to https://staging.new.expensify.com/
2. Create empty report
3. Go to Reports page > open empty report

Expected Result:

It could just hug the contents.

Actual Result:

The Add expense button feels unnecessarily wide.

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

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @Valforte

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022021547886332387735
• Upwork Job ID: 2021547886332387735
• Last Price Increase: 2026-02-11

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @johncschuster (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~022021547886332387735

[PiyushChandra17]

🚨 Edited by proposal-police: This proposal was edited at 2026-02-11 11:54:31 UTC.

Proposal

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

Reports - The Add expense button in the create report empty state feels unnecessarily wide

What is the root cause of that problem?

In EmptyStateComponent,

The button is styled with styles.flex1, which causes it to expand to fill the available width. This is by design to support multiple buttons in a row (where flex1 distributes space evenly), but when there's only one button, it appears unnecessarily wide

App/src/components/MoneyRequestReportView/SearchMoneyRequestReportEmptyState.tsx

Lines 84 to 101 in 54bc913

	<View style={styles.flex1}>
	<EmptyStateComponent
	cardStyles={[styles.appBG]}
	cardContentStyles={[styles.pt5, styles.pb0]}
	headerMediaType={CONST.EMPTY_STATE_MEDIA.ANIMATION}
	headerMedia={LottieAnimations.GenericEmptyState}
	title={translate('search.moneyRequestReport.emptyStateTitle')}
	headerStyles={[styles.emptyStateMoneyRequestReport]}
	lottieWebViewStyles={styles.emptyStateFolderWebStyles}
	headerContentStyles={styles.emptyStateFolderWebStyles}
	minModalHeight={minModalHeight}
	buttons={
	canAddTransactionToReport
	? [{buttonText: translate('iou.addExpense'), buttonAction: () => {}, success: true, isDisabled: false, dropDownOptions: addExpenseDropdownOptions}]
	: []
	}
	/>
	</View>

App/src/components/EmptyStateComponent/index.tsx

Lines 115 to 140 in 54bc913

	<View style={[styles.gap2, styles.mt5, !shouldUseNarrowLayout ? styles.flexRow : styles.flexColumn, styles.justifyContentCenter]}>
	{buttons?.map(({buttonText, buttonAction, success, icon, isDisabled, style, dropDownOptions}) =>
	dropDownOptions ? (
	<ButtonWithDropdownMenu
	key={buttonText}
	onPress={() => {}}
	shouldAlwaysShowDropdownMenu
	customText={buttonText}
	options={dropDownOptions}
	isSplitButton={false}
	style={[styles.flex1, style]}
	/>
	) : (
	<Button
	key={buttonText}
	success={success}
	onPress={buttonAction}
	text={buttonText}
	icon={icon}
	large
	isDisabled={isDisabled}
	style={[styles.flex1, style]}
	/>
	),
	)}
	</View>

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

1. Only apply flex1 when there are multiple buttons - This would make single buttons auto-sized
2. Add a max-width constraint for single buttons
3. Center align single buttons with intrinsic width instead of stretching them

What alternative solutions did you explore? (Optional)

Result:

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[nkdengineer]

Proposal

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

The Add expense button feels unnecessarily wide.

What is the root cause of that problem?

The padding is small, so the button takes the full width

App/src/components/MoneyRequestReportView/SearchMoneyRequestReportEmptyState.tsx

Line 87 in 05d6c18

cardContentStyles={[styles.pt5, styles.pb0]}

App/src/components/EmptyStateComponent/index.tsx

Line 102 in 05d6c18

<View style={[shouldUseNarrowLayout ? styles.p5 : styles.p8, cardContentStyles]}>

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

Pass more padding to cardContentStyles. For example, styles.p10, we can adjust based on the suggestion from design team.

cardContentStyles={[styles.pt5, styles.pb0, styles.p10]}

App/src/components/MoneyRequestReportView/SearchMoneyRequestReportEmptyState.tsx

Line 87 in 05d6c18

cardContentStyles={[styles.pt5, styles.pb0]}

What alternative solutions did you explore? (Optional)

We can add more padding by passing style for button array here

App/src/components/MoneyRequestReportView/SearchMoneyRequestReportEmptyState.tsx

Line 97 in 05d6c18

? [{buttonText: translate('iou.addExpense'), buttonAction: () => {}, success: true, isDisabled: false, dropDownOptions: addExpenseDropdownOptions}]

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[yatin-italy]

Proposal

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

In the create-report empty state, the “Add expense” button stretches to full width and looks too wide, but it should size to its content.

What is the root cause of that problem?

In this implementation, src/components/EmptyStateComponent/index.tsx assumes every empty-state button should always use styles.flex1, and this forces buttons to expand to fill available width by default in the buttons?.map() rendering logic.

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

Place of change: src/components/EmptyStateComponent/index.tsx (owner of empty-state layout).

Behavior: Buttons size to their content unless the caller passes a style that overrides this (for example, style={styles.flex1} for full-width).

Implementation: Remove the default styles.flex1 from both button branches in the buttons?.map() callback.

Code changes:

ButtonWithDropdownMenu (around line 124): change style={[styles.flex1, style]} to style={style}.

Button (around line 134): change style={[styles.flex1, style]} to style={style}.

Rationale:

Fixing this in EmptyStateComponent keeps a single invariant for all empty states and avoids per-caller workarounds.

The parent uses styles.justifyContentCenter, so removing flex1 still centers buttons.

EmptyStateButton supports style, so callers that need full-width buttons can pass style={styles.flex1}.

Risk and regression:

Only the layout of empty-state buttons changes.

Callers needing full-width buttons can pass style={styles.flex1}.

Affected areas: all empty states that use EmptyStateComponent (Add Unreported Expense, workspace tags/categories/per diem, Expensify Card, Search, etc.). Most should benefit from content-sized buttons.

What alternative solutions did you explore? (Optional)

Fixing only in SearchMoneyRequestReportEmptyState (for example, passing style to override flex1) would be a caller-side workaround and would not improve other empty states.

Conditionally applying flex1 based on button count would add complexity without clear benefit.

[webbygit]

Proposal

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

The "Add expense" button in the empty report state appears unnecessarily wide. The expected behavior is that the button should "hug the contents" rather than stretching across available space.

What is the root cause of that problem?

File: src/components/EmptyStateComponent/index.tsx
Lines: 125 and 136

The button components use styles.flex1 which causes them to expand to fill available width. While this is correct for multiple buttons (they should share space equally), a single button stretches unnecessarily.

Current code:

ButtonWithDropdownMenu (line 125):

style={[styles.flex1, style]}

Button (line 136):

style={[styles.flex1, style]}

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

Add styles.alignItemsCenter conditionally only for single buttons. This centers the button content while maintaining proper spacing behavior for multiple buttons.

Implementation

File: src/components/EmptyStateComponent/index.tsx

Change line 125:

style={[styles.flex1, style, buttons.length === 1 && styles.alignItemsCenter]}

Change line 136:

style={[styles.flex1, style, buttons.length === 1 && styles.alignItemsCenter]}

Why This Works

For single button: styles.alignItemsCenter centers content within flex container, making it appear compact
For multiple buttons: No alignItemsCenter applied, so buttons expand to share available space equally

This ensures:

• Single button appears compact and centered
• Multiple buttons continue to fill available space proportionally
• Consistent behavior across both button types

Result

Single button: Appears compact and centered (hugs contents)
Multiple buttons: Share space equally across full width
All layouts: Works on both narrow and wide screens