feat(ui): Improve UI layout adaptation for narrow terminals (#5651)

Co-authored-by: Jacob Richman <[email protected]>

1 files changed, 15 insertions, 7 deletions

diff --git a/packages/cli/src/ui/components/Header.tsx b/packages/cli/src/ui/components/Header.tsx
index 4038e415..0894ad14 100644
--- a/packages/cli/src/ui/components/Header.tsx
+++ b/packages/cli/src/ui/components/Header.tsx
@@ -8,30 +8,34 @@ import React from 'react';
 import { Box, Text } from 'ink';
 import Gradient from 'ink-gradient';
 import { Colors } from '../colors.js';
-import { shortAsciiLogo, longAsciiLogo } from './AsciiArt.js';
+import { shortAsciiLogo, longAsciiLogo, tinyAsciiLogo } from './AsciiArt.js';
 import { getAsciiArtWidth } from '../utils/textUtils.js';
+import { useTerminalSize } from '../hooks/useTerminalSize.js';
 
 interface HeaderProps {
   customAsciiArt?: string; // For user-defined ASCII art
-  terminalWidth: number; // For responsive logo
   version: string;
   nightly: boolean;
 }
 
 export const Header: React.FC<HeaderProps> = ({
   customAsciiArt,
-  terminalWidth,
   version,
   nightly,
 }) => {
+  const { columns: terminalWidth } = useTerminalSize();
   let displayTitle;
   const widthOfLongLogo = getAsciiArtWidth(longAsciiLogo);
+  const widthOfShortLogo = getAsciiArtWidth(shortAsciiLogo);
 
   if (customAsciiArt) {
     displayTitle = customAsciiArt;
+  } else if (terminalWidth >= widthOfLongLogo) {
+    displayTitle = longAsciiLogo;
+  } else if (terminalWidth >= widthOfShortLogo) {
+    displayTitle = shortAsciiLogo;
   } else {
-    displayTitle =
-      terminalWidth >= widthOfLongLogo ? longAsciiLogo : shortAsciiLogo;
+    displayTitle = tinyAsciiLogo;
   }
 
   const artWidth = getAsciiArtWidth(displayTitle);
@@ -52,9 +56,13 @@ export const Header: React.FC<HeaderProps> = ({
       )}
       {nightly && (
         <Box width="100%" flexDirection="row" justifyContent="flex-end">
-          <Gradient colors={Colors.GradientColors}>
+          {Colors.GradientColors ? (
+            <Gradient colors={Colors.GradientColors}>
+              <Text>v{version}</Text>
+            </Gradient>
+          ) : (
             <Text>v{version}</Text>
-          </Gradient>
+          )}
         </Box>
       )}
     </Box>