webclient: keep the artifacts tab icons on a phone
...
The artifacts panel has two squeeze ladders that did not know about each
other. At <=980px the mobile block hides the tab label, leaving icon +
count; a container query at <=360px separately hides the icon, because
the docked panel has no room for icon + label + count. The query
measures the panel, and on a phone the panel is the viewport — so on a
360px-wide screen (the most common Android width) both fired and every
tab became a bare counter: "Artifacts 0 Links 0 Files 0
Backgrounds 0". Between 361 and 980px the icons were fine, which is why
it only showed up on phones.
Wrap the icon-hiding step in @media (min-width: 981px), so it describes
the docked panel only, where the label is still attached and dropping
the icon still buys something. The panel is otherwise untouched.
Measured in Chromium against the built stylesheet and the component's
real scoped markup, old versus new side by side: at 320px and 360px the
icons go 0/4 -> 4/4 with no row overflow; 390, 430 and 900px are
unchanged; and every docked width tested (300, 340, 370, 450, 537px)
reports byte-identical values before and after. The pre-existing
overflow of the docked row between roughly 300 and 450px is untouched.
Eugene Sukhodolskiy
committed
15 hours ago