update to height based on all available height module fix overflow

Author: Adib234

package-lock.json

@@ -12,6 +12,7 @@ import {
   useEffect,
   useReducer,
   useContext,
+  useState,
 } from 'react';
 import { Box, Text } from 'ink';
 import { theme } from '../semantic-colors.js';
@@ -782,38 +783,39 @@ const ChoiceQuestionView: React.FC<ChoiceQuestionViewProps> = ({
     }
   }, [customOptionText, isCustomOptionSelected, question.multiSelect]);
 
+  const [actualQuestionHeight, setActualQuestionHeight] = useState(0);
+
   const HEADER_HEIGHT = progressHeader ? 2 : 0;
   const TITLE_MARGIN = 1;
   const FOOTER_HEIGHT = 2; // DialogFooter + margin
   const overhead = HEADER_HEIGHT + TITLE_MARGIN + FOOTER_HEIGHT;
+
   const listHeight = availableHeight
     ? Math.max(1, availableHeight - overhead)
     : undefined;
-  const maxQuestionHeight =
-    question.unconstrainedHeight && listHeight
-      ? // When unconstrained, give the question a majority of the vertical space (e.g., 70%).
-        // The options list will take the remaining space and scroll if necessary.
-        // This is more robust than calculating based on `selectionItems.length`,
-        // which can incorrectly shrink the question if there are many options.
-        Math.max(5, Math.floor(listHeight * 0.7))
-      : 15;
-  const questionHeight =
+
+  // Modulo the fixed overflow (overhead + 4 lines reserved for list), use all remaining height.
+  const maxQuestionHeight = listHeight ? Math.max(5, listHeight - 4) : 15;
+
+  const questionHeightLimit =
     listHeight && !isAlternateBuffer
-      ? Math.min(maxQuestionHeight, Math.max(1, listHeight - DIALOG_PADDING))
+      ? Math.min(maxQuestionHeight, listHeight)
       : undefined;
+
   const maxItemsToShow =
-    listHeight && questionHeight
-      ? Math.max(1, Math.floor((listHeight - questionHeight) / 2))
+    listHeight && actualQuestionHeight
+      ? Math.max(1, Math.floor((listHeight - actualQuestionHeight) / 2))
       : selectionItems.length;
 
   return (
     <Box flexDirection="column">
       {progressHeader}
       <Box marginBottom={TITLE_MARGIN}>
         <MaxSizedBox
-          maxHeight={questionHeight}
+          maxHeight={questionHeightLimit}
           maxWidth={availableWidth}
           overflowDirection="bottom"
+          onHeightChange={setActualQuestionHeight}
         >
           <Box flexDirection="column">
             <MarkdownDisplay

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

@@ -282,9 +282,10 @@ describe('ToolConfirmationQueue', () => {
     // hideToolIdentity is true for ask_user -> subtracts 4 instead of 6
     // availableContentHeight = 19 - 4 = 15
     // ToolConfirmationMessage handlesOwnUI=true -> returns full 15
-    // AskUserDialog allocates questionHeight = Math.min(maxQuestionHeight, Math.max(5, listHeight - DIALOG_PADDING)).
-    // maxQuestionHeight = floor(15 * 0.7) = 10.
-    // 10 lines is enough for the 6-line question + padding.
+    // AskUserDialog allocates questionHeight = availableHeight - overhead - minListHeight.
+    // listHeight = 15 - overhead (Header:0, Margin:1, Footer:2) = 12.
+    // maxQuestionHeight = listHeight - 4 = 8.
+    // 8 lines is enough for the 6-line question.
     await waitFor(() => {
       expect(lastFrame()).toContain('Line 6');
       expect(lastFrame()).not.toContain('lines hidden');