fix(ux): fixed off-by-some wrapping caused by fixed-width characters (#17816)

packages/cli/src/ui/utils/TableRenderer.test.tsx

@@ -31,4 +31,34 @@ describe('TableRenderer', () => {
     expect(output).toContain('Row 3, Col 3');
     expect(output).toMatchSnapshot();
   });
+
+  it('renders a table with long headers and 4 columns correctly', () => {
+    const headers = [
+      'Very Long Column Header One',
+      'Very Long Column Header Two',
+      'Very Long Column Header Three',
+      'Very Long Column Header Four',
+    ];
+    const rows = [
+      ['Data 1.1', 'Data 1.2', 'Data 1.3', 'Data 1.4'],
+      ['Data 2.1', 'Data 2.2', 'Data 2.3', 'Data 2.4'],
+      ['Data 3.1', 'Data 3.2', 'Data 3.3', 'Data 3.4'],
+    ];
+    const terminalWidth = 80;
+
+    const { lastFrame } = renderWithProviders(
+      <TableRenderer
+        headers={headers}
+        rows={rows}
+        terminalWidth={terminalWidth}
+      />,
+    );
+
+    const output = lastFrame();
+    // Since terminalWidth is 80 and headers are long, they might be truncated.
+    // We just check for some of the content.
+    expect(output).toContain('Data 1.1');
+    expect(output).toContain('Data 3.4');
+    expect(output).toMatchSnapshot();
+  });
 });