From 615748657aaf5c0b5d19c7ff046346a29275ed81 Mon Sep 17 00:00:00 2001
From: Elvin <eaghammad@gmail.com>
Date: Tue, 15 Jul 2025 19:35:03 -0400
Subject: Update MaxSizedBox.tsx (#2233)

Co-authored-by: Jacob Richman <jacob314@gmail.com>
Co-authored-by: Scott Densmore <scottdensmore@mac.com>
Co-authored-by: Pascal Birchler <pascalb@google.com>
---
 .../src/ui/components/shared/MaxSizedBox.test.tsx  | 83 ++++++++++++++++++++++
 1 file changed, 83 insertions(+)

(limited to 'packages/cli/src/ui/components/shared/MaxSizedBox.test.tsx')

diff --git a/packages/cli/src/ui/components/shared/MaxSizedBox.test.tsx b/packages/cli/src/ui/components/shared/MaxSizedBox.test.tsx
index 50951b4f..92147d3c 100644
--- a/packages/cli/src/ui/components/shared/MaxSizedBox.test.tsx
+++ b/packages/cli/src/ui/components/shared/MaxSizedBox.test.tsx
@@ -248,6 +248,89 @@ Line 3`);
 🐶`);
   });
 
+  it('falls back to an ellipsis when width is extremely small', () => {
+    const { lastFrame } = render(
+      <OverflowProvider>
+        <MaxSizedBox maxWidth={2} maxHeight={2}>
+          <Box>
+            <Text>No</Text>
+            <Text wrap="wrap">wrap</Text>
+          </Box>
+        </MaxSizedBox>
+      </OverflowProvider>,
+    );
+
+    expect(lastFrame()).equals('N…');
+  });
+
+  it('truncates long non-wrapping text with ellipsis', () => {
+    const { lastFrame } = render(
+      <OverflowProvider>
+        <MaxSizedBox maxWidth={3} maxHeight={2}>
+          <Box>
+            <Text>ABCDE</Text>
+            <Text wrap="wrap">wrap</Text>
+          </Box>
+        </MaxSizedBox>
+      </OverflowProvider>,
+    );
+
+    expect(lastFrame()).equals('AB…');
+  });
+
+  it('truncates non-wrapping text containing line breaks', () => {
+    const { lastFrame } = render(
+      <OverflowProvider>
+        <MaxSizedBox maxWidth={3} maxHeight={2}>
+          <Box>
+            <Text>{'A\nBCDE'}</Text>
+            <Text wrap="wrap">wrap</Text>
+          </Box>
+        </MaxSizedBox>
+      </OverflowProvider>,
+    );
+
+    expect(lastFrame()).equals(`A\n…`);
+  });
+
+  it('truncates emoji characters correctly with ellipsis', () => {
+    const { lastFrame } = render(
+      <OverflowProvider>
+        <MaxSizedBox maxWidth={3} maxHeight={2}>
+          <Box>
+            <Text>🐶🐶🐶</Text>
+            <Text wrap="wrap">wrap</Text>
+          </Box>
+        </MaxSizedBox>
+      </OverflowProvider>,
+    );
+
+    expect(lastFrame()).equals(`🐶…`);
+  });
+
+  it('shows ellipsis for multiple rows with long non-wrapping text', () => {
+    const { lastFrame } = render(
+      <OverflowProvider>
+        <MaxSizedBox maxWidth={3} maxHeight={3}>
+          <Box>
+            <Text>AAA</Text>
+            <Text wrap="wrap">first</Text>
+          </Box>
+          <Box>
+            <Text>BBB</Text>
+            <Text wrap="wrap">second</Text>
+          </Box>
+          <Box>
+            <Text>CCC</Text>
+            <Text wrap="wrap">third</Text>
+          </Box>
+        </MaxSizedBox>
+      </OverflowProvider>,
+    );
+
+    expect(lastFrame()).equals(`AA…\nBB…\nCC…`);
+  });
+
   it('accounts for additionalHiddenLinesCount', () => {
     const { lastFrame } = render(
       <OverflowProvider>
-- 
cgit v1.2.3