From cad814da29c4eee1fdf99eefec1a0d3379f791ae Mon Sep 17 00:00:00 2001
From: Vaibhav Sarkar <sarkarvaibhav20@gmail.com>
Date: Mon, 18 May 2026 11:05:41 +0530
Subject: [PATCH] fix(fuselage): wrap PropsVariation table to prevent mobile
 overflow

Closes #1825
---
 .changeset/fix-props-variation-overflow.md    |  5 ++
 .../fuselage/.storybook/PropsVariation.tsx    | 73 +++++++++++--------
 2 files changed, 46 insertions(+), 32 deletions(-)
 create mode 100644 .changeset/fix-props-variation-overflow.md

diff --git a/.changeset/fix-props-variation-overflow.md b/.changeset/fix-props-variation-overflow.md
new file mode 100644
index 0000000000..c0f6d8fb46
--- /dev/null
+++ b/.changeset/fix-props-variation-overflow.md
@@ -0,0 +1,5 @@
+---
+"@rocket.chat/fuselage": patch
+---
+
+fix(fuselage): wrap PropsVariation table to prevent mobile overflow
\ No newline at end of file
diff --git a/packages/fuselage/.storybook/PropsVariation.tsx b/packages/fuselage/.storybook/PropsVariation.tsx
index cfbda409ae..ccdb7e6ea9 100644
--- a/packages/fuselage/.storybook/PropsVariation.tsx
+++ b/packages/fuselage/.storybook/PropsVariation.tsx
@@ -15,42 +15,51 @@ function PropsVariation({
 }) {
   return (
     <Box
-      is='table'
-      marginBlock={16}
-      marginInline='auto'
-      style={{ borderCollapse: 'collapse' }}
+      overflowX='auto'
+      style={{ WebkitOverflowScrolling: 'touch', maxWidth: '100%' }}
     >
-      <Box is='thead'>
-        <Box is='tr'>
-          <Box is='th' />
-          {Object.keys(xAxis).map((xVariation, key) => (
-            <Box key={key} is='th' color='hint' fontScale='c1'>
-              {xVariation}
-            </Box>
-          ))}
-        </Box>
-      </Box>
-      <Box is='tbody'>
-        {Object.entries(yAxis).map(([yVariation, yProps], y) => (
-          <Box key={y} is='tr'>
-            <Box is='th' color='hint' fontScale='c1'>
-              {yVariation}
-            </Box>
-            {Object.values(xAxis).map((xProps, x) => (
-              <Box
-                key={x}
-                is='td'
-                margin='none'
-                paddingBlock={8}
-                paddingInline={16}
-              >
-                <Box display='flex' alignItems='center' justifyContent='center'>
-                  <Component {...common} {...xProps} {...yProps} />
-                </Box>
+      <Box
+        is='table'
+        marginBlock={16}
+        marginInline='auto'
+        style={{ borderCollapse: 'collapse' }}
+      >
+        <Box is='thead'>
+          <Box is='tr'>
+            <Box is='th' />
+            {Object.keys(xAxis).map((xVariation, key) => (
+              <Box key={key} is='th' color='hint' fontScale='c1'>
+                {xVariation}
               </Box>
             ))}
           </Box>
-        ))}
+        </Box>
+        <Box is='tbody'>
+          {Object.entries(yAxis).map(([yVariation, yProps], y) => (
+            <Box key={y} is='tr'>
+              <Box is='th' color='hint' fontScale='c1'>
+                {yVariation}
+              </Box>
+              {Object.values(xAxis).map((xProps, x) => (
+                <Box
+                  key={x}
+                  is='td'
+                  margin='none'
+                  paddingBlock={8}
+                  paddingInline={16}
+                >
+                  <Box
+                    display='flex'
+                    alignItems='center'
+                    justifyContent='center'
+                  >
+                    <Component {...common} {...xProps} {...yProps} />
+                  </Box>
+                </Box>
+              ))}
+            </Box>
+          ))}
+        </Box>
       </Box>
     </Box>
   );