[Due for payment 2025-10-03] [$250] Import members tab: dropdown is out of frame

[nlemma]

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: v9.2.3-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: #69436
Email or phone of affected tester (no customers): -
Issue reported by: Applause Internal Team
Device used: MacOS Catalina 10.15.7 / Chrome
App Component: Notifications

Action Performed:

Precondition: user has a file with members list. Some members have a long email.

1. Go to Workspace > Members
2. Click on More > Import spreadsheet
3. Choose a file

Expected Result:

On Import members tab, all dropdowns are in frame and aligned

Actual Result:

On Import members tab, email dropdown is out of frame

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6939520_1757417160821.Screen_Recording_2025-09-09_at_14.22.03.mp4

Bug6939520_1757417508574!members.xlsx

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021965490058515611868
• Upwork Job ID: 1965490058515611868
• Last Price Increase: 2025-09-09
• Automatic offers:
• truph01 | Reviewer | 108745649
• mkzie2 | Contributor | 108745651

Issue Owner

Current Issue Owner: @clarajones-expensify

[melvin-bot]

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

[mkzie2]

Proposal

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

On Import members tab, email dropdown is out of frame

What is the root cause of that problem?

The default style of the text is breakWord, then if the email is too long, the dropdown is out of frame

App/src/components/ImportColumn.tsx

Line 195 in 8d943a6

style={[styles.flex1, styles.flexWrap]}

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

We should use the add breakAll style here. Or we can introduce a prop to control this style.

style={[styles.flex1, styles.flexWrap, styles.breakAll]}

App/src/components/ImportColumn.tsx

Line 195 in 8d943a6

style={[styles.flex1, styles.flexWrap]}

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

NA

What alternative solutions did you explore? (Optional)

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.

[ShridharGoel]

Proposal

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

In the workspace "Import members" dialog, when importing members from a spreadsheet with long email addresses, the column mapping dropdown buttons are pushed outside the visible area and get cut off at the right edge of the modal.

What is the root cause of that problem?

The root cause is an improper flex layout in the ImportColumn component. The current layout uses:

• justifyContentBetween which pushes the dropdown to the far right
• flex1 on the email text without proper width constraints
• No maximum width limits on either the text or dropdown containers

When email text is very long, it expands beyond the available space in the modal (which has a fixed width of 375px with ~40px margins, leaving ~335px for content), pushing the dropdown button outside the visible modal bounds.

App/src/components/ImportColumn.tsx

Lines 191 to 218 in 2765fd4

	<View style={[styles.flexRow, styles.alignItemsCenter, styles.mt2, styles.justifyContentBetween, styles.w100]}>
	<Text
	numberOfLines={2}
	ellipsizeMode="tail"
	style={[styles.flex1, styles.flexWrap]}
	>
	{columnValuesString}
	</Text>
	{shouldShowDropdownMenu && (
	<View style={styles.ml2}>
	<ButtonWithDropdownMenu
	onPress={() => {}}
	buttonSize={CONST.DROPDOWN_BUTTON_SIZE.SMALL}
	shouldShowSelectedItemCheck
	menuHeaderText={columnHeader}
	isSplitButton={false}
	onOptionSelected={(option) => {
	setColumnName(columnIndex, option.value);
	}}
	defaultSelectedIndex={finalIndex}
	options={options}
	success={false}
	/>
	</View>
	)}
	</View>
	</View>

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

Modify the layout in ImportColumn.tsx:

1. Let the text container be flexible (flex: 1) and truncate with numberOfLines={2} and ellipsizeMode="tail".
2. Give the dropdown container a fixed width of 92px and flexShrink: 0 to prevent it from shrinking.
3. Keep some right padding on the text container (e.g., pr3) for separation.
4. Add a minWidth: 92 (and/or width: 92) on the dropdown wrapper to be explicit.

Updated code:

