From b1b47e6292ee76eecfba887445aeda9330da0cc9 Mon Sep 17 00:00:00 2001
From: Sarah Higley <sarah.higley@microsoft.com>
Date: Fri, 1 May 2026 17:51:50 -0700
Subject: [PATCH] fix: Card examples reflow at small widths

---
 .../stories/src/Card/CardAction.stories.tsx       |  4 ++--
 .../stories/src/Card/CardAppearance.stories.tsx   |  4 ++--
 .../stories/src/Card/CardDefault.stories.tsx      |  4 ++--
 .../stories/src/Card/CardDisabled.stories.tsx     | 15 ++++++++-------
 .../stories/src/Card/CardFocusMode.stories.tsx    |  4 ++--
 .../stories/src/Card/CardOrientation.stories.tsx  |  6 +++---
 .../stories/src/Card/CardSelectable.stories.tsx   |  4 ++--
 .../src/Card/CardSelectableIndicator.stories.tsx  |  4 ++--
 .../stories/src/Card/CardSize.stories.tsx         |  9 +++++----
 .../stories/src/Card/CardTemplates.stories.tsx    |  4 +++-
 10 files changed, 31 insertions(+), 27 deletions(-)

diff --git a/packages/react-components/react-card/stories/src/Card/CardAction.stories.tsx b/packages/react-components/react-card/stories/src/Card/CardAction.stories.tsx
index 30da03dfc476a6..c48beaf5cc3e8f 100644
--- a/packages/react-components/react-card/stories/src/Card/CardAction.stories.tsx
+++ b/packages/react-components/react-card/stories/src/Card/CardAction.stories.tsx
@@ -37,8 +37,8 @@ const useStyles = makeStyles({
   description: { margin: '0 0 12px' },
 
   card: {
-    width: '400px',
-    maxWidth: '100%',
+    maxWidth: '400px',
+    width: '100%',
     height: 'fit-content',
   },
 
diff --git a/packages/react-components/react-card/stories/src/Card/CardAppearance.stories.tsx b/packages/react-components/react-card/stories/src/Card/CardAppearance.stories.tsx
index 6707579212ef14..fcd3c7b1b5cb1d 100644
--- a/packages/react-components/react-card/stories/src/Card/CardAppearance.stories.tsx
+++ b/packages/react-components/react-card/stories/src/Card/CardAppearance.stories.tsx
@@ -24,8 +24,8 @@ const useStyles = makeStyles({
   description: { margin: '0 0 12px' },
 
   card: {
-    width: '480px',
-    maxWidth: '100%',
+    maxWidth: '480px',
+    width: '100%',
     height: 'fit-content',
   },
 
diff --git a/packages/react-components/react-card/stories/src/Card/CardDefault.stories.tsx b/packages/react-components/react-card/stories/src/Card/CardDefault.stories.tsx
index bd672d5a1fcd90..5850c8cd59ee51 100644
--- a/packages/react-components/react-card/stories/src/Card/CardDefault.stories.tsx
+++ b/packages/react-components/react-card/stories/src/Card/CardDefault.stories.tsx
@@ -23,8 +23,8 @@ const resolveAsset = (asset: string) => {
 const useStyles = makeStyles({
   card: {
     margin: 'auto',
-    width: '720px',
-    maxWidth: '100%',
+    maxWidth: '720px',
+    width: '100%',
   },
 });
 
diff --git a/packages/react-components/react-card/stories/src/Card/CardDisabled.stories.tsx b/packages/react-components/react-card/stories/src/Card/CardDisabled.stories.tsx
index 39274d98a0f714..fb6f15c9babb2c 100644
--- a/packages/react-components/react-card/stories/src/Card/CardDisabled.stories.tsx
+++ b/packages/react-components/react-card/stories/src/Card/CardDisabled.stories.tsx
@@ -12,8 +12,9 @@ const useStyles = makeStyles({
     gap: '16px',
   },
   card: {
-    width: '400px',
-    maxWidth: '100%',
+    maxWidth: '400px',
+    minWidth: '230px',
+    width: '100%',
   },
 });
 
@@ -60,7 +61,7 @@ export const Disabled = (): JSXElement => {
     <div className={styles.container}>
       <div>
         <h3>Default Card</h3>
-        <div style={{ display: 'flex', gap: '16px' }}>
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '16px' }}>
           <Card className={styles.card}>
             <CardContentExample />
           </Card>
@@ -73,7 +74,7 @@ export const Disabled = (): JSXElement => {
 
       <div>
         <h3>Interactive Card</h3>
-        <div style={{ display: 'flex', gap: '16px' }}>
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '16px' }}>
           <Card className={styles.card} onClick={() => alert('Card clicked')}>
             <CardContentExample />
           </Card>
@@ -87,7 +88,7 @@ export const Disabled = (): JSXElement => {
       <div>
         <h3>Selectable Card</h3>
         <div style={{ display: 'flex', flexDirection: 'column', rowGap: '16px' }}>
-          <div style={{ display: 'flex', gap: '16px' }}>
+          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '16px' }}>
             <Card
               className={styles.card}
               selected={isSelected1}
@@ -100,7 +101,7 @@ export const Disabled = (): JSXElement => {
             </Card>
           </div>
 
-          <div style={{ display: 'flex', gap: '16px' }}>
+          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '16px' }}>
             <Card
               className={styles.card}
               selected={isSelected2}
