From 8cc787f3040d5b953511b18a80f92fa3e29f366c Mon Sep 17 00:00:00 2001
From: Miguel Solorio <miguelsolorio@google.com>
Date: Wed, 10 Sep 2025 20:47:22 -0700
Subject: [PATCH] Fix suggestion alignment (#8233)

---
 packages/cli/src/ui/AppContainer.tsx          |  2 +-
 .../src/ui/components/SuggestionsDisplay.tsx  | 53 +++++++++----------
 2 files changed, 25 insertions(+), 30 deletions(-)

diff --git a/packages/cli/src/ui/AppContainer.tsx b/packages/cli/src/ui/AppContainer.tsx
index a5977bb615..6fd637d780 100644
--- a/packages/cli/src/ui/AppContainer.tsx
+++ b/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);
 
diff --git a/packages/cli/src/ui/components/SuggestionsDisplay.tsx b/packages/cli/src/ui/components/SuggestionsDisplay.tsx
index 0e8bf8e18f..3cbb689e24 100644
--- a/packages/cli/src/ui/components/SuggestionsDisplay.tsx
+++ b/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 flexDirection="row">
-              {(() => {
-                const isSlashCommand = userInput.startsWith('/');
-                return (
-                  <>
-                    {isSlashCommand ? (
-                      <Box flexShrink={0} paddingRight={2}>
-                        {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 key={`${suggestion.value}-${originalIndex}`} flexDirection="row">
+            <Box width={commandColumnWidth} flexShrink={0}>
+              <Box>
+                {labelElement}
+                {suggestion.commandKind === CommandKind.MCP_PROMPT && (
+                  <Text color={theme.text.secondary}> [MCP]</Text>
+                )}
+              </Box>
             </Box>
+
+            {suggestion.description && (
+              <Box flexGrow={1} paddingLeft={3}>
+                <Text color={textColor} wrap="truncate">
+                  {suggestion.description}
+                </Text>
+              </Box>
+            )}
           </Box>
         );
       })}