fix: header breadcrumb garbling when a long domain overflows the row#277
Merged
Conversation
The header row is capped at ruleWidthMax (72) and paddingLeft sits inside that width, so a long domain pushed the breadcrumb past the budget. Yoga then distributed the shrink across every Text node: the cmd lost its last char, the domain lost the final 't' of '.dot', and the flexGrow gap before the version label collapsed to zero. Pre-compute the breadcrumb in a pure sibling module so the left side always fits and yoga never shrinks anything. Degradation order, mildest first: narrow the separators, tighten the version gap, middle-truncate username then domain (keeping the '.dot' suffix visible), below-floor truncation, then drop the squeezable pieces entirely. cmd and network are never cut. The exact field repro is pinned as a regression test.
Contributor
|
Dev build ready — try this branch: |
Contributor
E2E Test Pass · ✅ PASSTag:
Sentry traces: view spans for this run |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
With a long domain, the deploy TUI header rendered as:
playground deployclipped toplayground deplotof.dotRoot cause
The header row is capped at
LAYOUT.ruleWidthMax(72), andpaddingLeftsits inside that width (yoga is border-box), so the breadcrumb really gets 70 columns. The content above needs 73+. On overflow, yoga distributes the shrink across every<Text>node, clipping each piece without ellipsis, and the gap before the version label (flexGrow leftover) collapses to zero. Reproduced character-for-character with a scripted Ink render.Fix
New pure module
src/utils/ui/theme/headerLayout.tspre-computes the breadcrumb so the left side always fits and yoga never has to shrink anything. Degradation order, mildest first:·to·).dotsuffix visiblecmdand the network label are never cut. The field repro now renders losslessly:Verification
headerLayout.test.ts, including the exact field repro pinned as a regression testpnpm format:check,pnpm lint:license,pnpm test(637 passed) all green;tsc --noEmiterror count unchanged at the 13 baseline