dtp/gadget
1
0
Fork 0
Code Actions Packages Projects Releases Activity

fix: properly constrain CodeMirror editor height in flex layout

Browse Source 
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
This commit is contained in:
Rob Colbert 2026-05-13 06:49:07 -04:00
parent 5228034a5f
commit 5dac708117
1 changed files with 25 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
gadget-code/frontend/src/index.css
View File

@ -102,20 +102,44 @@ textarea {
} }
/* ── CodeMirror Editor Layout ─────────────────────────────── */ /* ── 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 { .cm-editor-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 0; 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 { .cm-editor-container .cm-editor {
flex: 1; flex: 1;
min-height: 0; min-height: 0;
overflow: hidden;
} }
.cm-editor-container .cm-scroller { .cm-editor-container .cm-scroller {
min-height: 0; min-height: 0;
overflow: auto;
} }
/* ── Gadget Markdown Styles ─────────────────────────────────── */ /* ── Gadget Markdown Styles ─────────────────────────────────── */