Header: every control in the phone row is the same size - #76
Merged
Merged
Conversation
On phones Settings was 42x44 while Install was 34x35 and the menu 38x33: the only sizing rule matched .icon-ctl inside .header-quick, which Install does not carry and the menu sits outside. One --hdr-ctl size now applies to the logo, the pass select and the three buttons: 44px from 360px up, shrinking below so MAX SENIOR still fits beside the select's arrow. npm run verify now fails when those controls differ by more than 1px at 360 and 390px.
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.
2/10, low
Problem
On a phone the three buttons at the right of the header are three different sizes. At 390px wide Settings is 42x44, Install is 34x35 and the menu is 38x33, beside a pass select 44px tall and a 34px logo. The same sizes hold from 360 to 430px, in English and French, on the search and the results screen.
The only phone sizing rule,
.header-quick .icon-ctl, reaches Settings alone. Install is built withouticon-ctl, and the menu button sits in.header-nav, outside.header-quick, so both keep the size their padding and icon give them. The rule came with #51.Fix
The logo, the pass select and the three buttons now share one size,
--hdr-ctl. From 360px up it gives 44px squares, the height the select already had, so the header stays 74px tall. Below 360px the squares shrink, to 34px at 320px, and the select keeps the 131px that shows "MAX SENIOR" beside its arrow. Fixed 44px squares cut the name to "MAX SEN" at 320px, and on main the name already runs under the arrow there.Giving Install the
icon-ctlclass was rejected: that class'sdisplay: inline-flexwould beat the rule hiding Install on screens driven by a mouse. The size is still set per class, so a button added to the row later needs its selector added to the list.npm run verifynow fails when the header controls at 360 and 390px differ by more than 1px in height, or the buttons in width. Run against main's build, it fails at both widths. Above 860px nothing changes: the sizes at 1100 and 1366px are identical before and after.