The mobile stylesheet at packages/ui/src/styles/mobile.css defines a
@media (max-width: 1024px) block that overrides the --text-ui-header,
--text-ui-label, --text-meta, and --text-micro custom properties to
shrink labels on phones. The values it was setting were equal to (or
only 1px smaller than) the desktop defaults, so the model selector,
agent selector, and any other element using these classes rendered at
the same size on a 360px-wide phone as on a 1920px desktop.
Fix: tighten the mobile values to 0.875rem (ui-header), 0.75rem
(ui-label, meta), and 0.6875rem (micro), so that mobile is genuinely
smaller than desktop. The same change is applied to the iOS PWA
standalone block lower in the file so both code paths produce the same
size.
Fixes#504
Signed-off-by: Bohdan Triapitsyn <artmore@protonmail.com>
Co-authored-by: James Pinnell <james@example.com>
Co-authored-by: Bohdan Triapitsyn <artmore@protonmail.com>
