fix(cli): prevent settings dialog border clipping using maxHeight (#26507)

Author: jackwotherspoon

packages/cli/src/ui/components/SettingsDialog.test.tsx

@@ -326,6 +326,36 @@ describe('SettingsDialog', () => {
       });
       unmount();
     });
+
+    it('should render the bottom border correctly when height is constrained', async () => {
+      const settings = createMockSettings();
+      const onSelect = vi.fn();
+      const constrainedHeight = 15;
+
+      const renderResult = await renderDialog(settings, onSelect, {
+        availableTerminalHeight: constrainedHeight,
+      });
+
+      await renderResult.waitUntilReady();
+
+      await waitFor(() => {
+        const output = renderResult.lastFrame();
+        const lines = output.trim().split('\n');
+
+        // Verify height constraint
+        expect(lines.length).toBeLessThanOrEqual(constrainedHeight);
+
+        // Verify bottom border existence in the last line of the output
+        const lastLine = lines[lines.length - 1];
+        // 'round' border characters: ─, ╰, ╯
+        expect(lastLine).toMatch(/[─╰╯]/);
+      });
+
+      // SVG snapshot ensures visual layout and border rendering are preserved
+      await expect(renderResult).toMatchSvgSnapshot();
+
+      renderResult.unmount();
+    });
   });
 
   describe('Setting Descriptions', () => {

packages/cli/src/ui/components/__snapshots__/SettingsDialog-SettingsDialog-Initial-Rendering-should-render-the-bottom-border-correctly-when-height-is-constrained.snap.svg

@@ -46,6 +46,24 @@ exports[`SettingsDialog > Initial Rendering > should render settings list with v
 ╰──────────────────────────────────────────────────────────────────────────────────────────────────╯"
 `;
 
+exports[`SettingsDialog > Initial Rendering > should render the bottom border correctly when height is constrained 1`] = `
+"╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
+│                                                                                                  │
+│  > Settings                                                                                      │
+│                                                                                                  │
+│ ╭──────────────────────────────────────────────────────────────────────────────────────────────╮ │
+│ ╰─Search to filter─────────────────────────────────────────────────────────────────────────────╯ │
+│  ▲                                                                                               │
+│  ● Vim Mode                                                                               false  │
+│  ▼ Enable Vim keybindings                                                                        │
+│                                                                                                  │
+│    Apply To                                                                                      │
+│  ● User Settings                                                                                 │
+│  (Use Enter to select, Ctrl+L to reset, Tab to change focus, Esc to close)                       │
+│                                                                                                  │
+╰──────────────────────────────────────────────────────────────────────────────────────────────────╯"
+`;
+
 exports[`SettingsDialog > Snapshot Tests > should render 'accessibility settings enabled' correctly 1`] = `
 "╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
 │                                                                                                  │

packages/cli/src/ui/components/__snapshots__/SettingsDialog.test.tsx.snap

@@ -425,7 +425,7 @@ export function BaseSettingsDialog({
       flexDirection="row"
       padding={1}
       width="100%"
-      height="100%"
+      maxHeight={availableHeight}
     >
       <Box flexDirection="column" flexGrow={1}>
         {/* Title */}