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>
This commit is contained in:
Scott Idem
2026-05-15 21:19:08 -04:00
parent c2a12a895a
commit 105ff8507f

View File

@@ -108,13 +108,10 @@
</div> </div>
<!-- Tab bar --> <!-- Tab bar -->
<div class="flex gap-1 mb-5 border-b border-pg-border -mb-px"> <div class="tab-bar">
<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" <button class="tab-btn active" data-tab="ui">UI Guide</button>
data-tab="ui">UI Guide</button> <button class="tab-btn" 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" <button class="tab-btn" data-tab="persona" id="tab-btn-persona">Persona</button>
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> </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> <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> </div>
<style> <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); } .tab-btn.active { color: var(--pg-accent); border-bottom-color: var(--pg-accent); }
</style> </style>