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
CHANGELOG.md
+2
View File
@@ -4,6 +4,8 @@ All notable changes to this project will be documented in this file.
## [Unreleased]
- Chat: selecting a user-installed skill from the slash command menu now invokes the skill and injects its content, instead of inserting the skill name as plain text.
- UI: typography classes (ui-header, ui-label, meta, micro) now actually shrink on mobile viewports — they previously rendered at the same size as desktop despite the mobile clamp rules.
## [1.13.5] - 2026-06-27
- CLI: global web installs no longer crash on startup when tunnel commands load ngrok capabilities.
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 */