diff --git a/frontend/src/components/shared/markdown-editor/markdown-editor-field.tsx b/frontend/src/components/shared/markdown-editor/markdown-editor-field.tsx index acf99dad..0f793802 100644 --- a/frontend/src/components/shared/markdown-editor/markdown-editor-field.tsx +++ b/frontend/src/components/shared/markdown-editor/markdown-editor-field.tsx @@ -80,12 +80,9 @@ export function MarkdownEditorField({ [mode, onChange, disabled], ); - // The field owns its height so no consumer repeats it: it fills its flex parent on desktop (the split-view - // panes) and takes a FIXED near-viewport height on mobile/tablet (the stacked forms). Fixed, not `min-h`, so a - // long doc scrolls inside the editor instead of stretching the page to its full content height — the mobile - // stack has no flex parent to cap it. Keyed off the SAME breakpoint hook the surrounding layouts switch on so - // the two never disagree; a plain CSS media-query variant would drift from that JS breakpoint. `className` is - // last, so a consumer can still override the height. + // `h-`, not `min-h`: the mobile/tablet stack has no flex parent to cap the box, so `min-h` would let a long + // doc stretch the editor (and the page) to full content height instead of scrolling inside it. Height tracks + // useBreakpoint, not a CSS variant, because the layouts split at 1200px — which is no Tailwind breakpoint. const { isDesktop } = useBreakpoint(); const boxClassName = cn(isDesktop ? 'min-h-0 flex-1' : 'h-[calc(100dvh-5rem)]', className);