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:
@@ -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 & 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 & 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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user