fix(tipcard): scale the name with the card width - #1313
Merged
Conversation
The card already derives every other metric from its width — the code, the avatar, the corner radius, the name-row padding — but the name itself was pinned at textMedium's 16sp, so it read oversized on the 230-wide menu card and undersized on the 305-wide full-screen one. Figma scales it with the rest of the card: 17 on the 269-wide base, 19.1 on the 302-wide full-screen card (node 9277:121421), 15.3 on the 242-wide You-page card (node 9276:4645). Derive it from the same width the other metrics come from, keeping textMedium's family, weight, and 1.25 line-height ratio. Converted through the density so the name holds its proportion at any user font scale, matching the card's fixed geometry.
github-actions
Bot
added
the
area: payments
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.
The tip card derives every metric from its width — the code, the avatar, the corner radius, the name-row padding — except the name itself, which was pinned at
textMedium's 16sp. So it read oversized on the 230-wide menu card and undersized on the 305-wide full-screen one.Figma scales the name with the rest of the card. Both instances land on the same ratio:
Both are
width × 17/269— the 269-wide base card draws it at 17.textMedium's family, weight, and 1.25 line-height ratio..sp: the card is fixed geometry and gets rendered for export, so the name has to hold its proportion whatever the user's font scale is.Menu card 230 → 14.5sp; scanner / full-screen card up to 305 → 19.3sp.
Also closes a cross-platform divergence: Android drew the name at 16 and iOS at 20 on cards of near-identical width. Mirrors code-payments/code-ios-app#632.