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 ─────────────────────────────────── */