Skip to content

fix(spacing): symmetric internal padding in Dialog, Card, Tour, confirm-popover - #26

Merged
Mini-Sylar merged 1 commit into
mainfrom
fix/spacing-symmetry
Aug 10, 2026
Merged

fix(spacing): symmetric internal padding in Dialog, Card, Tour, confirm-popover#26
Mini-Sylar merged 1 commit into
mainfrom
fix/spacing-symmetry

Conversation

@Mini-Sylar

Copy link
Copy Markdown
Owner

Summary

  • Dialog and Card's body→footer gap was silently double-counted against header→body (both sides added padding for the same transition instead of one owning it), making it exactly 2x header→body. Fixed by letting the footer alone own the gap, matching how header→body already works.
  • Tour had the same double-count on description→actions, plus its own header/actions padding was stacking on top of Popover's shared .ui-popover-body padding (1rem), doubling the outer margin (2rem effective edge vs 0.5rem interior — a ~4:1 ratio). Zeroed Popover's body padding specifically when it wraps Tour content, so Tour's own padding is the single source of outer spacing.
  • confirmAction's popover surface (shared/confirm-popover.css) had no edge padding of its own — all of it came from Popover's shared 1rem — with interior gaps too tight relative to that (previously 0.35rem/0.6rem asymmetric, briefly over-corrected to a too-tight uniform 0.25rem). Now 0.5rem, matching the same 2:1 edge-to-interior ratio Tour uses in the same Popover body.

All four now follow one consistent, deliberate 2:1 edge-to-interior ratio, with every transition owned by exactly one side.

Verification

  • Real rendered measurement (Playwright) at true 16px root font-size (the docs site itself renders at 14px, which was a confound during review): Dialog header→body and body→footer both measured exactly 12px. Tour's interior gaps measured exactly equal both sides, and its outer margin dropped from double (32px) to single (16px) after the Popover body-padding fix.
  • Full monorepo pnpm build, pnpm typecheck:only, and pnpm --filter vael-ui test (691/691) all pass clean from a from-scratch rebuild.

Test plan

  • pnpm build (root) — clean
  • pnpm typecheck:only — clean
  • pnpm --filter vael-ui test — 691/691 passed
  • Real Playwright render + pixel measurement of Dialog and Tour at true 16px root

…rm-popover

Dialog and Card's body→footer gap was silently double-counted against
header→body (both the preceding and following section added padding for
the same transition instead of one owning it), making it exactly double.
Tour had the same double-count on its description→actions gap, plus its
own header/actions padding was stacking on top of Popover's shared body
padding, doubling the outer margin. confirmAction's popover surface had
no edge padding of its own (all from Popover's shared 1rem) with interior
gaps too tight relative to it. All four now use one consistent 2:1
edge-to-interior ratio, single-owner gaps on every transition.
@Mini-Sylar
Mini-Sylar merged commit a6821a6 into main Aug 10, 2026
1 check passed
@github-actions github-actions Bot mentioned this pull request Aug 10, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant