fix(webkit): tighten the card-box header padding to spacing-sm - #842
Open
gabriel-lisboa-azion wants to merge 2 commits into
Open
fix(webkit): tighten the card-box header padding to spacing-sm#842gabriel-lisboa-azion wants to merge 2 commits into
gabriel-lisboa-azion wants to merge 2 commits into
Conversation
Taken from console screens that wanted a tighter header inset; it also makes the header square in its own padding (px = py = sm). It leaves the card's bands disagreeing on horizontal inset — header sm, padded content md, footer md — and no longer matching an Item row (md). That tradeoff is spelled out in the PR for a design call rather than settled here.
…nset Only the four mobile card-box snapshots move. The runner compares with jest-image-snapshot at failureThreshold 0.01 (1% of pixels), so the 4px title shift is 1.3% of a 343x132 mobile canvas (rewritten) and 0.36% of a 1248x132 desktop one (under threshold, so it neither fails nor rewrites).
herbert-julio-azion
approved these changes
Jul 31, 2026
|
|
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
3 participants
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.
What
One class on the
CardBoxheader band: horizontal padding--spacing-md→--spacing-sm.The header becomes square in its own padding (
px=py=sm) and tighter than before.The change came out of console screens that wanted a tighter header inset, but it makes the card's three bands disagree on horizontal inset:
--spacing-smpadded)--spacing-md--spacing-mdIt also no longer lines up with the rows a card usually contains: an
Itemrow isp-[var(--spacing-md)]at medium andpx-[var(--spacing-md)]at small.So the honest options are:
smtoo, so the card is internally consistent at the tighter density (bigger visual diff, more baselines).mdin the design system and carry the tighter header in the consuming app.I have no evidence for (1) beyond "it looked better in the screens it was built for", which is why it is spelled out rather than argued.
Note
Visible, so the
linux/baselines are regenerated on this branch. Expected diff scope: card-box stories plus components composing a card header.Baseline scope (why only 4 files)
The regenerated
linux/baselines touch only the mobile card-box snapshots. That is the 1% pixel threshold the gate uses (toMatchImageSnapshot({ failureThreshold: 0.01, failureThresholdType: 'percent' })): the 4px title shift is ~1.3% of a 343×132 mobile canvas (over threshold → rewritten) and ~0.36% of a 1248×132 desktop one (under threshold → neither fails nor rewrites). Measured with pngjs: header title ink starts at x=14 on mobile vs x=18 on desktop, while the card body row sits at x=18 in both, so the crops share an origin.