From 105ff8507f08f0e497bc54b955785259a7e9b5e0 Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Fri, 15 May 2026 21:19:08 -0400
Subject: [PATCH] fix: restore proper tab button CSS in help.html
 (browser-reset issue with Tailwind preflight: false)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 cortex/static/help.html | 24 ++++++++++++++++--------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/cortex/static/help.html b/cortex/static/help.html
index 504fe8f..b8261a6 100644
--- a/cortex/static/help.html
+++ b/cortex/static/help.html
@@ -108,13 +108,10 @@
     </div>
 
     <!-- Tab bar -->
-    <div class="flex gap-1 mb-5 border-b border-pg-border -mb-px">
-      <button class="tab-btn px-4 py-2 text-sm font-medium text-pg-dim border-b-2 border-transparent -mb-px cursor-pointer transition-colors hover:text-pg-bright active"
-              data-tab="ui">UI Guide</button>
-      <button class="tab-btn px-4 py-2 text-sm font-medium text-pg-dim border-b-2 border-transparent -mb-px cursor-pointer transition-colors hover:text-pg-bright"
-              data-tab="tools">Tools</button>
-      <button class="tab-btn px-4 py-2 text-sm font-medium text-pg-dim border-b-2 border-transparent -mb-px cursor-pointer transition-colors hover:text-pg-bright"
-              data-tab="persona" id="tab-btn-persona">Persona</button>
+    <div class="tab-bar">
+      <button class="tab-btn active" data-tab="ui">UI Guide</button>
+      <button class="tab-btn" data-tab="tools">Tools</button>
+      <button class="tab-btn" data-tab="persona" id="tab-btn-persona">Persona</button>
     </div>
 
     <div id="tab-ui"      class="tab-panel active"><div class="help-body"><p class="text-pg-dimmer text-sm text-center py-8">Loading…</p></div></div>
@@ -123,7 +120,18 @@
   </div>
 
   <style>
-    /* Active tab indicator — must be CSS since Tailwind can't match .active sibling state */
+    .tab-bar {
+      display: flex; gap: 0.25rem; margin-bottom: 1.5rem;
+      border-bottom: 1px solid var(--pg-border);
+    }
+    .tab-btn {
+      padding: 0.45rem 1rem; font-size: 0.85rem; font-weight: 500;
+      color: var(--pg-dim); background: none; border: none;
+      border-bottom: 2px solid transparent; margin-bottom: -1px;
+      cursor: pointer; transition: color 0.15s, border-color 0.15s;
+      font-family: inherit;
+    }
+    .tab-btn:hover { color: var(--pg-bright); }
     .tab-btn.active { color: var(--pg-accent); border-bottom-color: var(--pg-accent); }
   </style>