lee/pentagi
1
0
Fork 0
mirror of https://github.com/vxcontrol/pentagi.git synced 2026-08-26 13:06:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(markdown-editor): cap the mobile editor height so a long doc scrolls inside

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
Sergey Kozyrenko
2026-07-08 13:08:22 +07:00
co-authored by Claude Opus 4.8
parent b4949eada3
commit d378b9f582
1 changed files with 6 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/shared/markdown-editor/markdown-editor-field.tsx
+6 -5
View File
@@ -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 (