refactor(markdown-editor): field owns its responsive height for every consumer

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>

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 (

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}