[Due for payment 2025-03-05] [$250] Company card name is cut off at the end.

[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:
Reproducible in staging?: needs reproduction
Reproducible in production?: needs reproduction
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?:
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: @hungvu193
Slack conversation (hyperlinked to channel name): expensify-bugs

Action Performed:

1. Go to Workspace > Company Card > Add a card that has long card name.
2. Observe the card name on mobile device screens.

Expected Result:

The card name shouldn't be cut off

Actual Result:

The card name is cut off

Workaround:

unknown

Platforms:

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

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Screen.Recording.2025-02-11.at.22.36.32.mov

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021890070956830857932
• Upwork Job ID: 1890070956830857932
• Last Price Increase: 2025-02-20
• Automatic offers:
• allgandalf | Reviewer | 106259875

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @alexpensify

[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.

[MelvinBot]

This has been labelled "Needs Reproduction". Follow the steps here: https://stackoverflowteams.com/c/expensify/questions/16989

[m-natarajan]

Proposal by @hungvu193

Proposal

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

Company card name is cut off at the end.

What is the root cause of that problem?

We're using flex row here:

App/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx

Line 60 in 5b05237

style={[styles.flexRow, styles.alignItemsCenter, styles.gap3, shouldChangeLayout && styles.mb3]}

But we forgot to add the style for the View here:

App/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx

Line 69 in 5b05237

<View>

This makes the CaretWrapper's text overflow and cut off.

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

1. Firstly we should add styles.flex1 here
2. Add styles.flex1 to the CaretWrapper here to make sure it will only fill its space and won't overflow the rest of the layout. We can add style props to CaretWrapper and pass styles.flex1 as style.
3. Finally add styles.flexShrink1 to the Text here to make sure it won't overflow when the name of the card is too long. (We can also use styles.flex1, but I prefer flexShrink because it will keep the old behavior of the text.

We should also check other places in the App that used CaretWrapper and then apply the same solution above if needed.

(Noting that the above solution fixes the RCA of the issue, but still might need additional changes to match the expected design, ie adding styles.alignItemsCenter here .)

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

[allgandalf]

Go to Workspace > Company Card > Add a card that has long card name.
Observe the card name on mobile device screens.

@alexpensify Please assign me here as C+ as per:

The first C+ to post on the GH issue with reliable reproduction steps and video or screenshots confirming reproduction will be assigned as C+.

[alexpensify]

@allgandalf - Let's confirm if this proposal will fix this issue. Thanks!

[allgandalf]

@alexpensify can you put up external label here? i guess we need that to get the automation to kick in

[melvin-bot]

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

[melvin-bot]

Current assignee @allgandalf is eligible for the External assigner, not assigning anyone new.

[alexpensify]

@allgandalf we should be all set now. Thanks for your help here.

[huult]

Proposal

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

Company card name is cut off at the end.

What is the root cause of that problem?

We use flexRow to wrap the text.

App/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx

Line 60 in 5b05237

style={[styles.flexRow, styles.alignItemsCenter, styles.gap3, shouldChangeLayout && styles.mb3]}

And the View here doesn’t have flex: 1, and CaretWrapper doesn’t have flex: 1 either, which causes the text to be cut off: Without flex: 1, the container doesn’t expand to fill available space, causing the text to be cut off when there’s insufficient room.

App/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx

Line 69 in 5b05237

<View>

App/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx

Line 71 in 5b05237

<CaretWrapper>

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

To fix this issue, we need to add a new style as outlined in the steps below:

1. Add wrapperStyle={[styles.flex1, !shouldUseNarrowLayout && styles.pr1]} here so that on desktop screens with a long bank name, it will prevent the Assign card and Settings buttons from being pushed out of line, as shown in the image below:

App/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx

Line 61 in 66df2de

accessibilityLabel={formattedFeedName ?? ''}

    <PressableWithFeedback
        onPress={() => Navigation.navigate(ROUTES.WORKSPACE_COMPANY_CARDS_SELECT_FEED.getRoute(policyID))}
        style={[styles.flexRow, styles.alignItemsCenter, styles.gap3, shouldChangeLayout && styles.mb3]}
        accessibilityLabel={formattedFeedName ?? ''}
        wrapperStyle={[styles.flex1, !isLargeScreenWidth && styles.pr1]}
    >

!isLargeScreenWidth && styles.pr1 to make space with assign card and setting button

2 Add flex: 1 here to makes the expand to fill available space in its parent container.

App/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx

Line 69 in 5b05237

<View>

update to:

    <View style={styles.flex1}>

3. Similarly to the View above, we need to add flex: 1 to CaretWrapper. For this component, we can create new props to avoid impacting other instances where CaretWrapper is used

App/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx

Line 71 in 66df2de

<CaretWrapper>

    <CaretWrapper customStyle={styles.flex1}>

App/src/components/CaretWrapper.tsx

Line 17 in 5a15892

<View style={[styles.flex1, styles.flexRow, styles.gap1, styles.alignItemsCenter]}>

    <View style={[styles.flexRow, styles.gap1, styles.alignItemsCenter, customStyle]}>

4.flexShrink1: 1 is added here to prevent the component from growing beyond its natural size in a flex container(in case bank name short).

App/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx

Line 72 in 66df2de

<Text style={styles.textStrong}>{formattedFeedName}</Text>

    <Text style={[styles.flexShrink1, styles.textStrong]}>

Test branch

Screen.Recording.2025-02-14.at.15.38.36.mp4

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)

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.

If we cut the text and add ..., then we use the numberOfLines prop for the Text

[melvin-bot]

@alexpensify, @allgandalf Whoops! This issue is 2 days overdue. Let's get this updated quick!

[allgandalf]

reviewing the proposals today

[allgandalf]

@hungvu193 's proposal LGTM

🎀👀🎀 C+ reviewed

[melvin-bot]

Triggered auto assignment to @marcochavezf, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[huult]

@allgandalf The proposal you selected causes the bug and is not sufficient to fix this issue. Could you review my proposal?

[huult]

@allgandalf

The proposal you selected causes the bug and is not sufficient to fix this issue.

Here is the issue I mentioned. My proposal fixes it and covers all cases and platforms.

[hungvu193]

@allgandalf

The proposal you selected causes the bug and is not sufficient to fix this issue.

Here is the issue I mentioned. My proposal fixes it and covers all cases and platforms.

The only different between your proposal and mine is styles.pr1 on the header right?

[huult]

wrapperStyle={[styles.flex1, !isLargeScreenWidth && styles.pr1]} Here is everything we need. If not, it may cause a bug.

[allgandalf]

@huult I think proposal from @hungvu193 was the first to point out RCA and outline a solution, these points are generally covered during PR phase, and imo, proposals need to outline a basic idea of the changes required and details can be looked at during the PR phase .

Thanks for understanding 😄

[hungvu193]

wrapperStyle={[styles.flex1, !isLargeScreenWidth && styles.pr1]} Here is everything we need. If not, it may cause a bug.

In fact, that case will never happen, I believe you inspected the element to change the title, the card name has 100 characters limit.

I also note in my proposal that, additional changes might be needed and my proposal only fixed the RCA of the issue.

[huult]

Because I saw this case was the same as this ticket (#55218), I pointed it out, identified the correct RCA, and resolved the issue. However, another contributor proposed a different case, and their proposal was selected. I feel it is the same as this case, so I am confused and asking for clarification.

Anyway, I agree with @allgandalf. Thanks, @hungvu193

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[allgandalf]

not overdue, pending assignment, deeds here

[marcochavezf]

Thanks for the collaboration guys, and apologies for the delay here. I agree with @allgandalf's decision, assigning @hungvu193

Also thanks @huult for bringing up the clarification, I'm confident you will find success in the next issue 🚀

[melvin-bot]

📣 @allgandalf 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.1.6-1 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Fix company card title #57366

If no regressions arise, payment will be issued on 2025-03-05. 🎊

For reference, here are some details about the assignees on this issue:

• @hungvu193 requires payment through NewDot Manual Requests
• @allgandalf requires payment automatic offer (Reviewer)

[melvin-bot]

@hungvu193 / @allgandalf @alexpensify @hungvu193 / @allgandalf The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]