From 3b3dbd0a5d7c2c70a8097ac8cd7e0ea1cb2e550b Mon Sep 17 00:00:00 2001
From: Katie Langerman <18661030+langermank@users.noreply.github.com>
Date: Wed, 10 Sep 2025 11:12:45 -0700
Subject: [PATCH] fix

---
 e2e/components/SegmentedControl.test.ts       |  4 +++
 .../SegmentedControl.dev.stories.tsx          | 16 ++++++++++
 .../SegmentedControl.module.css               | 32 +++++++++++--------
 3 files changed, 39 insertions(+), 13 deletions(-)

diff --git a/e2e/components/SegmentedControl.test.ts b/e2e/components/SegmentedControl.test.ts
index 5247403ed1d..ceb52a5c49d 100644
--- a/e2e/components/SegmentedControl.test.ts
+++ b/e2e/components/SegmentedControl.test.ts
@@ -68,6 +68,10 @@ const stories = [
     title: 'Dev: With Sx And Css',
     id: 'components-segmentedcontrol-dev--with-sx-and-css',
   },
+  {
+    title: 'Dev: Truncation',
+    id: 'components-segmentedcontrol-dev--in-narrow-container',
+  },
 ] as const
 
 test.describe('SegmentedControl', () => {
diff --git a/packages/react/src/SegmentedControl/SegmentedControl.dev.stories.tsx b/packages/react/src/SegmentedControl/SegmentedControl.dev.stories.tsx
index 3f44f7db7db..ab51a07d903 100644
--- a/packages/react/src/SegmentedControl/SegmentedControl.dev.stories.tsx
+++ b/packages/react/src/SegmentedControl/SegmentedControl.dev.stories.tsx
@@ -75,3 +75,19 @@ export const WithSxAndCss = () => (
     </SegmentedControl.Button>
   </SegmentedControl>
 )
+
+export const InNarrowContainer = () => (
+  <div style={{width: '275px', border: '1px solid black', padding: '8px'}}>
+    <SegmentedControl aria-label="File view" fullWidth>
+      <SegmentedControl.Button defaultSelected aria-label={'Preview'} leadingIcon={EyeIcon}>
+        Preview
+      </SegmentedControl.Button>
+      <SegmentedControl.Button aria-label={'Raw'} leadingIcon={FileCodeIcon}>
+        Raw
+      </SegmentedControl.Button>
+      <SegmentedControl.Button aria-label={'Blame'} leadingIcon={PeopleIcon}>
+        Blame
+      </SegmentedControl.Button>
+    </SegmentedControl>
+  </div>
+)
diff --git a/packages/react/src/SegmentedControl/SegmentedControl.module.css b/packages/react/src/SegmentedControl/SegmentedControl.module.css
index c0371ea8fdc..7ceebe643e2 100644
--- a/packages/react/src/SegmentedControl/SegmentedControl.module.css
+++ b/packages/react/src/SegmentedControl/SegmentedControl.module.css
@@ -1,14 +1,13 @@
 .SegmentedControl {
   display: inline-flex;
-
-  /* TODO: use primitive `control.{small|medium}.size` when it is available */
-  height: 32px;
+  height: var(--control-medium-size);
   padding: 0;
   margin: 0;
   font-size: var(--text-body-size-medium);
   background-color: var(--controlTrack-bgColor-rest);
   border: var(--borderWidth-thin) solid var(--controlTrack-borderColor-rest, transparent);
   border-radius: var(--borderRadius-medium);
+  max-width: 100%;
 
   &:where([data-full-width]) {
     display: flex;
@@ -16,8 +15,7 @@
   }
 
   &:where([data-size='small']) {
-    /* TODO: use primitive `control.{small|medium}.size` when it is available */
-    height: 28px;
+    height: var(--control-small-size);
     font-size: var(--text-body-size-small);
   }
 }
@@ -30,6 +28,7 @@
   /* stylelint-disable-next-line primer/spacing */
   margin-bottom: -1px;
   flex-grow: 1;
+  min-width: 0;
 
   &:not(:last-child) {
     /* stylelint-disable-next-line primer/spacing */
@@ -187,15 +186,22 @@
   }
 }
 
-.Text::after {
-  display: block;
-  height: 0;
+.Text {
+  flex: 1;
   overflow: hidden;
-  font-weight: var(--base-text-weight-semibold);
-  pointer-events: none;
-  visibility: hidden;
-  content: attr(data-text);
-  user-select: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  &::after {
+    display: block;
+    height: 0;
+    overflow: hidden;
+    font-weight: var(--base-text-weight-semibold);
+    pointer-events: none;
+    visibility: hidden;
+    content: attr(data-text);
+    user-select: none;
+  }
 }
 
 .LeadingIcon {