Summary
When opening any file whose CodeMirror content contains long unwrapped lines (long markdown links, base64 blobs, minified JSON), the entire editor pane wrapper expands past the viewport width, dragging the editor header's right-side 4-button toolbar off-screen (copy / preview / format / close — whatever the 4 are in your build, they all disappear).
The root cause is a contradictory Tailwind class combo on the editor pane wrapper.
Environment
- Package:
@cloudcli-ai/cloudcli@1.32.0 (downstream rebrand of siteboon/claudecodeui)
- Browser: Firefox 151.0.1 / Chromium 130
- Viewport: reproducible at 1280×800 with sidebars open; any viewport narrower than
min(code-content-width, header-content-width) triggers it
- File checked:
dist/assets/index-AaSE7-3t.js + the wrapper DOM in the live React tree
Reproducer
- Open any file with a long unwrapped line (a markdown file with a long URL works easily — e.g.
docs/foo.md containing [label](docs/very/long/path/to/something.md))
- Make sure the editor pane is narrow enough that the long line would normally need horizontal scroll
- Look at the editor header (the row with filename + path + 4 action buttons on the right)
- The 4 buttons are not visible — they have positive width and exist in the DOM, but they sit beyond the viewport right edge
Diagnostic data (live DOM, narrow viewport)
viewport=1280, walking up from header...
hop=1 <DIV> w=1187 R=1681 ⚠OVERFLOW ovX=visible
class: flex min-w-0 flex-shrink-0 items-center justify-between gap-2 border-b border-border px-3 py-1.5
hop=2 <DIV> w=1187 R=1681 ⚠OVERFLOW ovX=visible (bg-background flex flex-col w-full h-full)
hop=3 <DIV> w=1187 R=1681 ⚠OVERFLOW ovX=visible (w-full h-full flex flex-col)
hop=4 <DIV> w=1188 R=1681 ⚠OVERFLOW ovX=hidden (h-full overflow-hidden border-l ... min-w-0 flex-1)
hop=5 <DIV> w=1192 R=1681 ⚠OVERFLOW ovX=visible (flex h-full min-w-0 flex-shrink-0) ← culprit
hop=6 <DIV> w=991 R=1280 ok ovX=hidden (flex min-h-0 flex-1 overflow-hidden)
The header's right edge sits at x=1681. Viewport ends at x=1280. The 4 buttons live at x=1521→1669, 241~389px past the right viewport edge, completely off-screen.
Root cause
hop=5 has class flex h-full min-w-0 flex-shrink-0. The two highlighted classes contradict each other:
min-w-0 → "allow shrinking below min-content"flex-shrink-0 → "never shrink at all"
flex-shrink: 0 wins, so when CodeMirror inside this wrapper requests width for its longest line (~1192px), the wrapper stays at 1192 and refuses to shrink to the parent's 991. The overflow-hidden ancestor (hop=6) clips the right edge, hiding the header buttons.
This looks like a typo — the author very likely meant flex-shrink (no -0) or just to remove min-w-0 to make intent explicit.
Workaround (currently running in production)
Single CSS rule, scoped tightly so legitimate flex-shrink-0 usages (sidebar, toolbars) aren't affected:
.flex.min-h-0.flex-1.overflow-hidden > .flex.h-full.min-w-0.flex-shrink-0 {
flex-shrink: 1 !important;
}Verified: header right edge snaps back inside viewport, all 4 buttons visible, CodeMirror still gets horizontal scroll inside its own scroller (correct IDE behavior).
Proposed proper fix
Change flex-shrink-0 → just flex-shrink (or drop it entirely if flex: 1 is meant) on the editor pane wrapper. Should be a one-token edit in the source .tsx. Happy to send a PR if pointed at the right component file.
Summary
When opening any file whose CodeMirror content contains long unwrapped lines (long markdown links, base64 blobs, minified JSON), the entire editor pane wrapper expands past the viewport width, dragging the editor header's right-side 4-button toolbar off-screen (copy / preview / format / close — whatever the 4 are in your build, they all disappear).
The root cause is a contradictory Tailwind class combo on the editor pane wrapper.
Environment
@cloudcli-ai/cloudcli@1.32.0(downstream rebrand ofsiteboon/claudecodeui)min(code-content-width, header-content-width)triggers itdist/assets/index-AaSE7-3t.js+ the wrapper DOM in the live React treeReproducer
docs/foo.mdcontaining[label](docs/very/long/path/to/something.md))Diagnostic data (live DOM, narrow viewport)
The header's right edge sits at x=1681. Viewport ends at x=1280. The 4 buttons live at x=1521→1669, 241~389px past the right viewport edge, completely off-screen.
Root cause
hop=5has classflex h-full min-w-0 flex-shrink-0. The two highlighted classes contradict each other:min-w-0→ "allow shrinking below min-content"flex-shrink-0→ "never shrink at all"flex-shrink: 0wins, so when CodeMirror inside this wrapper requests width for its longest line (~1192px), the wrapper stays at 1192 and refuses to shrink to the parent's 991. Theoverflow-hiddenancestor (hop=6) clips the right edge, hiding the header buttons.This looks like a typo — the author very likely meant
flex-shrink(no-0) or just to removemin-w-0to make intent explicit.Workaround (currently running in production)
Single CSS rule, scoped tightly so legitimate
flex-shrink-0usages (sidebar, toolbars) aren't affected:Verified: header right edge snaps back inside viewport, all 4 buttons visible, CodeMirror still gets horizontal scroll inside its own scroller (correct IDE behavior).
Proposed proper fix
Change
flex-shrink-0→ justflex-shrink(or drop it entirely ifflex: 1is meant) on the editor pane wrapper. Should be a one-token edit in the source.tsx. Happy to send a PR if pointed at the right component file.