Fix suggestion alignment (#8233)

packages/cli/src/ui/AppContainer.tsx

@@ -211,7 +211,7 @@ export const AppContainer = (props: AppContainerProps) => {
     20,
     Math.floor(terminalWidth * widthFraction) - 3,
   );
-  const suggestionsWidth = Math.max(20, Math.floor(terminalWidth * 0.8));
+  const suggestionsWidth = Math.max(20, Math.floor(terminalWidth * 1.0));
   const mainAreaWidth = Math.floor(terminalWidth * 0.9);
   const staticAreaMaxItemHeight = Math.max(terminalHeight * 4, 100);
 

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

@@ -54,6 +54,14 @@ export function SuggestionsDisplay({
   );
   const visibleSuggestions = suggestions.slice(startIndex, endIndex);
 
+  const getFullLabel = (s: Suggestion) =>
+    s.label + (s.commandKind === CommandKind.MCP_PROMPT ? ' [MCP]' : '');
+
+  const maxLabelLength = Math.max(
+    ...suggestions.map((s) => getFullLabel(s).length),
+  );
+  const commandColumnWidth = Math.min(maxLabelLength, Math.floor(width * 0.5));
+
   return (
     <Box flexDirection="column" paddingX={1} width={width}>
       {scrollOffset > 0 && <Text color={theme.text.primary}>▲</Text>}
@@ -72,36 +80,23 @@ export function SuggestionsDisplay({
         );
 
         return (
-          <Box key={`${suggestion.value}-${originalIndex}`} width={width}>
+          <Box key={`${suggestion.value}-${originalIndex}`} flexDirection="row">
-            <Box flexDirection="row">
+            <Box width={commandColumnWidth} flexShrink={0}>
-              {(() => {
+              <Box>
-                const isSlashCommand = userInput.startsWith('/');
+                {labelElement}
-                return (
+                {suggestion.commandKind === CommandKind.MCP_PROMPT && (
-                  <>
+                  <Text color={theme.text.secondary}> [MCP]</Text>
-                    {isSlashCommand ? (
+                )}
-                      <Box flexShrink={0} paddingRight={2}>
+              </Box>
-                        {labelElement}
-                        {suggestion.commandKind === CommandKind.MCP_PROMPT && (
-                          <Text color={theme.text.secondary}> [MCP]</Text>
-                        )}
-                      </Box>
-                    ) : (
-                      labelElement
-                    )}
-                    {suggestion.description && (
-                      <Box
-                        flexGrow={1}
-                        paddingLeft={isSlashCommand ? undefined : 1}
-                      >
-                        <Text color={textColor} wrap="truncate">
-                          {suggestion.description}
-                        </Text>
-                      </Box>
-                    )}
-                  </>
-                );
-              })()}
             </Box>
+
+            {suggestion.description && (
+              <Box flexGrow={1} paddingLeft={3}>
+                <Text color={textColor} wrap="truncate">
+                  {suggestion.description}
+                </Text>
+              </Box>
+            )}
           </Box>
         );
       })}