Code review fixes for show question mark pr. (#18480)

packages/cli/src/ui/components/shared/SectionHeader.tsx

@@ -5,27 +5,25 @@
  */
 
 import type React from 'react';
-import { Text } from 'ink';
-import stringWidth from 'string-width';
-import { useTerminalSize } from '../../hooks/useTerminalSize.js';
+import { Box, Text } from 'ink';
 import { theme } from '../../semantic-colors.js';
 
-const buildHeaderLine = (title: string, width: number) => {
-  const prefix = `── ${title} `;
-  const prefixWidth = stringWidth(prefix);
-  if (width <= prefixWidth) {
-    return prefix.slice(0, Math.max(0, width));
-  }
-  return prefix + '─'.repeat(Math.max(0, width - prefixWidth));
-};
-
-export const SectionHeader: React.FC<{ title: string; width?: number }> = ({
-  title,
-  width,
-}) => {
-  const { columns: terminalWidth } = useTerminalSize();
-  const resolvedWidth = Math.max(10, width ?? terminalWidth);
-  const text = buildHeaderLine(title, resolvedWidth);
-
-  return <Text color={theme.text.secondary}>{text}</Text>;
-};
+export const SectionHeader: React.FC<{ title: string }> = ({ title }) => (
+  <Box width="100%" flexDirection="row" overflow="hidden">
+    <Text color={theme.text.secondary} wrap="truncate-end">
+      {`── ${title}`}
+    </Text>
+    <Box
+      flexGrow={1}
+      flexShrink={0}
+      minWidth={2}
+      marginLeft={1}
+      borderStyle="single"
+      borderTop
+      borderBottom={false}
+      borderLeft={false}
+      borderRight={false}
+      borderColor={theme.text.secondary}
+    />
+  </Box>
+);