refactor(markdown-editor): collapse MarkdownEditorField class props to one className

MarkdownEditorField exposed three class props — className (rich wrapper),
contentClassName (rich content area), rawClassName (raw textarea). They are the
same concept: "size the field's outer box." The rich wrapper and the raw textarea
take identical flex/min-height layout, and contentClassName was used by exactly
one consumer for a mobile content floor that a wrapper min-height expresses just
as well.

Collapse to a single `className` applied to whichever element renders. Drop the
now-dead contentClassName prop from the underlying MarkdownEditor too. Consumers:
knowledge non-fillParent bumps min-h-[280px]→min-h-[320px] to keep the mobile
content area at ~240px once the toolbar wraps (previously floored via
contentClassName); template/prompt raw drop the min-h-[640px] floor and become
min-h-0 flex-1 like rich — flex-1 already fills at normal viewports (820px
measured), and raw now shrinks-and-scrolls consistently with rich on short ones.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/components/shared/markdown-editor/markdown-editor-field.tsx

@@ -14,10 +14,9 @@ import type { EditorViewMode } from './markdown-editor-view-mode';
 const MarkdownEditor = lazy(() => import('./markdown-editor').then((module) => ({ default: module.MarkdownEditor })));
 
 interface MarkdownEditorFieldProps extends Pick<AriaAttributes, 'aria-describedby' | 'aria-invalid'> {
-    // `className` styles the rich wrapper, `rawClassName` the raw <textarea>. The byte-exact font-mono /
-    // no-resize config is baked in — raw mode is a source editor, so callers must not override it.
+    // Sizes the field's outer box in both modes — the rich editor wrapper and the raw <textarea> take the
+    // same flex/min-height layout. The byte-exact font-mono / no-resize raw config is baked in, not overridable.
     className?: string;
-    contentClassName?: string;
     disabled?: boolean;
     fallback?: ReactNode;
     id?: string;
@@ -25,7 +24,6 @@ interface MarkdownEditorFieldProps extends Pick<AriaAttributes, 'aria-describedb
     onBlur?: () => void;
     onChange: (value: string) => void;
     placeholder?: string;
-    rawClassName?: string;
     ref?: Ref<MarkdownEditorHandle>;
     value: string;
 }
@@ -34,7 +32,6 @@ export function MarkdownEditorField({
     'aria-describedby': ariaDescribedby,
     'aria-invalid': ariaInvalid,
     className,
-    contentClassName,
     disabled,
     fallback,
     id,
@@ -42,7 +39,6 @@ export function MarkdownEditorField({
     onBlur,
     onChange,
     placeholder,
-    rawClassName,
     ref,
     value,
 }: MarkdownEditorFieldProps) {
@@ -52,7 +48,7 @@ export function MarkdownEditorField({
                 aria-describedby={ariaDescribedby}
                 aria-invalid={ariaInvalid}
                 autoSize={false}
-                className={cn('resize-none font-mono text-sm', rawClassName)}
+                className={cn('resize-none font-mono text-sm', className)}
                 disabled={disabled}
                 id={id}
                 onBlur={onBlur}
@@ -77,7 +73,6 @@ export function MarkdownEditorField({
                 aria-describedby={ariaDescribedby}
                 aria-invalid={ariaInvalid}
                 className={className}
-                contentClassName={contentClassName}
                 disabled={disabled}
                 id={id}
                 onBlur={onBlur}

frontend/src/components/shared/markdown-editor/markdown-editor.tsx

@@ -21,7 +21,6 @@ interface MarkdownEditorProps {
     'aria-describedby'?: string;
     'aria-invalid'?: AriaAttributes['aria-invalid'];
     className?: string;
-    contentClassName?: string;
     disabled?: boolean;
     id?: string;
     onBlur?: () => void;
@@ -73,7 +72,6 @@ function MarkdownEditor({
     'aria-describedby': ariaDescribedby,
     'aria-invalid': ariaInvalid,
     className,
-    contentClassName,
     disabled,
     id,
     onBlur,
@@ -280,7 +278,6 @@ function MarkdownEditor({
                 className={cn(
                     'prose prose-sm dark:prose-invert tiptap-content max-w-none min-w-0 flex-1 overflow-auto px-3 py-2',
                     '[&_.ProseMirror]:min-h-full [&_.ProseMirror]:outline-none',
-                    contentClassName,
                 )}
                 editor={editor}
             />

frontend/src/features/knowledges/knowledge-form-controls.tsx

@@ -99,14 +99,12 @@ export function KnowledgeContentField({
                     {hasLabel ? <FormLabel>Content</FormLabel> : null}
                     <FormControl>
                         <MarkdownEditorField
-                            className={fillParent ? 'min-h-0 flex-1' : 'min-h-[280px]'}
-                            contentClassName={fillParent ? undefined : 'min-h-[240px]'}
+                            className={fillParent ? 'min-h-0 flex-1' : 'min-h-[320px]'}
                             disabled={isSaving}
                             mode={viewMode}
                             onBlur={field.onBlur}
                             onChange={field.onChange}
                             placeholder="Knowledge content (will be embedded into the vector store)"
-                            rawClassName={fillParent ? 'min-h-0 flex-1' : 'min-h-[280px]'}
                             value={field.value}
                         />
                     </FormControl>

frontend/src/pages/settings/settings-prompt.tsx

@@ -231,7 +231,6 @@ function FormMarkdownItem<T extends FieldValues>({
                     onBlur={field.onBlur}
                     onChange={field.onChange}
                     placeholder={placeholder}
-                    rawClassName="min-h-[640px] flex-1"
                     ref={editorRef}
                     value={field.value}
                 />

frontend/src/pages/templates/template.tsx

@@ -685,7 +685,6 @@ function Template() {
                             onBlur={field.onBlur}
                             onChange={field.onChange}
                             placeholder="Content"
-                            rawClassName="min-h-[640px] flex-1"
                             value={field.value}
                         />
                     </FormControl>