[$250] Empty state list view does not use 400px as the width of the inner "modal" area

[m-natarajan]

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.0.24-1
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail:
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: https://expensify.slack.com/archives/C049HHMV9SM/p1724433592521089

Action Performed:

1. Go to staging.new.expensify.com
2. Navigate to empty pages in Search or empty pages in the workspace editor like Tags

Expected Result:

Inner modal portion is set to 400px

Actual Result:

Inner modal portion is not set to 400px

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01ddff86d7195f923e
• Upwork Job ID: 1828312045118952549
• Last Price Increase: 2024-08-27

Issue Owner

Current Issue Owner: @mkhutornyi

[melvin-bot]

Triggered auto assignment to @greg-schroeder (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.

[Krishna2323]

Proposal

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

Empty state list view does not use 400px as the width of the inner "modal" area

What is the root cause of that problem?

Only maxWidth property is applied.

App/src/styles/index.ts

Lines 5121 to 5125 in 0c84552

	emptyStateContent: {
	backgroundColor: theme.cardBG,
	borderRadius: variables.componentBorderRadiusLarge,
	maxWidth: 400,
	},

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

• We can remove maxWidth property and use width instead. Or we can apply minWidth: 400 property without removing maxWidth property.
• We can use isMediumScreenWidth or isSmallScreenWidth to only apply 400 width on large sized screens. For small sized screens we can use maxWidth: 400.
• If we only want 400 of width on search page only we can introduce a new prop to override emptyStateContent style or we can use headerStyles props to set the width according to the screen size.

What alternative solutions did you explore? (Optional)

[melvin-bot]

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

[greg-schroeder]

Next up is proposal review

[melvin-bot]

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

[mkhutornyi]

@filip-solecki would you like to work on this as maxWidth value was set from your commit so you have context?