<View style={[styles.flexRow, styles.alignItemsCenter, styles.mt2, styles.justifyContentBetween, styles.w100]}>
    <View style={[styles.flex1, styles.pr3, styles.mw100]}>
        <Text
            numberOfLines={2}
            ellipsizeMode="tail"
            style={[styles.flex1, styles.flexWrap]}
        >
            {columnValuesString}
        </Text>
    </View>

    {shouldShowDropdownMenu && (
        <View style={[{width: 92, minWidth: 92, flexShrink: 0}]}>
            <ButtonWithDropdownMenu
                onPress={() => {}}
                buttonSize={CONST.DROPDOWN_BUTTON_SIZE.SMALL}
                shouldShowSelectedItemCheck
                menuHeaderText={columnHeader}
                isSplitButton={false}
                onOptionSelected={(option) => {
                    setColumnName(columnIndex, option.value);
                }}
                defaultSelectedIndex={finalIndex}
                options={options}
                success={false}
                style={[styles.w100]}
            />
        </View>
    )}
</View>

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

N/A

[dmkt9]

Proposal

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

On Import members tab, email dropdown is out of frame

What is the root cause of that problem?

A Text component with long content and the flex1 style will always try to expand as much as possible:

App/src/components/ImportColumn.tsx

Lines 192 to 198 in 32cf88b

	<Text
	numberOfLines={2}
	ellipsizeMode="tail"
	style={[styles.flex1, styles.flexWrap]}
	>
	{columnValuesString}
	</Text>

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

Add styles.mnw0 to the Text component so the app knows it can shrink the Text when necessary:

App/src/components/ImportColumn.tsx

Line 195 in 32cf88b

style={[styles.flex1, styles.flexWrap]}

style={[styles.flex1, styles.flexWrap, styles.mnw0]}

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

NA

What alternative solutions did you explore? (Optional)

NA

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.

[melvin-bot]

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

[melvin-bot]

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

[marufsharifi]

Proposal

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

Import members tab: dropdown is out of frame

What is the root cause of that problem?

The <Text> component, styled with flex1 and flexWrap, acts as a flex item in a row with justifyContentBetween. By default, flex items in React Native (and CSS flexbox) have a minWidth: 'auto', which bases the minimum width on the content's intrinsic size. For long, unbreakable strings (e.g., a lengthy email), this prevents the <Text> from shrinking below its content width, even with flexShrink: 1 (the default). Consequently, it overflows the available space, displacing the sibling dropdown element. The numberOfLines={2} and ellipsizeMode="tail" properties are intended to handle truncation, but they only activate effectively when the component's width is constrained enough to trigger overflow— which doesn't happen without overriding the min-width behavior.

App/src/components/ImportColumn.tsx

Lines 192 to 198 in 32cf88b

	<Text
	numberOfLines={2}
	ellipsizeMode="tail"
	style={[styles.flex1, styles.flexWrap]}
	>
	{columnValuesString}
	</Text>

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

To address this idiomatically without hard-coded percentages or word-breaking (which can harm email readability), wrap the <Text> in a new <View> container that handles the flex behavior. Apply flex1 and {minWidth: 0} to this <View> to allow it to shrink below its content's intrinsic width, enabling natural flex distribution.

Updated code

    <View style={[styles.flex1, {minWidth: 0}]}>
        <Text
            numberOfLines={2}
            ellipsizeMode="tail"
            style={[styles.w100, styles.flexWrap]}
        >
            {columnValuesString}
        </Text>
    </View>

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

None

What alternative solutions did you explore? (Optional)

[PiyushChandra17]

Proposal

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

Import members tab: dropdown is out of frame

What is the root cause of that problem?

Styling issue while rendering ImportColumn component in web

App/src/components/ImportSpreadsheetColumns.tsx

Line 94 in 247c2ce

<ImportColumn

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

1. We should add styles.overflowHidden or styles.breakAll here
2. In order to match equal width of all button, change the styles here

App/src/components/ImportColumn.tsx

Line 201 in 712e38e

<View style={styles.ml2}>

<View style={[styles.ml2, {width: 92, minWidth: 92}]}>

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

n/A

What alternative solutions did you explore? (Optional)

n/A

Result

Before

After

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.