Skip to content

Added default ellipsis truncation to ListItemText - #1758

Open
Utkarsh-Mauryaa wants to merge 3 commits into
layer5io:masterfrom
Utkarsh-Mauryaa:Text-Overflow-Fix
Open

Added default ellipsis truncation to ListItemText#1758
Utkarsh-Mauryaa wants to merge 3 commits into
layer5io:masterfrom
Utkarsh-Mauryaa:Text-Overflow-Fix

Conversation

@Utkarsh-Mauryaa

@Utkarsh-Mauryaa Utkarsh-Mauryaa commented Jul 28, 2026

Copy link
Copy Markdown

Notes for Reviewers

  • This PR fixes #1744
  • Identified the root cause in ListItemText, where long labels were being hard-clipped instead of gracefully truncating when rendered inside constrained-width containers.
  • Updated ListItemText to apply default text truncation (ellipsis) to long labels, while preserving the ability for consumers to override the behavior if needed.
  • Verified the fix by testing the minimal Sistent reproduction and confirming that long labels now display an ellipsis instead of being abruptly clipped.
  • The remaining enhancement i.e showing the tooltip only when the text is actually truncated is a separate UX concern and it would be better if we handle that in Meshery rather than Sistent. Addressing this point will close this issue #20483 in the downstream.

Signed commits

  • Yes, I signed my commits.

Summary by CodeRabbit

  • Bug Fixes
    • Ensured list item text consistently uses no-wrap for both primary and secondary content, even when custom slot configurations are provided.
    • Preserved any existing primary/secondary slot customizations while automatically enforcing the no-wrap behavior in the underlying list item text rendering.

@coderabbitai

coderabbitai Bot commented Jul 28, 2026

Copy link
Copy Markdown

Review Change Stack

Warning

Review limit reached

@Utkarsh-Mauryaa, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 12 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 203b500a-b6f1-478f-85aa-cff50c7edd53

📥 Commits

Reviewing files that changed from the base of the PR and between 9a4145f and d95f17f.

📒 Files selected for processing (1)
  • src/base/ListItemText/ListItemText.tsx
📝 Walkthrough

Walkthrough

ListItemText now applies noWrap: true to primary and secondary text slots, preserves caller-provided slot properties, and forwards the remaining props to MUI.

Changes

ListItemText behavior

Layer / File(s) Summary
Configure text slot defaults
src/base/ListItemText/ListItemText.tsx
ListItemText normalizes incoming slot props, applies noWrap: true to primary and secondary slots, and passes the synthesized configuration to MUI.

Estimated code review effort: 1 (Trivial) | ~5 minutes

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly matches the main change: adding default ellipsis truncation to ListItemText.
Linked Issues check ✅ Passed The PR applies default noWrap behavior to ListItemText slot props, which enables the required ellipsis truncation.
Out of Scope Changes check ✅ Passed The only code change is the ListItemText truncation fix, so no clear out-of-scope work is introduced.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Comment @coderabbitai help to get the list of available commands.

@Utkarsh-Mauryaa

Copy link
Copy Markdown
Author

Before:
Screenshot From 2026-07-24 01-01-58

@Utkarsh-Mauryaa

Copy link
Copy Markdown
Author

After:
Screenshot From 2026-07-28 22-20-55

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/base/ListItemText/ListItemText.tsx`:
- Around line 16-17: Update the slot prop handling in ListItemText so
function-valued primary and secondary slot props remain callbacks receiving the
owner state, while object-valued props retain the default noWrap setting. Ensure
consumer-provided values override defaults in both cases.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: bc4baaf7-0ee7-4e97-afc9-31ca6d804c1b

📥 Commits

Reviewing files that changed from the base of the PR and between e20fd02 and 67735c2.

📒 Files selected for processing (1)
  • src/base/ListItemText/ListItemText.tsx

Comment thread src/base/ListItemText/ListItemText.tsx Outdated
@Utkarsh-Mauryaa
Utkarsh-Mauryaa force-pushed the Text-Overflow-Fix branch 2 times, most recently from f2e4293 to 23b60b6 Compare July 28, 2026 18:20

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/base/ListItemText/ListItemText.tsx`:
- Around line 7-10: Update withNoWrapDefault so both ownerState callback
parameters use the imported ListItemTextOwnerState type instead of any,
including the slotProp function signature and returned callback. Add the type
import from `@mui/material/ListItemText` and preserve the existing behavior.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 4369bda2-a2f6-44cf-b3a8-938d4db613fa

📥 Commits

Reviewing files that changed from the base of the PR and between 67735c2 and f2e4293.

📒 Files selected for processing (1)
  • src/base/ListItemText/ListItemText.tsx

Comment thread src/base/ListItemText/ListItemText.tsx Outdated
Signed-off-by: Utkarsh Maurya <deepraj5484@gmail.com>
Signed-off-by: Utkarsh Maurya <deepraj5484@gmail.com>
Signed-off-by: Utkarsh Maurya <deepraj5484@gmail.com>

@NSTKrishna NSTKrishna left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Utkarsh-Mauryaa You can add a tooltip that only appears when the ellipsis is active

@Utkarsh-Mauryaa

Copy link
Copy Markdown
Author

@NSTKrishna
The remaining enhancement i.e showing the tooltip only when the text is actually truncated is a separate UX concern and it would be better if we handle that in Meshery rather than Sistent. Addressing this point will close this issue #20483 in the downstream.

@KhushamBansal

Copy link
Copy Markdown
Contributor

@NSTKrishna I agree. We can show the full ListItemText in a tooltip when the user hovers over the list item.

@Utkarsh-Mauryaa

Copy link
Copy Markdown
Author

It needs to be merged first I guess before I can start working on the tooltip fix in the downstream. @KhushamBansal @NSTKrishna ??

@NSTKrishna

Copy link
Copy Markdown
Contributor

It needs to be merged first I guess before I can start working on the tooltip fix in the downstream. @KhushamBansal @NSTKrishna ??

Yes , you can cover the tooltip improvement in this issue meshery/meshery#20483

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug]: ListItemText does not truncate long text by default, causing hard clipping in constrained containers

3 participants