From cbfad0853c758632905f66d4583c92f3609df37c Mon Sep 17 00:00:00 2001
From: Sergey Kozyrenko <sirozha_blr@tut.by>
Date: Thu, 16 Jul 2026 22:05:06 +0700
Subject: [PATCH] fix(settings): contrast the variables count badge, scope the
 tab overrides to the split
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The count badge sat on a bg-secondary button, where every neutral surface token
is within 1.08–1.23 contrast of it: secondary painted the pill invisible and
outline drew its border in --border, at 1.18. Only --primary separates (2.76), so
the badge is default.

The tab overrides exist because the desktop panel sits on its own surface. Below
the split they fought the shadcn defaults, so they are xl:-scoped now — the same
1280 the layout branches on. Stacked widths get bg-muted with a bg-background
active tab again; 1280+ keeps bg-background with a bg-card active tab.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/src/pages/settings/settings-prompt.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/pages/settings/settings-prompt.tsx b/frontend/src/pages/settings/settings-prompt.tsx
index 41a1541f..a7ee9a37 100644
--- a/frontend/src/pages/settings/settings-prompt.tsx
+++ b/frontend/src/pages/settings/settings-prompt.tsx
@@ -831,16 +831,16 @@ function SettingsPrompt() {
                 </p>
             </div>
 
-            <TabsList className="dark:bg-background w-full">
+            <TabsList className="xl:dark:bg-background w-full">
                 <TabsTrigger
-                    className="dark:data-[state=active]:bg-card flex-1"
+                    className="xl:dark:data-[state=active]:bg-card flex-1"
                     value="system"
                 >
                     <Code className="size-4" />
                     System Prompt
                 </TabsTrigger>
                 <TabsTrigger
-                    className="dark:data-[state=active]:bg-card flex-1"
+                    className="xl:dark:data-[state=active]:bg-card flex-1"
                     disabled={!hasHumanPrompt}
                     value="human"
                 >
@@ -1081,7 +1081,7 @@ function Variables({ currentTemplate, onEditorFocus, onVariableClick, variables
                     {VARIABLES_TITLE}
                     <Badge
                         className="ml-auto font-normal tabular-nums"
-                        variant="outline"
+                        variant="default"
                     >
                         {variables.length}
                     </Badge>