Repository navigation
web: the map bar is two or three rows tall between 641 and 700 px #727
Description
What happens
Between 641 and about 700 px wide, #bar does not fit one row: 90 px high for a guest, 76 px for a member. That is a phone held sideways (667 px on an iPhone SE) or a narrow window. Below 640 px the narrow bar (#561) takes over and it is one row again. From 740 px it is 64 px or less.
e2e/barlayout.spec.js measures 375, 768 and 1280 px only, so no test fails.
Measured
Height of #bar on master (4804a9e), in px:
| Width | Guest, system font | Member, system font | Guest, Verdana | Member, Verdana |
|---|---|---|---|---|
| 641 | 90 | 76 | 90 | 76 |
| 660 | 90 | 62 | 90 | 76 |
| 700 | 64 | 62 | 90 | 62 |
| 740 | 64 | 62 | 64 | 62 |
| 768 | 64 | 48 | 64 | 62 |
| 900 | 48 | 48 | 64 | 48 |
System font: Chromium on macOS. Verdana stands in for the wider font on the CI runner: with it, the bar test at 768 px failed on #725 until Export moved to the menu below 900 px.
Expected
One row, at most 64 px, at every width: the shape barlayout.spec.js pins at the widths it measures.
To reproduce
Open the map as a guest in a 660 px wide window and read document.getElementById('bar').getBoundingClientRect().height.
Activity
fix(web): keep the map bar on one row between 641 and 767 px
fix(web): keep the map bar on one row between 641 and 767 px (efiten#732