fix(tipcard): scale the name with the card width - #632
Merged
Conversation
The card already derives every other metric from its width — the code, the avatar, the corner radius, the name's padding — but the name itself was pinned at appDisplayXS's 20, so it read oversized on the 242-wide You-page card and undersized on the 302-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 appDisplayXS's family and weight.
The card was laid out at a new size on each side of the expansion, so every metric it derives from that size — code, avatar, corner radius, padding — animated as an independent value, and the name's font size, which isn't animatable at all, snapped. The parts arrived at different moments and overlapped mid-flight. Draw the card once at the widest size it ever reaches (302) and run the expansion as a single scaleEffect. The whole figure travels together, and because the scale only ever goes down from the drawn size, the card is never sampled up.
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's padding — except the name itself, which was pinned at
appDisplayXS's 20. So it read oversized on the 242-wide You-page card and undersized on the 302-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.Derive the name size from the same width the other metrics come from, keeping
appDisplayXS's family and weight. You page 242 → 15.3, expanded and bill canvas 302 → 19.1, tips-flow screen 300 → 19.0.Also closes a cross-platform divergence: iOS drew the name at 20 and Android at 16 on cards of near-identical width. Mirrors code-payments/code-android-app#1313.
Also: expand the card as one figure.
Making the name width-derived surfaced a latent problem in the You-tab expansion. The card was laid out at a different size on each side of the transition, so every metric it derives from that size animated as an independent value — and font size isn't animatable at all, so the name snapped. The parts arrived at different moments and overlapped mid-flight.
The card is now drawn once at the widest size it ever reaches (302) and the expansion runs as a single
scaleEffect. The whole figure travels together, and since the scale only ever goes down from the drawn size, the card is never sampled up. Layout is unchanged — the fixed slot still governs the page.Android needs no equivalent change: it animates one
cardWidthand derives every metric from it in the same composition, so nothing can drift.