layer5io / layer5io/sistent

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

Open
#1,744 2 comments 0 reactions 1 assignee View on GitHub

@Utkarsh-Mauryaa is already working on this.

Since Jul 27, 2026.

kind/bug
Dominant language
TypeScript
Stars
137
Forks
239
Avg merge
4d 14h
Merged PRs (30d)
5

Description

Current Behavior
  • ListItemText does not apply any text truncation styling by default. When its content is longer than the available width and it's rendered inside a container that constrains width and sets overflow: hidden (a standard pattern for fixed-width sidebars, drawers, and similar layouts), the text is hard-clipped mid-character instead of degrading gracefully.
  • This happens because ListItemText/its inner Typography doesn't set white-space: nowrap, overflow: hidden, or text-overflow: ellipsis by default, so there's no ellipsis to signal that content has been cut off, text is simply cut wherever the ancestor's overflow boundary happens to fall.
Expected Behavior
  • ListItemText should truncate overflowing text gracefully with an ellipsis (…) instead of hard-clipping it, when rendered inside a width-constrained container.
  • Applying noWrap to the underlying Typography (e.g. via slotProps={{primary: { noWrap: true}}}) resolves this correctly, it sets white-space: nowrap; overflow: hidden; text-overflow: ellipsis, and since overflow: hidden is present, the flexbox automatic-minimum-size algorithm resolves the item's minimum width to 0 as a spec-defined side effect, allowing it to shrink and truncate properly. No additional min-width override is needed.
Screenshots/Logs
Image
Environment

Browser: Google Chrome
Operating System: Linux


Contributor Guides and Resources

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.