BuzzbeeSCD/openchamber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): actually shrink typography classes on mobile viewports (#1791)

Browse Source 
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>
This commit is contained in:
FoundrySeven
2026-06-28 01:39:44 +03:00
committed by GitHub
co-authored by James Pinnell Bohdan Triapitsyn
parent 4d4b3aa9d9
commit 1ac8fbad70
2 changed files with 14 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/styles/mobile.css
+12 -12
View File
@@ -44,20 +44,20 @@
:root.mobile-pointer:not(.desktop-runtime) {
--text-markdown: 1rem;
--text-code: 0.875rem;
--text-ui-header: 0.9375rem;
--text-ui-label: 0.875rem;
--text-meta: 0.875rem;
--text-micro: 0.8125rem;
--text-ui-header: 0.875rem;
--text-ui-label: 0.75rem;
--text-meta: 0.75rem;
--text-micro: 0.6875rem;
}
/* Force override with higher specificity */
:root.mobile-pointer:not(.desktop-runtime) * {
--text-markdown: 1rem !important;
--text-code: 0.875rem !important;
--text-ui-header: 0.9375rem !important;
--text-ui-label: 0.875rem !important;
--text-meta: 0.875rem !important;
--text-micro: 0.8125rem !important;
--text-ui-header: 0.875rem !important;
--text-ui-label: 0.75rem !important;
--text-meta: 0.75rem !important;
--text-micro: 0.6875rem !important;
}
/* Additional override for elements using typography classes */
@@ -325,19 +325,19 @@
}
.typography-ui-header {
font-size: 0.9375rem !important;
font-size: 0.875rem !important;
}
.typography-ui-label {
font-size: 0.875rem !important;
font-size: 0.75rem !important;
}
.typography-meta {
font-size: 0.875rem !important;
font-size: 0.75rem !important;
}
.typography-micro {
font-size: 0.8125rem !important;
font-size: 0.6875rem !important;
}
/* Fix font size for tool displays */