From ae1e51ac7c9a2bc6f734dd63adba8436504967ef Mon Sep 17 00:00:00 2001
From: llastflowers <llastflowers@github.com>
Date: Mon, 9 Mar 2026 10:46:36 -0700
Subject: [PATCH 1/3] add flex-wrap to buttons in All Directions story

---
 .../react/src/TooltipV2/Tooltip.features.stories.module.css     | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/react/src/TooltipV2/Tooltip.features.stories.module.css b/packages/react/src/TooltipV2/Tooltip.features.stories.module.css
index 11886484e18..8c35cfc28ca 100644
--- a/packages/react/src/TooltipV2/Tooltip.features.stories.module.css
+++ b/packages/react/src/TooltipV2/Tooltip.features.stories.module.css
@@ -18,11 +18,13 @@
 .AllDirectionsRow {
   padding: var(--base-size-32);
   display: flex;
+  flex-wrap: wrap;
   gap: var(--base-size-8);
 }
 
 .ActionMenuRow {
   display: flex;
+  flex-wrap: wrap;
   padding: var(--base-size-32);
   gap: var(--base-size-8);
 }

From 3a4dea26a3abea7d5bf89eb1449c4caa62f23102 Mon Sep 17 00:00:00 2001
From: llastflowers <llastflowers@github.com>
Date: Wed, 11 Mar 2026 09:50:57 -0700
Subject: [PATCH 2/3] same fix in inactive buttons story

---
 packages/react/src/Button/Button.features.stories.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/Button/Button.features.stories.tsx b/packages/react/src/Button/Button.features.stories.tsx
index 27091cdd25b..0b7d3da149b 100644
--- a/packages/react/src/Button/Button.features.stories.tsx
+++ b/packages/react/src/Button/Button.features.stories.tsx
@@ -6,6 +6,7 @@ import {announce} from '@primer/live-region-element'
 import {Tooltip} from '../TooltipV2/Tooltip'
 import {KeybindingHint} from '../KeybindingHint'
 import VisuallyHidden from '../_VisuallyHidden'
+
 export default {
   title: 'Components/Button/Features',
 }
@@ -129,7 +130,7 @@ export const Disabled = () => (
 )
 
 export const Inactive = () => (
-  <div style={{display: 'flex', flexDirection: 'row', gap: '1rem'}}>
+  <div style={{display: 'flex', flexWrap: 'wrap', flexDirection: 'row', gap: '1rem'}}>
     <VisuallyHidden id="inactive-state">Inactive</VisuallyHidden>
     <Button inactive aria-describedby="inactive-state">
       Default

From ea475f9596da3bd9fd660b98037e5b5dbede59fe Mon Sep 17 00:00:00 2001
From: llastflowers <llastflowers@github.com>
Date: Wed, 11 Mar 2026 09:58:08 -0700
Subject: [PATCH 3/3] add media query for small viewports in data table with
 overflow story

---
 .../DataTable/DataTable.features.stories.module.css   | 11 +++++++++++
 .../src/DataTable/DataTable.features.stories.tsx      |  6 +-----
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/packages/react/src/DataTable/DataTable.features.stories.module.css b/packages/react/src/DataTable/DataTable.features.stories.module.css
index 7c3332d5600..8c8dc8b7612 100644
--- a/packages/react/src/DataTable/DataTable.features.stories.module.css
+++ b/packages/react/src/DataTable/DataTable.features.stories.module.css
@@ -3,3 +3,14 @@
   align-items: center;
   gap: var(--base-size-4);
 }
+
+.WithOverflowWrapper {
+  /* stylelint-disable-next-line primer/responsive-widths */
+  width: 500px;
+}
+
+@media (max-width: 500px) {
+  .WithOverflowWrapper {
+    width: 100%;
+  }
+}
diff --git a/packages/react/src/DataTable/DataTable.features.stories.tsx b/packages/react/src/DataTable/DataTable.features.stories.tsx
index fad39367e60..6563a3054bd 100644
--- a/packages/react/src/DataTable/DataTable.features.stories.tsx
+++ b/packages/react/src/DataTable/DataTable.features.stories.tsx
@@ -1151,11 +1151,7 @@ export const WithNoContent = () => {
 }
 
 export const WithOverflow = () => (
-  <div
-    style={{
-      width: 500,
-    }}
-  >
+  <div className={classes.WithOverflowWrapper}>
     <Table.Container>
       <Table.Title as="h2" id="repositories">
         Repositories