From 7c966d34eb2c7837859805c13864540042b98389 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Fri, 6 Feb 2026 06:56:56 +0000
Subject: [PATCH] Update Card.stories.tsx

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .../ui/src/components/Card/Card.stories.tsx   | 57 ++++++++-----------
 1 file changed, 24 insertions(+), 33 deletions(-)

diff --git a/packages/ui/src/components/Card/Card.stories.tsx b/packages/ui/src/components/Card/Card.stories.tsx
index d1d6c43327..d51c9ed5b3 100644
--- a/packages/ui/src/components/Card/Card.stories.tsx
+++ b/packages/ui/src/components/Card/Card.stories.tsx
@@ -208,40 +208,31 @@ export const SurfacesNested = meta.story({
 
 export const SurfacesAutoIncrement = meta.story({
   render: args => (
-    <Flex direction="column">
-      <Box style={{ maxWidth: '600px' }} mb="4">
-        Using surface="auto" automatically increments from the parent surface
-        level. This makes components more reusable as they don't need to know
-        their absolute surface level. Notice how each nested Card with
-        surface="auto" automatically increments: 0 → 1 → 2 → 3 (capped at 3).
+    <Flex align="start" style={{ flexWrap: 'wrap' }} gap="4">
+      <Box surface="0" p="4" style={{ borderRadius: '8px' }}>
+        <Card {...args} surface="auto" style={{ width: '200px' }}>
+          <CardHeader>On surface 0</CardHeader>
+          <CardBody>Card auto → 1</CardBody>
+        </Card>
+      </Box>
+      <Box surface="1" p="4" style={{ borderRadius: '8px' }}>
+        <Card {...args} surface="auto" style={{ width: '200px' }}>
+          <CardHeader>On surface 1</CardHeader>
+          <CardBody>Card auto → 2</CardBody>
+        </Card>
+      </Box>
+      <Box surface="2" p="4" style={{ borderRadius: '8px' }}>
+        <Card {...args} surface="auto" style={{ width: '200px' }}>
+          <CardHeader>On surface 2</CardHeader>
+          <CardBody>Card auto → 3</CardBody>
+        </Card>
+      </Box>
+      <Box surface="3" p="4" style={{ borderRadius: '8px' }}>
+        <Card {...args} surface="auto" style={{ width: '200px' }}>
+          <CardHeader>On surface 3</CardHeader>
+          <CardBody>Card auto → 3 (capped)</CardBody>
+        </Card>
       </Box>
-      <Card {...args} surface="0" style={{ width: '500px' }}>
-        <CardHeader>Surface 0 (explicit)</CardHeader>
-        <CardBody>
-          <Card {...args} surface="auto">
-            <CardHeader>Surface auto (becomes 1)</CardHeader>
-            <CardBody>
-              <Button variant="secondary" onSurface="auto">
-                Button auto
-              </Button>
-              <Card {...args} surface="auto" style={{ marginTop: '16px' }}>
-                <CardHeader>Surface auto (becomes 2)</CardHeader>
-                <CardBody>
-                  <Card {...args} surface="auto">
-                    <CardHeader>Surface auto (becomes 3)</CardHeader>
-                    <CardBody>
-                      <Card {...args} surface="auto">
-                        <CardHeader>Surface auto (stays 3 - capped)</CardHeader>
-                        <CardBody>Capped at max surface level</CardBody>
-                      </Card>
-                    </CardBody>
-                  </Card>
-                </CardBody>
-              </Card>
-            </CardBody>
-          </Card>
-        </CardBody>
-      </Card>
     </Flex>
   ),
 });