From f53195bd34bdce07e85e457464a505d74bbf851c Mon Sep 17 00:00:00 2001
From: jgor20 <102353650+jgor20@users.noreply.github.com>
Date: Sun, 11 Jan 2026 13:56:11 +0000
Subject: [PATCH] feat(ui): enhance header subtitles with badge styling

Refactor subtitle elements in accounts, dashboard, and models views to use styled badge containers with rounded backgrounds, borders, and improved typography for better visual consistency.
---
 public/views/accounts.html  | 12 +++++++-----
 public/views/dashboard.html | 14 ++++++++------
 public/views/models.html    | 12 +++++++-----
 3 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/public/views/accounts.html b/public/views/accounts.html
index f78347e..b9c39da 100644
--- a/public/views/accounts.html
+++ b/public/views/accounts.html
@@ -2,14 +2,16 @@
     <!-- Compact Header -->
     <div class="flex items-center justify-between gap-4 mb-6">
         <!-- Title with inline subtitle -->
-        <div class="flex items-baseline gap-3">
+        <div class="flex flex-wrap items-center gap-4">
             <h1 class="text-2xl font-bold text-white tracking-tight" x-text="$store.global.t('accountManagement')">
                 Account Management
             </h1>
-            <span class="text-[10px] font-mono text-gray-600 uppercase tracking-[0.15em]"
-                  x-text="$store.global.t('manageTokens')">
-                Manage Google Account tokens and authorization states
-            </span>
+            <div class="flex items-center h-6 px-3 rounded-full bg-space-800/80 border border-space-border/50 shadow-sm backdrop-blur-sm">
+                <span class="text-[10px] font-mono text-gray-400 uppercase tracking-wider"
+                      x-text="$store.global.t('manageTokens')">
+                    Manage Google Account tokens and authorization states
+                </span>
+            </div>
         </div>
 
         <!-- Action Buttons -->
diff --git a/public/views/dashboard.html b/public/views/dashboard.html
index a413da6..cec319c 100644
--- a/public/views/dashboard.html
+++ b/public/views/dashboard.html
@@ -2,18 +2,20 @@
     <!-- Compact Header -->
     <div class="flex items-center justify-between gap-4 mb-6">
         <!-- Title with inline subtitle -->
-        <div class="flex items-baseline gap-3">
+        <div class="flex flex-wrap items-center gap-4">
             <h1 class="text-2xl font-bold text-white tracking-tight" x-text="$store.global.t('dashboard')">
                 Dashboard
             </h1>
-            <span class="text-[10px] font-mono text-gray-600 uppercase tracking-[0.15em]"
-                  x-text="$store.global.t('systemDesc')">
-                CLAUDE PROXY SYSTEM
-            </span>
+            <div class="flex items-center h-6 px-3 rounded-full bg-space-800/80 border border-space-border/50 shadow-sm backdrop-blur-sm">
+                <span class="text-[10px] font-mono text-gray-400 uppercase tracking-wider"
+                      x-text="$store.global.t('systemDesc')">
+                    CLAUDE PROXY SYSTEM
+                </span>
+            </div>
         </div>
 
         <!-- Compact Status Indicator -->
-        <div class="flex items-center gap-2 px-2.5 py-1.5 rounded-lg bg-space-900/60 border border-space-border/40">
+        <div class="flex items-center gap-2 px-2.5 py-1.5 rounded-lg bg-space-900/60 border border-space-border/40 whitespace-nowrap flex-shrink-0">
             <div class="relative flex items-center justify-center">
                 <span class="absolute w-1.5 h-1.5 bg-neon-green rounded-full animate-ping opacity-75"></span>
                 <span class="relative w-1.5 h-1.5 bg-neon-green rounded-full"></span>
diff --git a/public/views/models.html b/public/views/models.html
index 5efcde1..aa687e7 100644
--- a/public/views/models.html
+++ b/public/views/models.html
@@ -2,14 +2,16 @@
     <!-- Compact Header -->
     <div class="flex items-center justify-between gap-4 mb-6">
         <!-- Title with inline subtitle -->
-        <div class="flex items-baseline gap-3">
+        <div class="flex flex-wrap items-center gap-4">
             <h1 class="text-2xl font-bold text-white tracking-tight" x-text="$store.global.t('models')">
                 Models
             </h1>
-            <span class="text-[10px] font-mono text-gray-600 uppercase tracking-[0.15em]"
-                  x-text="$store.global.t('modelsPageDesc')">
-                Real-time quota and status for all available models.
-            </span>
+            <div class="flex items-center h-6 px-3 rounded-full bg-space-800/80 border border-space-border/50 shadow-sm backdrop-blur-sm">
+                <span class="text-[10px] font-mono text-gray-400 uppercase tracking-wider"
+                      x-text="$store.global.t('modelsPageDesc')">
+                    Real-time quota and status for all available models.
+                </span>
+            </div>
         </div>
 
         <!-- Search Bar -->