From 4797c9b30c5c6e8849fb4b85e03fd348416d6b93 Mon Sep 17 00:00:00 2001
From: David Kaya <david@kaya.sk>
Date: Wed, 25 Mar 2026 20:40:10 +0100
Subject: [PATCH] fix: use plain CSS class for pill font size instead of
 Tailwind token

The @theme --text-pill token and text-[8px] arbitrary value both
failed to apply at dev time due to @tailwindcss/vite not generating
the utility rule during HMR. Use a plain .pill-trigger CSS class
in styles.css instead, which is always available regardless of
Tailwind's JIT scanner behavior.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 src/renderer/components/chat/InlinePills.tsx | 10 +++++-----
 src/renderer/styles.css                      |  9 +++++++--
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/renderer/components/chat/InlinePills.tsx b/src/renderer/components/chat/InlinePills.tsx
index 0e461b0..db8fa99 100644
--- a/src/renderer/components/chat/InlinePills.tsx
+++ b/src/renderer/components/chat/InlinePills.tsx
@@ -63,7 +63,7 @@ export function InlineModelPill({
       <button
         aria-expanded={open}
         aria-haspopup="listbox"
-        className={`inline-flex items-center gap-1 rounded border px-1.5 py-0.5 text-pill font-medium transition ${
+        className={`inline-flex items-center gap-1 rounded border px-1.5 py-0.5 pill-trigger font-medium transition ${
           open
             ? 'border-indigo-500/40 bg-indigo-500/10 text-indigo-300'
             : 'border-zinc-700/60 bg-zinc-800/40 text-zinc-400 hover:border-zinc-600 hover:text-zinc-300'
@@ -154,7 +154,7 @@ export function InlineThinkingPill({
 
   if (supportedEfforts && supportedEfforts.length === 0) {
     return (
-      <span className="inline-flex items-center gap-1 rounded border border-zinc-800/40 bg-zinc-800/20 px-1.5 py-0.5 text-pill text-zinc-600">
+      <span className="inline-flex items-center gap-1 rounded border border-zinc-800/40 bg-zinc-800/20 px-1.5 py-0.5 pill-trigger text-zinc-600">
         <Sparkles className="size-2.5" />
         N/A
       </span>
@@ -168,7 +168,7 @@ export function InlineThinkingPill({
       <button
         aria-expanded={open}
         aria-haspopup="listbox"
-        className={`inline-flex items-center gap-1 rounded border px-1.5 py-0.5 text-pill font-medium transition ${
+        className={`inline-flex items-center gap-1 rounded border px-1.5 py-0.5 pill-trigger font-medium transition ${
           open
             ? 'border-indigo-500/40 bg-indigo-500/10 text-indigo-300'
             : 'border-zinc-700/60 bg-zinc-800/40 text-zinc-400 hover:border-zinc-600 hover:text-zinc-300'
@@ -230,7 +230,7 @@ export function InlineToolsPill({
       <button
         aria-expanded={open}
         aria-haspopup="listbox"
-        className={`inline-flex items-center gap-1 rounded border px-1.5 py-0.5 text-pill font-medium transition ${
+        className={`inline-flex items-center gap-1 rounded border px-1.5 py-0.5 pill-trigger font-medium transition ${
           open
             ? 'border-indigo-500/40 bg-indigo-500/10 text-indigo-300'
             : 'border-zinc-700/60 bg-zinc-800/40 text-zinc-400 hover:border-zinc-600 hover:text-zinc-300'
@@ -340,7 +340,7 @@ export function InlineApprovalPill({
       <button
         aria-expanded={open}
         aria-haspopup="listbox"
-        className={`inline-flex items-center gap-1 rounded border px-1.5 py-0.5 text-pill font-medium transition ${
+        className={`inline-flex items-center gap-1 rounded border px-1.5 py-0.5 pill-trigger font-medium transition ${
           open
             ? 'border-indigo-500/40 bg-indigo-500/10 text-indigo-300'
             : isOverridden
diff --git a/src/renderer/styles.css b/src/renderer/styles.css
index 58b3ef7..0186599 100644
--- a/src/renderer/styles.css
+++ b/src/renderer/styles.css
@@ -10,8 +10,6 @@
   --color-accent: #6366f1;
   --color-accent-hover: #818cf8;
   --color-accent-muted: rgba(99, 102, 241, 0.15);
-  --text-pill: 0.5rem;
-  --text-pill--line-height: 1;
 }
 
 :root {
@@ -28,6 +26,13 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+/* ── Inline pill trigger buttons ────────────────────────────── */
+
+.pill-trigger {
+  font-size: 0.5rem;
+  line-height: 1;
+}
+
 /* ── Light mode colour overrides ────────────────────────────── */
 
 [data-theme="light"] {