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

feat: S/M/L height drives mode-select row vs column layout

Browse Source 
When height is set to S, mode-select collapses to a row (mode button +
compact tools toggle side by side). M and L keep the vertical column
layout where each control gets its own full-width row. Driven by
data-size attribute set in JS so the switch is instant on click, not
reliant on a viewport media query. Removed the redundant max-height
landscape query.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Scott Idem
2026-04-28 21:20:28 -04:00
parent 93a692f3f0
commit d61e39d614
2 changed files with 14 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
cortex/static/app.js
View File

@@ -156,12 +156,16 @@
inputEl.style.height = Math.max(Math.min(sh, maxHeight), minH) + 'px'; inputEl.style.height = Math.max(Math.min(sh, maxHeight), minH) + 'px';
} }
const modeSelectEl = document.getElementById('mode-select');
function updateHeightUI() { function updateHeightUI() {
if (!heightCycleBtn) return; if (!heightCycleBtn) return;
const idx = HEIGHT_SIZES.indexOf(maxHeight); const idx = HEIGHT_SIZES.indexOf(maxHeight);
const i = idx >= 0 ? idx : 0; const i = idx >= 0 ? idx : 0;
heightCycleBtn.textContent = HEIGHT_LABELS[i]; heightCycleBtn.textContent = HEIGHT_LABELS[i];
heightCycleBtn.title = HEIGHT_TITLES[i]; heightCycleBtn.title = HEIGHT_TITLES[i];
// Drive row/column layout via data attribute
if (modeSelectEl) modeSelectEl.dataset.size = HEIGHT_LABELS[i].toLowerCase();
} }
if (heightCycleBtn) { if (heightCycleBtn) {

14
cortex/static/style.css
View File

@@ -652,6 +652,16 @@
gap: 4px; gap: 4px;
} }
/* S: collapse to a single row — mode button + compact tools toggle */
#mode-select[data-size="s"] {
flex-direction: row;
align-items: center;
}
#mode-select[data-size="s"] #tools-toggle {
padding: 3px 7px;
font-size: 0.75rem;
}
#mode-select-btn { #mode-select-btn {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -1603,7 +1613,3 @@
.hdr-btn { padding: 5px 8px; } .hdr-btn { padding: 5px 8px; }
} }
/* ── Short viewport (landscape phone) — restore row layout ── */
@media (max-height: 400px) and (min-width: 521px) {
#mode-select { flex-direction: row; align-items: center; }
}