fix(ui): restore scrolling in bounded code editors

ui/src/components/shared/code-editor.tsx

@@ -20,6 +20,7 @@ interface CodeEditorProps {
   readonly?: boolean;
   className?: string;
   minHeight?: string;
+  heightMode?: 'content' | 'fill-parent';
 }
 
 interface ValidationResult {
@@ -70,10 +71,12 @@ export function CodeEditor({
   readonly = false,
   className,
   minHeight = '300px',
+  heightMode = 'content',
 }: CodeEditorProps) {
   const { isDark } = useTheme();
   const [isFocused, setIsFocused] = useState(false);
   const [isMasked, setIsMasked] = useState(true);
+  const isFillParent = heightMode === 'fill-parent';
 
   // Validate on every change for JSON
   const validation = useMemo(() => {
@@ -153,7 +156,7 @@ export function CodeEditor({
   );
 
   return (
-    <div className={cn('flex flex-col', className)}>
+    <div className={cn('flex min-h-0 flex-col', className)}>
       {/* Editor container */}
       <div
         className={cn(
@@ -163,28 +166,34 @@ export function CodeEditor({
           readonly && 'opacity-70 cursor-not-allowed',
           !validation.valid && 'border-destructive'
         )}
-        style={{ minHeight }}
+        data-slot="code-editor-surface"
       >
-        <Editor
-          value={value}
-          onValueChange={readonly ? () => {} : onChange}
-          highlight={highlightCode}
-          key={isDark ? 'dark-editor' : 'light-editor'}
-          padding={12}
-          disabled={readonly}
-          onFocus={() => setIsFocused(true)}
-          onBlur={() => setIsFocused(false)}
-          textareaClassName={cn(
-            'focus:outline-none font-mono text-sm',
-            readonly && 'cursor-not-allowed'
-          )}
-          preClassName="font-mono text-sm"
-          style={{
-            fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
-            fontSize: '0.875rem',
-            minHeight,
-          }}
-        />
+        <div
+          className={cn(isFillParent && 'min-h-0 overflow-auto')}
+          style={isFillParent ? { height: minHeight === 'auto' ? '100%' : minHeight } : undefined}
+          data-slot={isFillParent ? 'code-editor-viewport' : undefined}
+        >
+          <Editor
+            value={value}
+            onValueChange={readonly ? () => {} : onChange}
+            highlight={highlightCode}
+            key={isDark ? 'dark-editor' : 'light-editor'}
+            padding={12}
+            disabled={readonly}
+            onFocus={() => setIsFocused(true)}
+            onBlur={() => setIsFocused(false)}
+            textareaClassName={cn(
+              'focus:outline-none font-mono text-sm',
+              readonly && 'cursor-not-allowed'
+            )}
+            preClassName="font-mono text-sm"
+            style={{
+              fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
+              fontSize: '0.875rem',
+              minHeight,
+            }}
+          />
+        </div>
 
         {/* Secrets Toggle Overlay */}
         <div className="absolute top-2 right-2 z-10 opacity-50 hover:opacity-100 transition-opacity">