UI: mobile-friendly header — move backend/display into settings panel

Header trimmed to 4 buttons (Sessions, Files, ⚙, ?). Backend toggle,
font size, and theme moved into the ⚙ settings panel under new Backend
and Display sections. Panels use responsive widths to avoid overflow on
small screens. Mobile breakpoints tighten padding and hide subtitle.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Scott Idem
2026-03-17 23:03:55 -04:00
parent ce1561572a
commit 7b51e7cc44
4 changed files with 45 additions and 19 deletions

View File

@@ -28,10 +28,7 @@
</div>
<button id="sessions-btn" class="hdr-btn">Sessions</button>
<button id="files-btn" class="hdr-btn">Files</button>
<button id="ctx-open-btn" class="hdr-btn" title="Context &amp; memory settings"><span class="tier-badge">2</span></button>
<button id="backend-toggle" class="hdr-btn" title="Click to switch primary backend">claude</button>
<button id="font-size-btn" class="hdr-btn" title="Cycle font size">Aa</button>
<button id="theme-btn" class="hdr-btn" title="Toggle light/dark mode"></button>
<button id="ctx-open-btn" class="hdr-btn" title="Settings"><span class="tier-badge">2</span></button>
<button id="help-btn" class="hdr-btn" title="Help &amp; reference">?</button>
<div id="sessions-panel"></div>
@@ -65,6 +62,19 @@
</div>
<div id="ctx-distill-status"></div>
</div>
<div class="ctx-section">
<div class="ctx-section-title">Backend</div>
<div class="ctx-row">
<button id="backend-toggle" class="ctx-btn" title="Click to switch primary backend">claude</button>
</div>
</div>
<div class="ctx-section">
<div class="ctx-section-title">Display</div>
<div class="ctx-row">
<button id="font-size-btn" class="ctx-btn" title="Cycle font size: normal → large → small">Aa</button>
<button id="theme-btn" class="ctx-btn" title="Toggle light/dark mode"></button>
</div>
</div>
</div>
</header>