From b4949eada34796200212e91e5893af9b3eb6a0ee Mon Sep 17 00:00:00 2001
From: Sergey Kozyrenko <sirozha_blr@tut.by>
Date: Wed, 8 Jul 2026 12:55:08 +0700
Subject: [PATCH] refactor(markdown-editor): field owns its responsive height
 for every consumer
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The mobile fixed height was knowledge-only; make it the field's job for all. The
field now derives its own height from useBreakpoint — the SAME hook the layouts
switch on — so it fills its flex parent on desktop and takes a near-viewport fixed
height on mobile/tablet, everywhere. Knowledge drops its last height className.
This also fixes the settings-prompt and template editors, which had no mobile
height and were cramped in their stacked mobile layouts. Live-verified all three
on desktop (fills) and mobile (min-h calc(100dvh-5rem)).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../shared/markdown-editor/markdown-editor-field.tsx  | 11 ++++++++---
 .../features/knowledges/knowledge-form-controls.tsx   |  1 -
 2 files changed, 8 insertions(+), 4 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 456d3acd..89ee2bb8 100644
--- a/frontend/src/components/shared/markdown-editor/markdown-editor-field.tsx
+++ b/frontend/src/components/shared/markdown-editor/markdown-editor-field.tsx
@@ -6,6 +6,7 @@ import { lazy, Suspense, useImperativeHandle, useRef } from 'react';
 import type { TextareaRef } from '@/components/ui/textarea';
 
 import { Textarea } from '@/components/ui/textarea';
+import { useBreakpoint } from '@/hooks/use-breakpoint';
 import { cn } from '@/lib/utils';
 
 import type { MarkdownEditorHandle } from './markdown-editor';
@@ -79,9 +80,13 @@ export function MarkdownEditorField({
         [mode, onChange, disabled],
     );
 
-    // The editor fills its flex parent by default (every form embeds it in a `flex min-h-0 flex-col` column);
-    // applied FIRST so a consumer can override the height — e.g. a fixed `min-h-[…]` when it isn't in a flex box.
-    const boxClassName = cn('min-h-0 flex-1', className);
+    // 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.
+    const { isDesktop } = useBreakpoint();
+    const boxClassName = cn('flex-1', isDesktop ? 'min-h-0' : 'min-h-[calc(100dvh-5rem)]', className);
 
     if (mode === 'raw') {
         return (
diff --git a/frontend/src/features/knowledges/knowledge-form-controls.tsx b/frontend/src/features/knowledges/knowledge-form-controls.tsx
index ebb2957d..af8aedc2 100644
--- a/frontend/src/features/knowledges/knowledge-form-controls.tsx
+++ b/frontend/src/features/knowledges/knowledge-form-controls.tsx
@@ -99,7 +99,6 @@ export function KnowledgeContentField({
                     {hasLabel ? <FormLabel>Content</FormLabel> : null}
                     <FormControl>
                         <MarkdownEditorField
-                            className={fillParent ? undefined : 'min-h-[calc(100dvh-5rem)]'}
                             disabled={isSaving}
                             mode={viewMode}
                             onBlur={field.onBlur}