From 4c045d891f5eed93756fe8257e0d3b9c33e1c3ad Mon Sep 17 00:00:00 2001
From: JonasBa <jonas@badalic.com>
Date: Thu, 8 Jan 2026 12:49:53 -0800
Subject: [PATCH 1/2] ref(container) add ellipsis support

---
 .../app/components/core/layout/container.tsx  | 26 +++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/static/app/components/core/layout/container.tsx b/static/app/components/core/layout/container.tsx
index b9a454996eab18..aeb1ec6b4ab392 100644
--- a/static/app/components/core/layout/container.tsx
+++ b/static/app/components/core/layout/container.tsx
@@ -22,6 +22,13 @@ import {
 
 /* eslint-disable typescript-sort-keys/interface */
 interface ContainerLayoutProps {
+  /**
+   * When true, overflow is set to hidden, text-overflow is set to ellipsis, and white-space is set to nowrap.
+   * Individual properties can be overridden by setting the corresponding property (e.g. overflow, text-overflow, white-space).
+   * @default undefined
+   */
+  ellipsis?: Responsive<boolean>;
+
   background?: Responsive<SurfaceVariant>;
   display?: Responsive<
     | 'block'
@@ -82,6 +89,9 @@ interface ContainerLayoutProps {
   alignSelf?: Responsive<React.CSSProperties['alignSelf']>;
   justifySelf?: Responsive<React.CSSProperties['justifySelf']>;
 
+  textOverflow?: Responsive<React.CSSProperties['textOverflow']>;
+  whiteSpace?: Responsive<React.CSSProperties['whiteSpace']>;
+
   /**
    * Prefer using Flex or Grid gap as opposed to margin.
    * @deprecated
@@ -167,6 +177,7 @@ const omitContainerProps = new Set<keyof ContainerLayoutProps | 'as'>([
   'bottom',
   'column',
   'display',
+  'ellipsis',
   'flex',
   'flexBasis',
   'flexGrow',
@@ -197,8 +208,10 @@ const omitContainerProps = new Set<keyof ContainerLayoutProps | 'as'>([
   'radius',
   'right',
   'row',
+  'textOverflow',
   'top',
   'width',
+  'whiteSpace',
 ]);
 
 export const Container = styled(
@@ -277,6 +290,19 @@ export const Container = styled(
   ${p => rc('border-left', p.borderLeft, p.theme, getBorder)};
   ${p => rc('border-right', p.borderRight, p.theme, getBorder)};
 
+  ${p =>
+    rc(
+      'text-overflow',
+      p.textOverflow ? p.textOverflow : p.ellipsis ? 'ellipsis' : undefined,
+      p.theme
+    )};
+  ${p =>
+    rc(
+      'white-space',
+      p.whiteSpace ? p.whiteSpace : p.ellipsis ? 'nowrap' : undefined,
+      p.theme
+    )};
+
   /**
    * This cast is required because styled-components does not preserve the generic signature of the wrapped component.
    * By default, the generic type parameter <T> is lost, so we use 'as unknown as' to restore the correct typing.

From 825026955a55aa2d5a07513ed3d04ea4aab5dd55 Mon Sep 17 00:00:00 2001
From: JonasBa <jonas@badalic.com>
Date: Thu, 8 Jan 2026 14:42:48 -0800
Subject: [PATCH 2/2] add docs

---
 .../app/components/core/layout/container.mdx  | 31 ++++++++++++++++++-
 .../app/components/core/layout/container.tsx  |  7 ++++-
 2 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/static/app/components/core/layout/container.mdx b/static/app/components/core/layout/container.mdx
index ffc66ae07ca1e2..7ee6b6fa2b4090 100644
--- a/static/app/components/core/layout/container.mdx
+++ b/static/app/components/core/layout/container.mdx
@@ -8,6 +8,7 @@ resources:
 ---
 
 import {Container, Flex} from 'sentry/components/core/layout';
+import {Text} from 'sentry/components/core/text';
 import * as Storybook from 'sentry/stories';
 
 import documentation from '!!type-loader!@sentry/scraps/layout/container';
@@ -184,7 +185,35 @@ The `2xs` breakpoint is a breakpoint that applies from 0 to the smallest defined
 </Container>
 ```
 
-### Grid Integration
+#### Truncating Text within a Container
+
+In most case, it is recommended to use the `Text` component with the `ellipsis` prop to truncate text inside a container while using the parent `Container` component to set the actual boundary box for the text.
+
+<Storybook.Demo>
+  <Container maxWidth="200px">
+    <Text ellipsis>This content is hidden and ellipsed</Text>
+  </Container>
+</Storybook.Demo>
+```jsx
+<Container maxWidth="200px">
+  <Text ellipsis>This content is hidden and ellipsed</Text>
+</Container>
+```
+
+There is however another way to truncate text within a container by using the `ellipsis` prop on the parent `Container` component. This way, if you have multiple lines of text, they will all be truncated with an ellipsis.
+
+<Storybook.Demo>
+  <Container ellipsis maxWidth="200px">
+    <Text as="span">This content is hidden and ellipsed</Text>
+    <Text as="span">This content is hidden and ellipsed</Text>
+  </Container>
+</Storybook.Demo>
+```jsx
+<Container ellipsis maxWidth="200px">
+  <div>This content is hidden and ellipsed</div>
+  <div>This content is hidden and ellipsed</div>
+</Container>
+``` ### Grid Integration
 
 The `area` prop supports CSS Grid integration:
 
diff --git a/static/app/components/core/layout/container.tsx b/static/app/components/core/layout/container.tsx
index aeb1ec6b4ab392..b6a1196915b728 100644
--- a/static/app/components/core/layout/container.tsx
+++ b/static/app/components/core/layout/container.tsx
@@ -243,7 +243,12 @@ export const Container = styled(
   ${p => rc('left', p.left, p.theme)};
   ${p => rc('right', p.right, p.theme)};
 
-  ${p => rc('overflow', p.overflow, p.theme)};
+  ${p =>
+    p.overflow
+      ? rc('overflow', p.overflow, p.theme)
+      : p.ellipsis
+        ? rc('overflow', p.ellipsis, p.theme, v => (v ? 'hidden' : ''))
+        : undefined};
   ${p => rc('overflow-x', p.overflowX, p.theme)};
   ${p => rc('overflow-y', p.overflowY, p.theme)};