From d61e39d614a11659ffe1ca9755f53f10bea05b65 Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Tue, 28 Apr 2026 21:20:28 -0400
Subject: [PATCH] feat: S/M/L height drives mode-select row vs column layout

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>
---
 cortex/static/app.js    |  4 ++++
 cortex/static/style.css | 14 ++++++++++----
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/cortex/static/app.js b/cortex/static/app.js
index 5be09f7..d10f608 100644
--- a/cortex/static/app.js
+++ b/cortex/static/app.js
@@ -156,12 +156,16 @@
             inputEl.style.height = Math.max(Math.min(sh, maxHeight), minH) + 'px';
         }
 
+        const modeSelectEl = document.getElementById('mode-select');
+
         function updateHeightUI() {
             if (!heightCycleBtn) return;
             const idx = HEIGHT_SIZES.indexOf(maxHeight);
             const i = idx >= 0 ? idx : 0;
             heightCycleBtn.textContent = HEIGHT_LABELS[i];
             heightCycleBtn.title = HEIGHT_TITLES[i];
+            // Drive row/column layout via data attribute
+            if (modeSelectEl) modeSelectEl.dataset.size = HEIGHT_LABELS[i].toLowerCase();
         }
 
         if (heightCycleBtn) {
diff --git a/cortex/static/style.css b/cortex/static/style.css
index 3134fcc..6f610f9 100644
--- a/cortex/static/style.css
+++ b/cortex/static/style.css
@@ -652,6 +652,16 @@
             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 {
             display: flex;
             align-items: center;
@@ -1603,7 +1613,3 @@
             .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; }
-        }