[$250] The dropdown menu is not right-aligned, and the values from the column are not shown

[lanitochka17]

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.1.60-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: #62467
Issue reported by: Applause - Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. Log in with an Expensifail account
3. Create a workspace and enable Tags feature
4. Go to Tags > Import spreadsheet > Single level of tags
5. Select a file with single-level tags

Expected Result:

Dropdown menus are right-aligned, and the values from the column are shown below the column name

Actual Result:

Dropdown menus are not right-aligned, and the values from the column are not shown below the column name, as seen in Web and mWeb.

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
• MacOS: Desktop

Platforms Tested:

On which of our officially supported platforms was this issue tested:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• 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/~021932011675761611577
• Upwork Job ID: 1932011675761611577
• Last Price Increase: 2025-06-30

Issue Owner

Current Issue Owner: @rojiphil

[melvin-bot]

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

[FitseTLT]

cc @allgandalf For a follow up

[MobileMage]

Proposal

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

The ImportColumn component has two visual issues: the dropdown menus are not right-aligned as expected, and the column values are not being displayed below the column name on Web and mobile Web platforms. This affects the user experience when importing spreadsheets with tags, making it difficult to see the actual data in each column and properly align the interface elements.

What is the root cause of that problem?

The root cause involves two separate styling issues in the ImportColumn component:

1. Dropdown alignment: The dropdown menu lacks proper alignment styling to position it on the right side of its container. The current layout uses styles.ml2 (margin-left) but doesn't include right-alignment properties.

2. Column values visibility: The column values string (columnValuesString) is being constructed correctly but may not be displaying due to text styling conflicts or container constraints. The text component showing the values uses styles.flex1 and styles.flexWrap but might be getting truncated or hidden by the layout constraints, particularly the numberOfLines={2} limitation combined with ellipsizeMode="tail".

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

To fix the dropdown alignment issue, we should modify the View wrapper around the ButtonWithDropdownMenu to include right-alignment styles. Instead of just using styles.ml2, we should use existing alignment styles like styles.alignSelfEnd or styles.alignItemsEnd to properly position the dropdown on the right side.

For the column values display issue, we should review the text styling and container constraints. The issue likely stems from the combination of numberOfLines={2}, ellipsizeMode="tail", and the flex properties. We should ensure the text has adequate space to render and consider adjusting the line limit or container styling to make the values more visible.

Both fixes should use existing styles from the theme system rather than creating new custom styles, maintaining consistency with the rest of the application.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

We should add tests that verify the visual layout and content display of the ImportColumn component:

1. Dropdown alignment test: Test that when shouldShowDropdownMenu is true, the dropdown button is positioned on the right side of its container. This can be verified by checking the applied styles include right-alignment properties.

2. Column values display test: Test that the columnValuesString is properly rendered and visible in the text component. This should include scenarios with different amounts of data (short values, long values that would trigger ellipsis, empty columns).

3. Responsive layout test: Test the component layout on different screen sizes to ensure both the dropdown alignment and text display work correctly across Web and mobile Web platforms.

4. Header vs non-header scenarios: Test both cases where containsHeader is true and false to ensure the column values are displayed correctly in both scenarios, since the slicing logic differs between these cases.

What alternative solutions did you explore? (Optional)

An alternative approach would be to restructure the entire layout using a different flex arrangement, such as justifyContent: 'space-between' on the parent container. However, using existing alignment styles is preferable as it maintains consistency with the current design system and requires minimal changes to the existing code structure.

[melvin-bot]

📣 @MobileMage! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[samranahm]

Unable to produce

[flaviadefaria]

I don't have an Android to test this so will add the external label. @allgandalf let us know if you plan to work on this.

[melvin-bot]

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