-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Link's inline-flex anchor silently defeats an ancestor Text maxLines clamp #6021
Description
Summary
Link renders its <a> with display: inline-flex. An inline-flex box establishes its own formatting context, so an ancestor's -webkit-line-clamp cannot clamp it — which makes the natural composition silently do nothing:
<Text maxLines={2}> <Link href={href}>{longTitle}</Link> </Text>
Nothing renders wrong; the text simply runs on past the requested lines. Link's own maxLines works correctly (it puts the clamp on its inner Text span), so the fix at the call site is to pass maxLines to the Link — but the failing shape is the one people reach for first, and it fails quietly.
Measured
@astryxdesign/core@0.5.2, Chromium, 390px viewport, 260px text column, identical in light and dark. "content" is the unclamped line count of the same string.
| pattern | visible lines | content lines | truncates |
|---|---|---|---|
<Link maxLines={2}> |
2 | 4 | yes |
<Text maxLines={2}> |
2 | 4 | yes |
<Text maxLines={2}><Link/></Text> |
4 | 4 | no |
<Link maxLines={2} display="block"> |
2 | 4 | yes |
The computed styles show why: the <a> is display: inline-flex, -webkit-line-clamp: none, and the clamp on the ancestor <span> (display: flow-root, -webkit-line-clamp: 2) has no effect on it.
Why it matters
A truncation that silently does not truncate is worse than one that errors: the layout looks plausible in the developer's short-title fixture and breaks on the first real record with a long address. It is also the composition the API invites — Text owns maxLines, Link owns the destination.
Suggested
Either render the anchor as inline (or flow-root) so an ancestor clamp applies, or — if inline-flex is load-bearing for the external-link icon and gap — document on both Link and Text that a Link child cannot be clamped by a Text ancestor and that Link must carry its own maxLines.