@@ -118,7 +119,7 @@ export const Disabled = (): JSXElement => {
 
       <div>
         <h3>Outline Card</h3>
-        <div style={{ display: 'flex', gap: '16px' }}>
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '16px' }}>
           <Card className={styles.card} appearance="outline">
             <CardContentExample />
           </Card>
diff --git a/packages/react-components/react-card/stories/src/Card/CardFocusMode.stories.tsx b/packages/react-components/react-card/stories/src/Card/CardFocusMode.stories.tsx
index f7610028748ea5..db5289799558e3 100644
--- a/packages/react-components/react-card/stories/src/Card/CardFocusMode.stories.tsx
+++ b/packages/react-components/react-card/stories/src/Card/CardFocusMode.stories.tsx
@@ -25,8 +25,8 @@ const useStyles = makeStyles({
   description: { margin: '0 0 12px' },
 
   card: {
-    width: '400px',
-    maxWidth: '100%',
+    maxWidth: '400px',
+    width: '100%',
     height: 'fit-content',
   },
 
diff --git a/packages/react-components/react-card/stories/src/Card/CardOrientation.stories.tsx b/packages/react-components/react-card/stories/src/Card/CardOrientation.stories.tsx
index a96b2fe3acfb36..ba5db2b27a1df4 100644
--- a/packages/react-components/react-card/stories/src/Card/CardOrientation.stories.tsx
+++ b/packages/react-components/react-card/stories/src/Card/CardOrientation.stories.tsx
@@ -20,13 +20,13 @@ const useStyles = makeStyles({
   },
 
   card: {
-    width: '360px',
-    maxWidth: '100%',
+    width: '100%',
     height: 'fit-content',
   },
 
   section: {
-    width: 'fit-content',
+    maxWidth: '360px',
+    width: '100%',
   },
 
   title: { margin: '0 0 12px' },
diff --git a/packages/react-components/react-card/stories/src/Card/CardSelectable.stories.tsx b/packages/react-components/react-card/stories/src/Card/CardSelectable.stories.tsx
index 3492eadcac6c7c..ff4b89776b0891 100644
--- a/packages/react-components/react-card/stories/src/Card/CardSelectable.stories.tsx
+++ b/packages/react-components/react-card/stories/src/Card/CardSelectable.stories.tsx
@@ -19,8 +19,8 @@ const useStyles = makeStyles({
   },
 
   card: {
-    width: '400px',
-    maxWidth: '100%',
+    maxWidth: '400px',
+    width: '100%',
     height: 'fit-content',
   },
 
diff --git a/packages/react-components/react-card/stories/src/Card/CardSelectableIndicator.stories.tsx b/packages/react-components/react-card/stories/src/Card/CardSelectableIndicator.stories.tsx
index 51067cdc142afa..8f406d481ae21d 100644
--- a/packages/react-components/react-card/stories/src/Card/CardSelectableIndicator.stories.tsx
+++ b/packages/react-components/react-card/stories/src/Card/CardSelectableIndicator.stories.tsx
@@ -28,8 +28,8 @@ const useStyles = makeStyles({
   },
 
   card: {
-    width: '400px',
-    maxWidth: '100%',
+    maxWidth: '400px',
+    width: '100%',
     height: 'fit-content',
   },
 
diff --git a/packages/react-components/react-card/stories/src/Card/CardSize.stories.tsx b/packages/react-components/react-card/stories/src/Card/CardSize.stories.tsx
index fa1f619f823238..44abd8ae263df2 100644
--- a/packages/react-components/react-card/stories/src/Card/CardSize.stories.tsx
+++ b/packages/react-components/react-card/stories/src/Card/CardSize.stories.tsx
@@ -22,8 +22,8 @@ const useStyles = makeStyles({
   title: { margin: '0 0 12px' },
 
   card: {
-    width: '300px',
-    maxWidth: '100%',
+    maxWidth: '300px',
+    width: '100%',
     height: 'fit-content',
   },
 
@@ -112,8 +112,9 @@ export const Size = (): JSXElement => {
 Size.parameters = {
   docs: {
     description: {
-      story: `Size options are mainly to provide variety, and consistency when using cards for different usages. It
-      relates to padding and border-radius and not so much the actual dimensions of the card.`,
+      story:
+        'Size options are mainly to provide variety, and consistency when using cards for different usages.' +
+        'It relates to padding and border-radius and not so much the actual dimensions of the card.',
     },
   },
 };
diff --git a/packages/react-components/react-card/stories/src/Card/CardTemplates.stories.tsx b/packages/react-components/react-card/stories/src/Card/CardTemplates.stories.tsx
index 7571d3679fa466..64b29e2f004d81 100644
--- a/packages/react-components/react-card/stories/src/Card/CardTemplates.stories.tsx
+++ b/packages/react-components/react-card/stories/src/Card/CardTemplates.stories.tsx
@@ -29,7 +29,8 @@ const useStyles = makeStyles({
   },
 
   card: {
-    width: '280px',
+    maxWidth: '280px',
+    width: '100%',
     height: 'fit-content',
   },
 
@@ -57,6 +58,7 @@ const useStyles = makeStyles({
     gap: '16px',
     display: 'flex',
     flexDirection: 'column',
+    width: '100%',
   },
 });