refactor(cli): better react patterns for BaseSettingsDialog (#21206)

packages/cli/src/ui/components/AgentConfigDialog.tsx

@@ -110,6 +110,8 @@ interface AgentConfigDialogProps {
   settings: LoadedSettings;
   onClose: () => void;
   onSave?: () => void;
+  /** Available terminal height for dynamic windowing */
+  availableTerminalHeight?: number;
 }
 
 /**
@@ -192,6 +194,7 @@ export function AgentConfigDialog({
   settings,
   onClose,
   onSave,
+  availableTerminalHeight,
 }: AgentConfigDialogProps): React.JSX.Element {
   // Scope selector state (User by default)
   const [selectedScope, setSelectedScope] = useState<LoadableSettingScope>(
@@ -395,12 +398,6 @@ export function AgentConfigDialog({
     [pendingOverride, saveFieldValue],
   );
 
-  // Footer content
-  const footerContent =
-    modifiedFields.size > 0 ? (
-      <Text color={theme.text.secondary}>Changes saved automatically.</Text>
-    ) : null;
-
   return (
     <BaseSettingsDialog
       title={`Configure: ${displayName}`}
@@ -410,12 +407,24 @@ export function AgentConfigDialog({
       selectedScope={selectedScope}
       onScopeChange={handleScopeChange}
       maxItemsToShow={maxItemsToShow}
+      availableHeight={availableTerminalHeight}
       maxLabelWidth={maxLabelWidth}
       onItemToggle={handleItemToggle}
       onEditCommit={handleEditCommit}
       onItemClear={handleItemClear}
       onClose={onClose}
-      footerContent={footerContent}
+      footer={
+        modifiedFields.size > 0
+          ? {
+              content: (
+                <Text color={theme.text.secondary}>
+                  Changes saved automatically.
+                </Text>
+              ),
+              height: 1,
+            }
+          : undefined
+      }
     />
   );
 }