fix:Custom Status text wrap #6776 #6778

Yaddalapalli-Charan-Kumar-Naidu · 2025-11-08T18:43:07Z

Proposed changes

This PR fixes a UI issue where the Custom Status text in the sidebar would overflow or wrap into multiple lines, causing layout misalignment.

The fix ensures that the status message is truncated with ellipsis (...) when it exceeds a single line, maintaining a clean and consistent sidebar layout across all devices and themes.

Issue(s)

Closes #6776

How to test or reproduce

Open the sidebar where the user's Custom Status appears.
Set a long custom status, for example:
Verify that:

The status text now appears on only one line.
Long text is truncated with ... at the end.
Sidebar layout remains aligned and visually consistent.

Screenshots

Types of changes

[ x] Bugfix (non-breaking change which fixes an issue)
[ x] Improvement (non-breaking change which improves a current function)
New feature (non-breaking change which adds functionality)
Documentation update (if none of the other choices apply)

Checklist

[ x] I have read the CONTRIBUTING doc
[ x] I have signed the CLA
[ x] Lint and unit tests pass locally with my changes
I have added tests that prove my fix is effective or that my feature works (if applicable)
I have added necessary documentation (if applicable)
Any dependent changes have been merged and published in downstream modules

Summary by CodeRabbit

Bug Fixes
- List item titles now reliably truncate long text with an ellipsis to preserve layout and prevent wrapping.
New Features
- Title rendering supports configurable line limits and truncation mode so components can control how text is clipped.
- Sidebar status titles are constrained to a single line with tail truncation for consistent display.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

CLAassistant · 2025-11-08T18:43:13Z

All committers have signed the CLA.

coderabbitai · 2025-11-08T18:43:17Z

Walkthrough

Adds optional numberOfLines and ellipsizeMode props to list title interfaces and components, forwards them through IListItemContent → ListTitle, and applies numberOfLines={1} with ellipsizeMode='tail' when rendering the custom status List.Item to enforce single-line truncation.

Changes

Cohort / File(s)	Summary
List title props & forwarding `app/containers/List/ListItem.tsx`	`IListItemContent` adds `numberOfLines?: number` and `ellipsizeMode?: string`. `IListTitle` now includes those props. `ListTitle` accepts and forwards `numberOfLines` and `ellipsizeMode` to the underlying `Text` when `title` is a string; `Content` forwards these props to `ListTitle`.
Sidebar usage `app/views/SidebarView/components/CustomStatus.tsx`	Sets `numberOfLines={1}` and `ellipsizeMode='tail'` on the `List.Item` title rendering to limit custom status to a single truncated line.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Review attention:
- Confirm ellipsizeMode type is compatible with platform typings (e.g., union vs. string).
- Check other IListItemContent consumers tolerate new optional props.
- Verify visual/layout on different platforms and list item variants.

Poem

🐰 I nibbled long titles down to size,
One line now shines with dots in its eyes.
Tail of ellipsis, tidy and neat,
Sidebar humming — compact and sweet. ✨

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'fix:Custom Status text wrap #6776' directly addresses the main change: fixing custom status text wrapping in the sidebar. It clearly references the issue number and the core problem being resolved.
Linked Issues check	✅ Passed	The PR successfully implements the requirement from issue #6776: constraining custom status text to a single line with tail ellipsis truncation. Changes to ListItem component provide the necessary numberOfLines and ellipsizeMode props, applied in CustomStatus.tsx.
Out of Scope Changes check	✅ Passed	All changes are scoped to fixing the custom status text wrapping issue. The ListItem interface updates are foundational changes needed to support the truncation feature in CustomStatus, with no unrelated modifications detected.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

Jira integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 3e21691 and 111d771.

📒 Files selected for processing (1)

