Card - In mweb and hybrid app, display of virtual card number &amount behavior is inconsistent

[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. 0.50-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Y
**If this was caught during regression testing, add the test name, ID and link from TestRail:**N/A
Issue reported by: Applause - Internal Team

Action Performed:

1. Launch app in both mweb and hybrid app
2. Tap profile icon -- more features
3. Enable expensify cards
4. Tap + issue card - select an user - virtual card-next
5. Enter maximum 8 digit amount
6. Tap next
7. Enter a card name and tap next
8. Tap issue card

Expected Result:

Amount shown shown should be truncated

Actual Result:

In mweb, virtual card number and amount box overlapped.

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

Bug6637807_1729177827991.Screenrecorder-2024-10-17-20-28-37-706_compress_1.mp4

Bug6637807_1729182831263.mweb.1.mp4

View all open jobs on GitHub

[melvin-bot]

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

[lanitochka17]

@mallenexpensify FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[daledah]

Proposal

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

In mweb, virtual card number and amount box overlapped. In Android hybrid app, amount is shown as truncated

What is the root cause of that problem?

Currently we are not setting width for this wrapper component
so on small screen on web the virtual card number and amount box overlapped

App/src/components/Badge.tsx

Line 82 in 91c6e0c

style={pressable ? wrapperStyles : wrapperStyles({focused: false, hovered: false, isDisabled: false, isScreenReaderActive: false, pressed: false})}

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

We should add max-width: 100% to this component by adding styles.mw100 here

        styles.defaultBadge,
        styles.alignSelfCenter,
        styles.ml2,
        styles.mw100,

What alternative solutions did you explore? (Optional)

NA

[mallenexpensify]

Will get to this soon

[melvin-bot]

@mallenexpensify Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[mallenexpensify]

Gonna close this cuz I don't think anyone's going to be issuing an $88MM limit on a card

But... before closing.. @daledah since you already did some research here, any reason I shouldn't close? Are there other instances where this overlap shows that's not millions of 💵 ?

[daledah]

Are there other instances where this overlap shows that's not millions of 💵 ?

@mallenexpensify I can't find any place like that. But i think we should fix this bug because it can happen on a small screen with only 1M$ limit on a card and we can fix this bug easily

[mallenexpensify]

Thanks @daledah , I want to think about this for a min so bumping to weekly and added `Needs Reproduction". It's def not a priority or time sensitive.

[MelvinBot]

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

[melvin-bot]

@mallenexpensify this issue was created 2 weeks ago. Are we close to a solution? Let's make sure we're treating this as a top priority. Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[mallenexpensify]

Off the next week then will revisit this

[daledah]

@mallenexpensify it looks like we removed the outline box in this PR

[mallenexpensify]

Thanks @daledah . I'm back from OOO, bumped to Daily so I can get to this this week.

[melvin-bot]

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

[mallenexpensify]

Still behind, will get to soon :/

[melvin-bot]

@mallenexpensify Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[mallenexpensify]

Labeling Not a priority and closing. I don't think it's valuable enough to justify more internal investment, espec from design and engineering folks.