Rank: stack under the profile icon, tappable hint, overflow-proof label - #107
Merged
Conversation
Two changes. TAP-TO-HINT Desktop showed the 'what do I need for the next rank' hint on hover for free. Touch did not: Tooltip's default touch trigger is a LONG PRESS, which nobody discovers. triggerMode: tap adds the tap trigger without removing hover, and showDuration goes to 5s because the 1.5s default is tuned for a hover the user can simply hold. The hint is also reworded as an action - 'Gold - add 1.4 TB of storage to reach Platinum' - since the point is telling the user what to DO. PLACEMENT Moved out of the title and into the leading slot, stacked directly under the profile avatar. That costs something, and the cost is deliberate: the toolbar is a fixed 56px, so the column (avatar 24 + gap 2 + badge 28 = 54) only fits if the avatar drops to radius 12 and the badge's tap target is 28 rather than the ideal 48. The header must not grow - that was an explicit requirement - so it wins over the larger target. The badge is still more than twice the height of the glyph row it wraps. leadingWidth is reserved from the VIEWPORT and the signed-in flag only, never from the rank. The rank arrives asynchronously, so deriving width from it would jolt the title sideways the moment billing resolved. Avatar and badge are separate tap targets on purpose: the avatar opens the profile sheet, the badge shows the hint. One shared gesture region would make the hint unreachable. Tests updated to the new geometry and extended: the badge must sit BELOW the avatar and left-aligned with it, the stacked column must fit the toolbar, and the rank must never overlap the title.
The badge's Row had no protection against its own content exceeding the width it is given, so the tier name could paint overflow stripes into the header. Widget tests caught it (their default font is a full em square per glyph, so 'Platinum' is wider there) but it is a real production path too: an OS-level text-scale setting makes the name wider than the reserved leading width. The pips are the rank signal and stay fixed; the NAME is what yields - Flexible + ellipsis, so the badge cannot overflow whatever width it gets.
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.
Follow-up to #106 from live testing.
TAP-TO-HINT: desktop got the hint on hover for free; touch did not - Tooltip's default touch trigger is a LONG PRESS, which nobody discovers. Now triggerMode: tap (hover still works), showDuration 5s, and the hint reads as an action: 'Gold - add 1.4 TB of storage to reach Platinum'.
PLACEMENT: moved out of the title into the leading slot, stacked directly under the profile avatar. That has a deliberate cost - the toolbar is a fixed 56px, so the column (avatar 24 + gap 2 + badge 28 = 54) only fits if the avatar drops to radius 12 and the tap target is 28 rather than the ideal 48. Not growing the header was an explicit requirement, so it wins; the target is still more than twice the glyph row.
leadingWidth is reserved from the VIEWPORT and signed-in flag only, never the rank. The rank arrives async, so deriving width from it would jolt the title sideways the moment billing resolved.
Avatar and badge are separate tap targets: avatar opens the profile sheet, badge shows the hint. One shared region would make the hint unreachable.
OVERFLOW GUARD: the badge's Row had no protection against its content exceeding its slot. The widget tests caught it, but it is a real production path - a large OS text scale makes 'Platinum' wider than the reserved width. Pips stay fixed; the name yields via Flexible + ellipsis.
analyze clean, 964 tests.