[$250] Workspace - Long workspace name is not truncated in workspace settings

[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.1.25-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/5904380
Email or phone of affected tester (no customers): N/A
Issue reported by: Applause Internal Team
Device used: Windows 11/ Chrome, Android 13/ Chrome
App Component: Workspace Settings

Action Performed:

1. Sign in to staging.new.expensify.com
2. Navigate to account settings > workspace > Create new workspace
3. Click on confirm on "Confirm workspace" page
4. Navigate to workspace > Overview > Workspace name
5. Edit the workspace name to have more than 50 characters (e.g abcdefghijabcdefghijabcdefghijabcdefghijabcdefghijabcdefghijhhhhhhyyyyyyabcdefghij)
6. Click on save

Expected Result:

Workspace name appears truncated in workspace settings.

Actual Result:

Workspace name is not truncated and characters extend beyond the name area

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021914475683738977081
• Upwork Job ID: 1914475683738977081
• Last Price Increase: 2025-04-22

Issue Owner

Current Issue Owner: @thienlnam

[melvin-bot]

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

[FitseTLT]

🚨 Edited by proposal-police: This proposal was edited at 2025-04-09 13:35:29 UTC.

Proposal

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

Workspace - Long workspace name is not truncated in workspace settings

What is the root cause of that problem?

We don't want to truncate the workspace name so we added numberOfLinesTitle as 0 here

App/src/pages/workspace/WorkspaceOverviewPage.tsx

Line 256 in 41ab69c

numberOfLinesTitle={0}

but we haven't passed shouldBreakWord so break word style will not be applied and when the name has long name without space it will not break down to multiple lines

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

We should add shouldBreakWord

                                shouldBreakWord

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

N / A styling bug

What alternative solutions did you explore? (Optional)

[nyomanjyotisa]

Proposal

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

Long workspace name is not truncated in workspace settings

What is the root cause of that problem?

The workspace name is one word with 50 characters

We set numberOfLinesTitle={0} which mean no limit on the title lines, and full title should displayed.

App/src/pages/workspace/WorkspaceOverviewPage.tsx

Line 265 in 4fa7338

numberOfLinesTitle={0}

And we don't include the styles.breakWord if numberOfLinesTitle == 0

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

Since numberOfLinesTitle={0} means no limit on the title lines, and full title should be displayed, we should always include styles.breakWord if numberOfLinesTitle == 0, although we don't set the shouldBreakWord

App/src/components/MenuItem.tsx

Line 516 in 4fa7338

shouldBreakWord ? styles.breakWord : {},

            shouldBreakWord || numberOfLinesTitle == 0 ? styles.breakWord : {},

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

None, UI bug

What alternative solutions did you explore? (Optional)

Set shouldBreakWord default value to true instead

App/src/components/MenuItem.tsx

Line 486 in 413d448

shouldBreakWord = false,

        shouldBreakWord = true,

[melvin-bot]

@VictoriaExpensify Still overdue 6 days?! Let's take care of this!

[melvin-bot]

@VictoriaExpensify 10 days overdue. I'm getting more depressed than Marvin.

[melvin-bot]

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