From 4f2974dbfe36638915f1b08448d2563c64f88644 Mon Sep 17 00:00:00 2001
From: Gal Zahavi <38544478+galz10@users.noreply.github.com>
Date: Thu, 7 Aug 2025 15:55:53 -0700
Subject: feat(ui): Improve UI layout adaptation for narrow terminals (#5651)

Co-authored-by: Jacob Richman <jacob314@gmail.com>
---
 .../src/ui/components/ContextSummaryDisplay.tsx    | 54 +++++++++++++---------
 1 file changed, 32 insertions(+), 22 deletions(-)

(limited to 'packages/cli/src/ui/components/ContextSummaryDisplay.tsx')

diff --git a/packages/cli/src/ui/components/ContextSummaryDisplay.tsx b/packages/cli/src/ui/components/ContextSummaryDisplay.tsx
index 78a19f0d..99406bd6 100644
--- a/packages/cli/src/ui/components/ContextSummaryDisplay.tsx
+++ b/packages/cli/src/ui/components/ContextSummaryDisplay.tsx
@@ -5,9 +5,11 @@
  */
 
 import React from 'react';
-import { Text } from 'ink';
+import { Box, Text } from 'ink';
 import { Colors } from '../colors.js';
 import { type IdeContext, type MCPServerConfig } from '@google/gemini-cli-core';
+import { useTerminalSize } from '../hooks/useTerminalSize.js';
+import { isNarrowWidth } from '../utils/isNarrowWidth.js';
 
 interface ContextSummaryDisplayProps {
   geminiMdFileCount: number;
@@ -26,6 +28,8 @@ export const ContextSummaryDisplay: React.FC<ContextSummaryDisplayProps> = ({
   showToolDescriptions,
   ideContext,
 }) => {
+  const { columns: terminalWidth } = useTerminalSize();
+  const isNarrow = isNarrowWidth(terminalWidth);
   const mcpServerCount = Object.keys(mcpServers || {}).length;
   const blockedMcpServerCount = blockedMcpServers?.length || 0;
   const openFileCount = ideContext?.workspaceState?.openFiles?.length ?? 0;
@@ -78,30 +82,36 @@ export const ContextSummaryDisplay: React.FC<ContextSummaryDisplayProps> = ({
       }
       parts.push(blockedText);
     }
-    return parts.join(', ');
+    let text = parts.join(', ');
+    // Add ctrl+t hint when MCP servers are available
+    if (mcpServers && Object.keys(mcpServers).length > 0) {
+      if (showToolDescriptions) {
+        text += ' (ctrl+t to toggle)';
+      } else {
+        text += ' (ctrl+t to view)';
+      }
+    }
+    return text;
   })();
 
-  let summaryText = 'Using: ';
-  const summaryParts = [];
-  if (openFilesText) {
-    summaryParts.push(openFilesText);
-  }
-  if (geminiMdText) {
-    summaryParts.push(geminiMdText);
-  }
-  if (mcpText) {
-    summaryParts.push(mcpText);
-  }
-  summaryText += summaryParts.join(' | ');
+  const summaryParts = [openFilesText, geminiMdText, mcpText].filter(Boolean);
 
-  // Add ctrl+t hint when MCP servers are available
-  if (mcpServers && Object.keys(mcpServers).length > 0) {
-    if (showToolDescriptions) {
-      summaryText += ' (ctrl+t to toggle)';
-    } else {
-      summaryText += ' (ctrl+t to view)';
-    }
+  if (isNarrow) {
+    return (
+      <Box flexDirection="column">
+        <Text color={Colors.Gray}>Using:</Text>
+        {summaryParts.map((part, index) => (
+          <Text key={index} color={Colors.Gray}>
+            {'  '}- {part}
+          </Text>
+        ))}
+      </Box>
+    );
   }
 
-  return <Text color={Colors.Gray}>{summaryText}</Text>;
+  return (
+    <Box>
+      <Text color={Colors.Gray}>Using: {summaryParts.join(' | ')}</Text>
+    </Box>
+  );
 };
-- 
cgit v1.2.3

