Scott.Idem/Cortex-Inara
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

2
cortex/static/app.js
View File

@@ -118,7 +118,7 @@
function setBackendUI(backend) {
primaryBackend = backend;
backendToggle.textContent = backend;
backendToggle.className = 'hdr-btn' + (backend === 'gemini' ? ' gemini' : '');
backendToggle.className = 'ctx-btn' + (backend === 'gemini' ? ' mem-on' : '');
}
backendToggle.addEventListener('click', async () => {

18
cortex/static/index.html
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>

27
cortex/static/style.css
View File

@@ -142,7 +142,6 @@
.hdr-btn:hover { border-color: var(--muted); color: var(--text); }
#backend-toggle.gemini { border-color: var(--success-dim); color: var(--success); }
#sessions-btn { margin-left: auto; }
/* Sessions panel */
@@ -150,8 +149,8 @@
display: none;
position: absolute;
top: calc(100% + 4px);
right: 20px;
width: 300px;
right: 12px;
width: min(300px, calc(100vw - 24px));
max-height: 340px;
overflow-y: auto;
background: var(--surface);
@@ -710,8 +709,8 @@
display: none;
position: absolute;
top: calc(100% + 4px);
right: 20px;
width: 280px;
right: 12px;
width: min(280px, calc(100vw - 24px));
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
@@ -767,10 +766,6 @@
#ctx-distill-status.show { opacity: 1; }
#ctx-distill-status.err { color: var(--error-text); }
/* Theme toggle + font size */
#theme-btn { font-size: 0.85rem; padding: 5px 8px; }
#font-size-btn { min-width: 32px; text-align: center; }
/* Ctx header button — shows current tier as a dim superscript */
#ctx-open-btn .tier-badge {
font-size: 0.6em;
@@ -902,3 +897,17 @@
color: var(--accent);
font-weight: 600;
}
/* ── Mobile responsive ───────────────────────────────────── */
@media (max-width: 520px) {
header { padding: 8px 12px; gap: 8px; }
header .subtitle { display: none; }
#messages { padding: 12px; }
#input-area { padding: 10px 12px; }
}
@media (max-width: 380px) {
header .name { font-size: 1rem; }
.header-emoji { font-size: 1.3rem; }
.hdr-btn { padding: 5px 8px; }
}