Taxes - Taxes dropdown button has lesser width compared to tags/categories/distance rates

[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: 1.4.68-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: #40278
Email or phone of affected tester (no customers): kiatest.80+81@gmail.com
Logs: https://stackoverflow.com/c/expensify/questions/4856
Issue reported by: Applause-internal team

Action Performed:

Precondition : Workspace enabled with all features - Categories, tags, distance rates & taxes

1. Go to Workspace settings
2. Select Taxes option
3. Select rows of data using the check boxes on the left side of the row (Note: Dropdown button has lesser width, not displayed for full width)
4. Go back to settings page
5. Select either Categories, Tags or Distance rates option
6. Select rows of data using the check boxes on the left side of the row (Note: Dropdown button display for full width)

Expected Result:

Taxes dropdown buttons should have full width as similar to categories, tags & distance rates options

Actual Result:

Taxes dropdown button has lesser width when compared to tags/categories/distance rates

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

Bug6466166_1714448285730.RPReplay_Final1714448269.mp4

View all open jobs on GitHub

[melvin-bot]

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

[izarutskaya]

We think this issue might be related to the #collect project.

[ShridharGoel]

Proposal

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

Taxes dropdown button has lesser width compared to tags/categories/distance rates

What is the root cause of that problem?

WorkspaceTaxesPage uses isSmallScreenWidth && styles.w50 while others use isSmallScreenWidth && styles.flexGrow1.

This can be seen below:

App/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx

Line 235 in e0c12a5

style={[isSmallScreenWidth && styles.w50, isSmallScreenWidth && styles.mb3]}

App/src/pages/workspace/tags/WorkspaceTagsPage.tsx

Line 229 in e0c12a5

style={[isSmallScreenWidth && styles.flexGrow1, isSmallScreenWidth && styles.mb3]}

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

Change style in ButtonWithDropdownMenu of WorkspaceTaxesPage it to the below:

style={[isSmallScreenWidth && styles.flexGrow1, isSmallScreenWidth && styles.mb3]}

[laurenreidexpensify]

@Expensify/design any thoughts here?

[shawnborton]

Yeah, that should be full width like the other pages. cc @luacmartins should we treat this as some kind of regression?

[luacmartins]

No, I noticed that this button was using a different style. Put up a PR with a fix - #41421

[shawnborton]

Awesome, thanks Carlos!