fix(yoga): resolve in-flow child percent against parent content box (B7 / #60)#88
Merged
Merged
Conversation
…60) Co-Authored-By: Mark <psyhik17@gmail.com> Co-Authored-By: Claude <noreply@anthropic.com>
…loses #60) Co-Authored-By: Mark <psyhik17@gmail.com> Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Mark <psyhik17@gmail.com> Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Mark <psyhik17@gmail.com> Co-Authored-By: Claude <noreply@anthropic.com>
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
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.
Closes #60.
Summary
<Box width="100%">inside a bordered or padded parent used to overflow into the parent's border/padding zone — the percent resolved against the parent's OUTER width instead of its content-box width. A right-anchored element (e.g. a titlebar close button atx = N − 1) would land underneath the right border and become invisible or partially clipped.Pre-fix the doc comment in `layoutNode` already asserted "Per CSS, a % width resolves against the parent's content-box width" — but the code passed outer width as the percent reference. The comment was right; the code was wrong. The fix is two lines.
What changed
`packages/shared/src/yoga-layout/index.ts` — `ownerW`/`ownerH` (the reference sizes used when resolving children's percentage values) now derive from `innerMainSize`/`innerCrossSize` (parent content box) instead of `width`/`height` (parent outer). `innerMainSize`/`innerCrossSize` were already computed two lines above.
Behavior cascade
width="100%",height="100%",min/maxWidth: percent,min/maxHeight: percent,flexBasis: percenton an in-flow child all resolve against parent content box. Matches CSS containing-block rules.position: relativepercent offsets resolve against parent content box.margin/padding/bordernow also resolve against parent content box, not parent outer. Yoga upstream resolves them against outer. Documented deviation — TUI consumers expect "% on a child = fraction of available space inside the parent", which is more consistent with this fix. Rare in practice; small magnitude even when present.layoutAbsoluteChildis on a separate path and untouched).top/right/bottom/left) all resolve againstownerWidthper existing Yoga upstream convention — not changed here.Test plan
packages/shared/src/yoga-layout/index.test.ts) — bordered parent +width="100%"child asserts content-box widthwidth="100%"height="100%")width="50%"against content box)minWidth,maxWidthpercentflexBasispercent on a row containerposition: relativeleftpercentmarginpercentposition: absolutechildren stay on the padding-box pathpnpm typecheck/lint/build/test— 772 passed (was 760; +12 new for B7)