[HOLD for payment 2023-11-09] [$500] Category-Long category is truncated although space available

[kavimuru]

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: 1.3.89-2
Reproducible in staging?: y
Reproducible in production?: y
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: Applause internal team
Slack conversation:

Action Performed:

1. Launch app as employee
2. Tap on Workplace chat
3. Tap plus icon near compose
   4.Enter an amount
   5.Tap next
   6.Tap show more
   7.Tap category
   8.Select a long category "This: is: a: subcategory: with: lots: and: lots: of: levels: needALongerWordHereToTriggerTheLines"

Expected Result:

When user selects a long category, for all available space it should be displayed and must not be truncated.

Actual Result:

Long category selected is truncated although space available.

Workaround:

unknown

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Android: Native

Bug6248096_1698100010021.truncated.mp4

Android: mWeb Chrome

iOS: Native

iOS: mWeb Safari

MacOS: Chrome / Safari

MacOS: Desktop

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~017e161f72a3cab57e
• Upwork Job ID: 1716617007537668096
• Last Price Increase: 2023-10-24

[melvin-bot]

Triggered auto assignment to @sophiepintoraetz (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

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

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[melvin-bot]

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

[pradeepmdk]

Proposal

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

Category-Long category is truncated although space available

What is the root cause of that problem?

due to textbreakstrategy word is truncated middle of so we need apply flex here

App/src/components/MoneyRequestConfirmationList.js

Line 697 in d282473

<MenuItemWithTopDescription

here we missed flex1 style

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

App/src/components/MoneyRequestConfirmationList.js

Line 697 in d282473

<MenuItemWithTopDescription

here we need to pass titleStyle={styles.flex1}

Result

[Krishna2323]

Proposal

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

Category-Long category is truncated although space available

What is the root cause of that problem?

This is a know issue in react native: Text is getting cut off in android for react native

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

We should add a titleStyle={styles.flex1} or titleStyle={{...props.titleStyle, ...styles.flex1}} prop to MenuItemWithTopDescription to eliminate the need to pass it each time we use the component. Many instances of MenuItemWithTopDescription are used without the flex1 style.

Result

[jjcoffee]

@pradeepmdk's proposal LGTM. We do the same for other MenutItems on the same page, so it makes sense to do it again for this one.

We could add it as a prop as @Krishna2323 suggested, but I think there's not much benefit to it (you still have to type out the prop, unless you have it as a default in which case I'd argue there's more value in requiring it to be actively set).

🎀👀🎀 C+ reviewed