From d378b9f5825bd5aa2a1a28160ed709c464c6a034 Mon Sep 17 00:00:00 2001 From: Sergey Kozyrenko Date: Wed, 8 Jul 2026 13:08:22 +0700 Subject: [PATCH] fix(markdown-editor): cap the mobile editor height so a long doc scrolls inside MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The mobile/tablet branch used `min-h-[calc(100dvh-5rem)]`, only a floor — the stacked forms have no flex parent to cap it, so a long document (a big agent prompt is ~10k px of text) stretched the editor to its full content height and the whole page grew with it. Make it a FIXED `h-[calc(100dvh-5rem)]` so the box stays one viewport tall and the content scrolls inside it. Desktop (fills its pane) is unchanged. Live-verified: the Adviser prompt editor is now 1194px with an internal scrollbar instead of 10.6k px. Co-Authored-By: Claude Opus 4.8 --- .../shared/markdown-editor/markdown-editor-field.tsx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) 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 89ee2bb8..acf99dad 100644 --- a/frontend/src/components/shared/markdown-editor/markdown-editor-field.tsx +++ b/frontend/src/components/shared/markdown-editor/markdown-editor-field.tsx @@ -81,12 +81,13 @@ export function MarkdownEditorField({ ); // The field owns its height so no consumer repeats it: it fills its flex parent on desktop (the split-view - // panes) and takes a near-viewport fixed height on mobile/tablet (the stacked forms, where it isn't inside a - // flex box). 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. + // 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. const { isDesktop } = useBreakpoint(); - const boxClassName = cn('flex-1', isDesktop ? 'min-h-0' : 'min-h-[calc(100dvh-5rem)]', className); + const boxClassName = cn(isDesktop ? 'min-h-0 flex-1' : 'h-[calc(100dvh-5rem)]', className); if (mode === 'raw') { return (