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

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; }
}