[$250] Web - LHN -"Concierge" chat name is cutted by trial banner when changing language to spanish

[jponikarchuk]

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.72-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: #63730
Email or phone of affected tester (no customers): ibellicotest+1183@gmail.com
Issue reported by: Applause Internal Team
Device used: Windows 10 / Chrome
App Component: Left Hand Navigation (LHN)

Action Performed:

1. Open the staging.new.expensify.com website.
2. Sign up with a new account.
3. During onboarding, select "Track and budget expenses" option.
4. Create the first workspace while on onboarding.
5. Once redirected to inbox, note that a "Trial: 30 days left" banner is displayed on Concierge chat.
6. Navigate to "Account" and select "Preferences"
7. Change language to "Español" (Spanish)
8. Navigate to "Inbox" again.
9. Note that now, the trial banner, overlaps the word "Concierge" in Concierge chat. Only the letter C is visible.

Expected Result:

Concierge chat name, should be completelly visible, when the language is changed to spanish and the 30 days trial banner gets bigger.

Actual Result:

When language is changed to spanish, Concierge chat name gets overlapped by the 30 days trial banner. Only the letter C can still be seen on chat´s name.

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

1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021939530188164241548
• Upwork Job ID: 1939530188164241548
• Last Price Increase: 2025-06-30
• Automatic offers:
• thelullabyy | Contributor | 107913893

Issue Owner

Current Issue Owner: @mjasikowski

[melvin-bot]

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

[samranahm]

Proposal

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

Web - LHN -"Concierge" chat name is cutted by trial banner when changing language to spanish

What is the root cause of that problem?

When we change the translation to spanish or other local the free trial badhe text is large that make the badge too wide leading to push the reportName

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

We should add max width 60 or another variable for LHN so that badge does not break the styling of report name

App/src/components/LHNOptionsList/OptionRowLHN.tsx

Line 300 in 8c250f2

{isChatUsedForOnboarding && <FreeTrial badgeStyles={[styles.mnh0, styles.pl2, styles.pr2, styles.ml1]} />}

add styles.mw60

{isChatUsedForOnboarding && <FreeTrial badgeStyles={[styles.mnh0, styles.pl2, styles.pr2, styles.ml1, styles.mw60]} />}

also include mw60 in sizing.ts

    mw60: {
        maxWidth: '60%',
    },

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)

We can also match badge's width with alternateText so that it can grow when there is no GBR/RBR

Results

[Krishna2323]

Proposal

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

Web - LHN -"Concierge" chat name is cutted by trial banner when changing language to spanish

What is the root cause of that problem?

• The spanish text is long and there is not enough width to adjust all the elements.

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

• We should this part with a view and move the FreeTrial component inside the wrapper view:
• This RBR icon should also be placed besides the GBR icon, so we can also do that and apply the same styles as the GBR.
• Minor style tweaks can be made in the PR phase.

Pseudocode

<View style={{display: 'flex', alignItems: 'flex-end', gap: 4, marginTop: 4}}>
    <FreeTrial badgeStyles={[styles.mnh0, styles.pl2, styles.pr2, styles.ml1]} />
    <View
        style={[styles.flexRow, styles.alignItemsCenter]}
        accessible={false}
    >
        {/* {brickRoadIndicator === CONST.BRICK_ROAD_INDICATOR_STATUS.INFO && ( */}
        <View style={styles.ml2}>
            <Icon
                testID="GBR Icon"
                src={Expensicons.DotIndicator}
                fill={theme.success}
            />
        </View>
        {/* )}Z */}
        {hasDraftComment && !!optionItem.isAllowedToComment && (
            <View
                style={styles.ml2}
                accessibilityLabel={translate('sidebarScreen.draftedMessage')}
            >
                <Icon
                    testID="Pencil Icon"
                    fill={theme.icon}
                    src={Expensicons.Pencil}
                />
            </View>
        )}
        {!brickRoadIndicator && !!optionItem.isPinned && (
            <View
                style={styles.ml2}
                accessibilityLabel={translate('sidebarScreen.chatPinned')}
            >
                <Icon
                    testID="Pin Icon"
                    fill={theme.icon}
                    src={Expensicons.Pin}
                />
            </View>
        )}
    </View>
</View>

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

Monosnap.screencast.2025-06-30.03-40-20.mp4

[melvin-bot]

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

[melvin-bot]

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

[alexpensify]

@ishpaul777 - can you please review if one of these proposals will fix the issue? Thanks!

[thelullabyy]

Proposal

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

• Web - LHN -"Concierge" chat name is cutted by trial banner when changing language to spanish

What is the root cause of that problem?

In the LHN, two elements share the same row:

1. The chat display name, which is styled with flexShrink: 1:
   

   App/src/components/LHNOptionsList/OptionRowLHN.tsx

   Line 287 in b92b8f2

   textStyles={displayNameStyle}

2. The "30 days trial" badge, which is styled with flexShrink: 0:
   

   App/src/components/LHNOptionsList/OptionRowLHN.tsx

   Line 300 in b92b8f2

   {isChatUsedForOnboarding && <FreeTrial badgeStyles={[styles.mnh0, styles.pl2, styles.pr2, styles.ml1]} />}

When the container's width is insufficient (due to longer text in Spanish), the badge does not shrink, while the display name does. This causes the display name to become truncated, leading to the overlap issue.

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

We propose swapping the flexShrink values between the two elements to prioritize the visibility of the display name over the badge. Specifically:

• Set the display name's style to flexShrink: 0:

  
  flexShrink: 0,
  

  Source:
  

  App/src/styles/index.ts

  Line 2080 in b92b8f2

  flexShrink: 1,

• Set the badge text's style to flexShrink: 1:

  
  {isChatUsedForOnboarding && <FreeTrial badgeStyles={[styles.mnh0, styles.pl2, styles.pr2, styles.ml1, {flexShrink: 1}]} />}
  

  Source:
  

  App/src/components/LHNOptionsList/OptionRowLHN.tsx

  Line 300 in b92b8f2

  {isChatUsedForOnboarding && <FreeTrial badgeStyles={[styles.mnh0, styles.pl2, styles.pr2, styles.ml1]} />}

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)

Option 1:

• Only setting flexShrink: 1 on the badge text. This allows both elements to shrink, but does not guarantee the display name retains priority.
• Setting flexShrink: 3 on the badge text. This ensures the badge shrinks more than the display name when space is limited, but may reduce readability of the badge.

Option 2:

• We can apply the maxWidth style to the badgeStyles. However, this may result in the badge not utilizing all available horizontal space, even when additional width is available, leading to a visually unbalanced layout.

[avnishranwa9122]

Proposal

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

Web - LHN -"Concierge" chat name is cutted by trial banner when changing language to spanish

What is the root cause of that problem?

The div in which the word Concierge is present has flex-shrink: 1 and flex-grow: 0. Due to this the word shrink and badge occupies full space.

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

The div in which the word Concierge is present should have flex-grow: 1 and flex-shrink: 0. This will make the badge overflow, to fix that add flex-shrink: 1 to badge.

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

Result

Link to Result