fix(react): remove false ellipsis when text fits in Chrome

[maksym-shynkarenko]

Problem

Chrome incorrectly displayed ellipsis ("...") for TextEllipsis component with maxLines prop, even when text fit within the specified number of lines. This was particularly noticeable with short text using maxLines={2} or higher.

Root Cause

The .TextEllipsis:after pseudo-element with display: block (added in #1926 as a Safari workaround) caused Chrome to miscalculate overflow when combined with -webkit-line-clamp in multiline mode.

Solution

Changed the CSS selector from .TextEllipsis:after to .TextEllipsis:not(.TextEllipsis--multiline):after to apply the Safari workaround only to single-line ellipsis. This prevents the Chrome rendering bug while preserving the original Safari fix.

Result

• ✅ Ellipsis now displays only when text genuinely exceeds the line count
• ✅ Safari native tooltip workaround preserved for single-line mode

Video

Video: fix in Chrome and Safari

Screen.Recording.2026-02-03.at.16.08.25.1.mov

Video: responsiveness

Screen.Recording.2026-01-19.at.19.48.14.mov

Closes: Walnut #13167

[Copilot]

Pull request overview

This PR fixes a Chrome rendering bug where the TextEllipsis component incorrectly displayed ellipsis even when text fit within the specified maxLines. The solution moves -webkit-line-clamp application from static props to dynamic management within the ResizeObserver, measuring actual overflow and conditionally removing the property when no overflow exists.

Changes:

• Removed static -webkit-line-clamp application from component props
• Implemented dynamic -webkit-line-clamp management in ResizeObserver callback
• Added maxLines to useEffect dependency array

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[aws-amplify-us-east-1]

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-2206.d15792l1n26ww3.amplifyapp.com

[Bracciata]

This looks good to me!

[Zidious]

This PR references closing https://github.com/dequelabs/walnut/issues/13260 but this fix seems unrelated to that, am I incorrect in thinking that?

[maksym-shynkarenko]

This PR references closing dequelabs/walnut#13260 but this fix seems unrelated to that, am I incorrect in thinking that?

yeah, sorry, the wrong PR for that ticket, wil lremove it from PR description

Applied the solution .TextEllipsis:not(.TextEllipsis--multiline):after

[Zidious]

LGTM - we'll want final 👀 from @anastasialanz

[anastasialanz]

I made an issue to add screenshots for this component.

#2229