app/containers/List/ListItem.tsx (4 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

app/containers/List/ListItem.tsx

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

Yaddalapalli-Charan-Kumar-Naidu · 2025-11-10T15:35:26Z

@Rohit3523 @diegolmello can you review my PR and let me any further modifications needed in this

Yaddalapalli-Charan-Kumar-Naidu · 2025-11-11T19:34:22Z

Hey @Rohit3523 , one of the tests failed in the CI run. Could you please help me check what might be causing it?

Rohit3523 · 2025-11-11T19:37:00Z

Hey @Rohit3523 , one of the tests failed in the CI run. Could you please help me check what might be causing it?

Update the storybook snap using yarn test-update and make sure you are using node 22

Yaddalapalli-Charan-Kumar-Naidu · 2025-11-11T19:38:52Z

Hey @Rohit3523 , one of the tests failed in the CI run. Could you please help me check what might be causing it?

Update the storybook snap using yarn test-update and make sure you are using node 22

ok, I will check and update it

Yaddalapalli-Charan-Kumar-Naidu · 2025-11-19T15:03:33Z

@Rohit3523 @diegolmello can anyone review the PR and let me know any changes required

Rohit3523 · 2025-11-22T19:33:38Z

I think it will also truncate other list items, can you please test this case

coderabbitai

Actionable comments posted: 0

🧹 Nitpick comments (1)

app/containers/List/ListItem.tsx (1)
68-68: Refine the ellipsizeMode type for better type safety.

The as any cast on line 77 indicates a type mismatch. React Native's Text component expects ellipsizeMode to be 'head' | 'middle' | 'tail' | 'clip', but it's currently typed as string in IListItemContent (line 110).

Apply this diff to improve type safety:

In IListItemContent interface (line 110):
 	numberOfLines?: number;
-	ellipsizeMode?: string;
+	ellipsizeMode?: 'head' | 'middle' | 'tail' | 'clip';
In ListTitle component (line 77):
 	<Text
 		numberOfLines={numberOfLines}
-		ellipsizeMode={ellipsizeMode as any}
+		ellipsizeMode={ellipsizeMode}
 		style={[styles.title, styleTitle, { color: color || colors.fontDefault }]}>
Also applies to: 75-78

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

Jira integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between e1e20a5 and 3e21691.

📒 Files selected for processing (2)

app/containers/List/ListItem.tsx (4 hunks)
app/views/SidebarView/components/CustomStatus.tsx (1 hunks)

🔇 Additional comments (3)

app/views/SidebarView/components/CustomStatus.tsx (1)

75-76: LGTM! Fix correctly addresses the issue.

The addition of numberOfLines={1} and ellipsizeMode='tail' properly constrains the custom status text to a single line with ellipsis truncation, resolving the layout issue reported in #6776.

app/containers/List/ListItem.tsx (2)

65-66: LGTM! Interface correctly extended.

The interface properly picks the new numberOfLines and ellipsizeMode props from IListItemContent.

132-134: LGTM! Props correctly threaded through the component.

The numberOfLines and ellipsizeMode props are properly destructured and forwarded to ListTitle. The optional nature of these props ensures backward compatibility with existing usage.

Also applies to: 176-185

Yaddalapalli-Charan-Kumar-Naidu · 2025-11-26T11:45:14Z

@Rohit3523 made changes such that it only truncates particular status list item

app/containers/List/ListItem.tsx

Yaddalapalli-Charan-Kumar-Naidu added 2 commits November 9, 2025 00:09

fix: custom status text wrap (RocketChat#6776)

7f4da61

fix: custom status text wrap (RocketChat#6776)

e1e20a5

Yaddalapalli-Charan-Kumar-Naidu requested a deployment to approve_e2e_testing November 10, 2025 18:32 — with GitHub Actions Waiting

test: updated storybook snapshot

39f8715

Yaddalapalli-Charan-Kumar-Naidu and others added 2 commits November 26, 2025 17:09

Merge branch 'RocketChat:develop' into develop

855cee9

fix: custom text wrap particular list item

3e21691

coderabbitai bot reviewed Nov 26, 2025

View reviewed changes

Rohit3523 reviewed Nov 26, 2025

View reviewed changes

app/containers/List/ListItem.tsx Outdated Show resolved Hide resolved

Yaddalapalli-Charan-Kumar-Naidu and others added 2 commits November 27, 2025 09:31

Merge branch 'develop' into develop

b001973

fix? custom status text type update

111d771

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix:Custom Status text wrap #6776 #6778

fix:Custom Status text wrap #6776 #6778

Uh oh!

Yaddalapalli-Charan-Kumar-Naidu commented Nov 8, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

CLAassistant commented Nov 8, 2025 •

edited

Loading

Uh oh!

coderabbitai bot commented Nov 8, 2025 •

edited

Loading

Uh oh!

Yaddalapalli-Charan-Kumar-Naidu commented Nov 10, 2025

Uh oh!

Yaddalapalli-Charan-Kumar-Naidu commented Nov 11, 2025

Uh oh!

Rohit3523 commented Nov 11, 2025

Uh oh!

Yaddalapalli-Charan-Kumar-Naidu commented Nov 11, 2025

Uh oh!

Yaddalapalli-Charan-Kumar-Naidu commented Nov 19, 2025

Uh oh!

Rohit3523 commented Nov 22, 2025

Uh oh!

coderabbitai bot left a comment

Uh oh!

Yaddalapalli-Charan-Kumar-Naidu commented Nov 26, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

fix:Custom Status text wrap #6776 #6778

Are you sure you want to change the base?

fix:Custom Status text wrap #6776 #6778

Uh oh!

Conversation

Yaddalapalli-Charan-Kumar-Naidu commented Nov 8, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed changes

Issue(s)

How to test or reproduce

Screenshots

Types of changes

Checklist

Summary by CodeRabbit

Uh oh!

CLAassistant commented Nov 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai bot commented Nov 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Poem

Pre-merge checks and finishing touches

Uh oh!

Yaddalapalli-Charan-Kumar-Naidu commented Nov 10, 2025

Uh oh!

Yaddalapalli-Charan-Kumar-Naidu commented Nov 11, 2025

Uh oh!

Rohit3523 commented Nov 11, 2025

Uh oh!

Yaddalapalli-Charan-Kumar-Naidu commented Nov 11, 2025

Uh oh!

Yaddalapalli-Charan-Kumar-Naidu commented Nov 19, 2025

Uh oh!

Rohit3523 commented Nov 22, 2025

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Yaddalapalli-Charan-Kumar-Naidu commented Nov 26, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Yaddalapalli-Charan-Kumar-Naidu commented Nov 8, 2025 •

edited by coderabbitai bot

Loading

CLAassistant commented Nov 8, 2025 •

edited

Loading

coderabbitai bot commented Nov 8, 2025 •

edited

Loading