[Due for payment 2026-06-18] [$250] #admins - The workspace name does not fit properly within the container

[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.3.99-5
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: https://github.com/Expensify/Expensify/issues/568709
Email or phone of affected tester (no customers): -
Issue reported by: Applause Internal Team
Bug source: Regression TC Execution
Device used: Windows 10 - Chrome

Action Performed:

1. Navigate to staging.new.expensify.com.
2. Create a workspace with the following name: lkqwejqlkwjelkqjlekqwlkqwjelkwlkqwejqlkwjelkqjlekqwlkqwjelkwlkqwejqlkwjelkqjlekqwlkqwjelkwlkqwejqlkw
3. Go to the #admins room and click the header.

Expected Result:

The workspace name should fit properly within the container, and the workspace name subtitle should not be truncated.

Actual Result:

The workspace name does not fit properly within the container.

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari

Screenshots/Videos

Bug7158124_1779207129008.bandicam_2026-05-19_19-00-27-511.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022062853213641435901
• Upwork Job ID: 2062853213641435901
• Last Price Increase: 2026-06-05
• Automatic offers:
• thelullabyy | Reviewer | 111688231

Issue Owner

Current Issue Owner: @mallenexpensify

[MelvinBot]

Proposal

What is the root cause of that problem?

On the Report Details page (opened by clicking a room header), the Workspace name row is rendered without the text‑wrapping props that the row directly above it uses. A long, unbroken workspace name (no spaces) therefore can't wrap or break, and overflows the container on web.

The workspace‑name MenuItemWithTopDescription at DynamicReportDetailsPage.tsx:808-815 omits both shouldBreakWord and a multi‑line numberOfLinesTitle, so it falls back to MenuItem's defaults: numberOfLinesTitle = 1, which applies whiteSpace: 'pre' and no word-break. With no break opportunity, a 100‑char unbroken string spills past the row instead of wrapping.

The sibling room‑name row immediately above (DynamicReportDetailsPage.tsx:805-806) already passes numberOfLinesTitle={isThread ? 2 : 0} and shouldBreakWord, which is why the room name wraps correctly but the workspace name does not.

Investigation details (style cascade + evidence)

In MenuItem.tsx, combinedTitleTextStyle picks:

• numberOfLinesTitle !== 1 ? styles.preWrap : styles.pre → with the default numberOfLinesTitle = 1 (MenuItem.tsx:498) this yields styles.pre = whiteSpace: 'pre' (never wraps).
• shouldBreakWord ? styles.breakWord : {} → not passed for the workspace row, so word-break: break-word is NOT applied.

Result: whiteSpace: 'pre' + no word-break + an unbreakable token = horizontal overflow on web.

The in‑chat HeaderView subtitle is not the culprit — it already sets numberOfLines={1} (HeaderView.tsx:354-361). The overflow is specific to the Report Details page reached by clicking the header.

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

Add shouldBreakWord and a multi‑line numberOfLinesTitle to the workspace‑name row at DynamicReportDetailsPage.tsx:808-815, mirroring the room‑name row above it. This switches the title from whiteSpace: 'pre' to pre-wrap and adds word-break: break-word, so a long workspace name wraps inside the container.

numberOfLinesTitle={0} matches the room‑name row for consistency; {2} could be used instead if the team prefers to cap row height. shouldBreakWord is required either way to handle the no‑spaces case.

What alternative solutions did you explore? (Optional)

Truncating with an ellipsis (keeping numberOfLinesTitle={1} and adding shouldBreakWord) would also stop the overflow, but the issue's expected result says the name should fit "and not be truncated," so wrapping is the better match.

Related issues scan

A quick scan of open issues found no duplicate of this specific Report Details workspace‑name overflow.

---

Next Steps for Contributor+ team:
To accept: @MelvinBot implement [this](https://github.com/Expensify/App/issues/92763) to create a draft PR.
To refine: @MelvinBot <your feedback>
To reject: Explain why you are rejecting Melvin's proposal.

[MobileMage]

Proposal

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

When a workspace is created with a very long single-word name (e.g. lkqwejqlkwjelkqjlekqw... ~100 chars with no spaces), opening the #admins room header on web (Windows Chrome, macOS Chrome/Safari) shows the workspace name overflowing its container. The "Workspace" subtitle row underneath the room name does not wrap or break the long unbreakable token within the right-hand panel, breaking the layout.

What is the root cause of that problem?

Clicking the #admins header opens DynamicReportDetailsPage. Because the #admins room is a default room (isDefaultRoom true, isThread false), shouldDisplayGroupWorkspaceAsPushRow evaluates to true on line 782, which renders TWO stacked MenuItemWithTopDescription rows inside nameSectionGroupWorkspace. The first row shows the room name #admins (the parsed reportName); the second row shows the workspace name returned by getPolicyName({report}) under a "Workspace" description label:

App/src/pages/DynamicReportDetailsPage.tsx

Lines 808 to 815 in a816e1b

	{shouldDisplayGroupWorkspaceAsPushRow && !isGroupChat && (
	<MenuItemWithTopDescription
	shouldShowRightIcon={false}
	interactive={false}
	description={translate('workspace.common.workspace')}
	title={getPolicyName({report})}
	/>
	)}

The two rows are configured very differently. The room-name row explicitly opts in to multi-line wrapping with numberOfLinesTitle={isThread ? 2 : 0} and shouldBreakWord (lines 805-806), but the workspace-name row passes neither prop, so it falls back to the MenuItem defaults numberOfLinesTitle = 1 and shouldBreakWord = false (defaults at lines 498 and 592 of MenuItem.tsx). Those defaults feed straight into the title style cascade for the Text element:

App/src/components/MenuItem.tsx

Lines 671 to 676 in a816e1b

	numberOfLinesTitle !== 1 ? styles.preWrap : styles.pre,
	interactive && disabled ? {...styles.userSelectNone} : {},
	styles.ltr,
	isDeleted ? styles.offlineFeedbackDeleted : {},
	shouldBreakWord ? styles.breakWord : {},
	styles.mw100,

Because numberOfLinesTitle === 1 the title text gets styles.pre (whiteSpace: 'pre') instead of styles.preWrap, and without shouldBreakWord it never receives styles.breakWord (wordBreak: 'break-word'). On web that combination tells the browser "preserve whitespace exactly AND don't break inside words" — so a 100-character token with no spaces has no break opportunity and blows past the row width. RNW's numberOfLines={1} ellipsis cannot kick in cleanly either, because without a wordBreak rule the long token grows the inline box. Both styles are no-ops on native (whiteSpace/index.native.ts and wordBreak/index.native.ts export empty objects), which is exactly why the bug reproduces on Windows Chrome and macOS Chrome/Safari but not on iOS/Android.

Runtime evidence

Captured on dev.new.expensify.com:8082, RHP open on #admins for a 100-char single-token workspace name.

Before: workspace-name title node →

{
  "whiteSpace": "pre",
  "wordBreak": "normal",
  "width": 335,
  "scrollW": 631,
  "overflows": true
}

After (numberOfLinesTitle={0} + shouldBreakWord) →

{ "whiteSpace": "pre-wrap", "wordBreak": "break-word", "overflows": false }

Matches the cascade at:

App/src/components/MenuItem.tsx

Lines 671 to 675 in a816e1b

	numberOfLinesTitle !== 1 ? styles.preWrap : styles.pre,
	interactive && disabled ? {...styles.userSelectNone} : {},
	styles.ltr,
	isDeleted ? styles.offlineFeedbackDeleted : {},
	shouldBreakWord ? styles.breakWord : {},

Native is unaffected — both shims export {}:

https://github.com/Expensify/App/blob/a816e1b398a9b151dd929329c3a8a1290879be89/src/styles/utils/whiteSpace/index.native.ts

https://github.com/Expensify/App/blob/a816e1b398a9b151dd929329c3a8a1290879be89/src/styles/utils/wordBreak/index.native.ts

Branch: main...MobileMage:App:fix/92763-admins-workspace-name-overflow

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

Pass numberOfLinesTitle={0} and shouldBreakWord to the workspace-name MenuItemWithTopDescription, mirroring the configuration the sibling room-name row already uses two lines above. With numberOfLinesTitle={0} the title style cascade switches from styles.pre to styles.preWrap, and shouldBreakWord adds styles.breakWord so the long unbreakable workspace name wraps inside the row container instead of overflowing. The push-row's outer View already has styles.flex1 (line 790) so the wrapped text will respect the RHP width.

App/src/pages/DynamicReportDetailsPage.tsx

Lines 808 to 815 in a816e1b

	{shouldDisplayGroupWorkspaceAsPushRow && !isGroupChat && (
	<MenuItemWithTopDescription
	shouldShowRightIcon={false}
	interactive={false}
	description={translate('workspace.common.workspace')}
	title={getPolicyName({report})}
	/>
	)}

{
  shouldDisplayGroupWorkspaceAsPushRow && !isGroupChat && (
    <MenuItemWithTopDescription
      shouldShowRightIcon={false}
      interactive={false}
      description={translate("workspace.common.workspace")}
      title={getPolicyName({ report })}
      numberOfLinesTitle={0}
      shouldBreakWord
    />
  );
}

This is a local, scoped fix at the exact render site for the #admins workspace push row. It does not touch the shared MenuItem defaults (so all other call sites that rely on the 1-line + ellipsis behaviour stay untouched), and on native the two new props are no-ops because breakWord/preWrap resolve to {} — so the change is web-only by construction, matching the platforms where the bug reproduces.

What alternative solutions did you explore? (Optional)

We considered flipping the MenuItem defaults to shouldBreakWord = true so any consumer would get safe wrapping for free, but that would silently change layout for dozens of menu rows across Settings, Workspace, and Search that intentionally rely on single-line ellipsis truncation (e.g. address rows, email rows). Another option was to truncate getPolicyName output via String.prototype.slice before passing it in, but that would just hide a long but legitimate workspace name with no way for the user to read the full value — wrapping the text is the user-friendly outcome the expected result explicitly asks for.

[KJ21-ENG]

🚨 Edited by proposal-police: This proposal was edited at 2026-06-05 11:12:56 UTC.

Proposal

What is the root cause of that problem?

#admins is a default workspace room (policyAdmins). In DynamicReportDetailsPage, default rooms set shouldDisplayGroupWorkspaceAsPushRow to true, so the workspace name is not rendered through the room title's furtherDetails prop. It is rendered in the separate workspace row:

<MenuItemWithTopDescription
    description={translate('workspace.common.workspace')}
    title={getPolicyName({report})}
/>

That row relies on MenuItem title defaults: numberOfLinesTitle is 1 and shouldBreakWord is false. A long unbroken policy/workspace name therefore stays on the single-line, non-break-word title path, so it overflows/truncates instead of fitting inside the details panel.

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

Update the workspace row in DynamicReportDetailsPage that renders title={getPolicyName({report})} for default rooms. Pass the existing multiline and long-word props used elsewhere in this component, e.g. numberOfLinesTitle={0} and shouldBreakWord, so the workspace name can wrap and break within the RHP width.

Keep the change scoped to this details-page workspace row. We should not change backend policy data, and we do not need a broad MenuItem or furtherDetails behavior change for this #admins repro. A regression test should render a policyAdmins report with a long unbroken policy name and verify that the workspace row is rendered with unlimited title lines and break-word behavior.

What alternative solutions did you explore? (Optional)

I checked the furtherDetails path, but it does not render the workspace name for #admins because default rooms use the separate workspace row. Fixing furtherDetailsNumberOfLines would help a different branch, but it would miss the reproduced #admins row.

[mukhrr]

Proposal

What is the root cause of that problem?

In DynamicReportDetailsPage, the main room title row passes shouldBreakWord, so long unbroken text can wrap inside the details container.

But for default workspace rooms like #admins, we render the workspace name in a separate MenuItemWithTopDescription row, and that row only passes title={getPolicyName({report})} without shouldBreakWord.

App/src/pages/DynamicReportDetailsPage.tsx

Lines 808 to 814 in 632ff2f

	{shouldDisplayGroupWorkspaceAsPushRow && !isGroupChat && (
	<MenuItemWithTopDescription
	shouldShowRightIcon={false}
	interactive={false}
	description={translate('workspace.common.workspace')}
	title={getPolicyName({report})}
	/>

MenuItem only applies styles.breakWord to the title when shouldBreakWord is true, so the long single-token workspace name cannot wrap and overflows on web.

App/src/components/MenuItem.tsx

Lines 664 to 676 in 632ff2f

	const combinedTitleTextStyle = StyleUtils.combineStyles<TextStyle>(
	[
	styles.flexShrink1,
	styles.popoverMenuText,
	// eslint-disable-next-line no-nested-ternary
	shouldPutLeftPaddingWhenNoIcon || (icon && !Array.isArray(icon)) ? (avatarSize === CONST.AVATAR_SIZE.SMALL ? styles.ml2 : styles.ml3) : {},
	shouldShowBasicTitle ? {} : styles.textStrong,
	numberOfLinesTitle !== 1 ? styles.preWrap : styles.pre,
	interactive && disabled ? {...styles.userSelectNone} : {},
	styles.ltr,
	isDeleted ? styles.offlineFeedbackDeleted : {},
	shouldBreakWord ? styles.breakWord : {},
	styles.mw100,

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

Pass shouldBreakWord to the workspace-name MenuItemWithTopDescription rendered for shouldDisplayGroupWorkspaceAsPushRow && !isGroupChat.

This keeps the fix scoped to the overflowing workspace row and reuses the existing MenuItem word-break behavior already used by the main title row.

QA: create a workspace with the long name from the issue, open #admins, click the header, and verify the workspace row wraps within the details container on Chrome/Safari without clipping or horizontal overflow.

What alternative solutions did you explore? (Optional)

We could truncate the workspace name with numberOfLinesTitle={1}, but that conflicts with the expected result because the workspace name should fit properly instead of being hidden.

Demo:

[aswin-s]

🚫 Duplicated proposal withdrawn by 🤖 ProposalPolice.

[moxw]

🚫 Duplicated proposal withdrawn by 🤖 ProposalPolice.

[melvin-bot]

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

[melvin-bot]

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