fix(browse): YAML editor cut off at viewport bottom
.preview-pane__body was flex: 1 + display: flex; flex-direction: column but without min-height: 0. The flex item's default min-height is min-content (its natural content size), so when the YAML editor's CodeMirror viewport carried many lines, the body grew to fit the editor instead of letting the editor scroll internally. The chain ran out of viewport before reaching the editor's bottom edge; the body's own scroll bottomed out at a height that still cropped the last few lines. Adding min-height: 0 lets the body shrink to its flex-allocated size so CodeMirror's internal scroll takes over correctly. Same root cause as the standard flex+overflow papercut documented in half the CSS guides on the internet — fine to add unconditionally, no other consumers of .preview-pane__body care. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
889aa78589
commit
a6cb847f2f
1 changed files with 5 additions and 0 deletions
|
|
@ -244,6 +244,11 @@ body {
|
||||||
|
|
||||||
.preview-pane__body {
|
.preview-pane__body {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
min-height: 0; /* critical: lets the flex child shrink to fit
|
||||||
|
the viewport instead of growing to its
|
||||||
|
content's natural size (which clips the
|
||||||
|
YAML editor's bottom when there are many
|
||||||
|
lines, even with the editor's own scroll) */
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue