From 5dac7081172fa84a6fb6ab864167b852f52b3ae7 Mon Sep 17 00:00:00 2001
From: Rob Colbert <rob@digitaltelepresence.com>
Date: Wed, 13 May 2026 06:49:07 -0400
Subject: [PATCH] fix: properly constrain CodeMirror editor height in flex
 layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The editor was overflowing its container because @uiw/react-codemirror
renders a wrapper div that doesn't inherit flex constraints by default.

Fixed by adding CSS rules that:
1. Set overflow:hidden on .cm-editor-container
2. Target the wrapper div (> div) with flex:1, min-height:0, overflow:hidden
3. Set .cm-editor and .cm-scroller to overflow appropriately

This ensures the flex height constraint propagates through every level
of the CodeMirror DOM tree, and only .cm-scroller scrolls.

Layout chain:
  .cm-editor-container (flex-1, min-h-0)
    └─ wrapper div (flex:1, min-h-0, overflow:hidden)
      └─ .cm-editor (flex:1, min-h-0, overflow:hidden)
        └─ .cm-scroller (min-h-0, overflow:auto) ← only this scrolls
---
 gadget-code/frontend/src/index.css | 26 +++++++++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/gadget-code/frontend/src/index.css b/gadget-code/frontend/src/index.css
index 24d3e3f..106947c 100644
--- a/gadget-code/frontend/src/index.css
+++ b/gadget-code/frontend/src/index.css
@@ -102,20 +102,44 @@ textarea {
 }
 
 /* ── CodeMirror Editor Layout ─────────────────────────────── */
-/* Make the CodeMirror component fill its flex container. */
+/* The CodeMirror component must be constrained to its flex allocation
+ * and scroll within it. The layout chain is:
+ *
+ *   .cm-editor-container (flex-1, min-h-0 in the flex column)
+ *     └─ <div> (wrapper div rendered by @uiw/react-codemirror)
+ *       └─ .cm-editor (the actual editor chrome)
+ *         └─ .cm-scroller (the scrollable content area)
+ *
+ * Every level must have height:100% and overflow:hidden so the
+ * scroller is the only thing that scrolls.
+ */
 .cm-editor-container {
   display: flex;
   flex-direction: column;
   min-height: 0;
+  overflow: hidden;
+}
+
+/* The wrapper div that @uiw/react-codemirror renders directly inside
+ * the container — this is NOT .cm-editor, it's the parent of .cm-editor.
+ * Must fill the container and pass the height constraint down. */
+.cm-editor-container > div {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
 }
 
 .cm-editor-container .cm-editor {
   flex: 1;
   min-height: 0;
+  overflow: hidden;
 }
 
 .cm-editor-container .cm-scroller {
   min-height: 0;
+  overflow: auto;
 }
 
 /* ── Gadget Markdown Styles ─────────────────────────────────── */