From 1ac8fbad701e05ec710419f8fbda00bdc273578a Mon Sep 17 00:00:00 2001
From: FoundrySeven <119387799+foundryseven@users.noreply.github.com>
Date: Sun, 28 Jun 2026 08:39:44 +1000
Subject: [PATCH] fix(ui): actually shrink typography classes on mobile
 viewports (#1791)

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>
---
 CHANGELOG.md                      |  2 ++
 packages/ui/src/styles/mobile.css | 24 ++++++++++++------------
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 86ff11f4..830b5cd9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -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.
diff --git a/packages/ui/src/styles/mobile.css b/packages/ui/src/styles/mobile.css
index 20cb5b9c..d03f4873 100644
--- a/packages/ui/src/styles/mobile.css
+++ b/packages/ui/src/styles/mobile.css
@@ -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 */