fix: enable horizontal scroll for table component on mobile #460

Author: arty0928

apps/landing/src/components/PropsTable.tsx

@@ -1,4 +1,4 @@
-import { Text, VStack } from '@devup-ui/react'
+import { Box, Text, VStack } from '@devup-ui/react'
 import Markdown from 'react-markdown'
 
 import { _components } from '@/mdx-components'
@@ -41,50 +41,52 @@ export const PropsTable = async (props: PropTableProps) => {
   const { componentProps } = props
 
   return (
-    <Table border={0}>
-      <TableHead>
-        <TableRow>
-          <TableHeaderCell>Prop</TableHeaderCell>
-          <TableHeaderCell>description</TableHeaderCell>
-          <TableHeaderCell>Type</TableHeaderCell>
-          <TableHeaderCell>Default</TableHeaderCell>
-        </TableRow>
-      </TableHead>
-      <TableBody>
-        {componentProps.length === 0 && (
+    <Box maxWidth="100%" overflow="auto" width="100%">
+      <Table border={0} style={{ minWidth: '600px' }}>
+        <TableHead>
           <TableRow>
-            <TableCell colSpan={3}>
-              <Text>No props to display</Text>
-            </TableCell>
+            <TableHeaderCell>Prop</TableHeaderCell>
+            <TableHeaderCell>description</TableHeaderCell>
+            <TableHeaderCell>Type</TableHeaderCell>
+            <TableHeaderCell>Default</TableHeaderCell>
           </TableRow>
-        )}
-        {componentProps.map(
-          ({ property, description, type, default: defaultValue }) => (
-            <TableRow key={property}>
-              <TableCell>
-                <Text typography="bodyBold">{property}</Text>
+        </TableHead>
+        <TableBody>
+          {componentProps.length === 0 && (
+            <TableRow>
+              <TableCell colSpan={3}>
+                <Text>No props to display</Text>
               </TableCell>
-              <TableCell>
-                <MdxComponentsWithCodeBlock>
-                  {description}
-                </MdxComponentsWithCodeBlock>
-              </TableCell>
-              <TableCell>
-                <VStack>
+            </TableRow>
+          )}
+          {componentProps.map(
+            ({ property, description, type, default: defaultValue }) => (
+              <TableRow key={property}>
+                <TableCell>
+                  <Text typography="bodyBold">{property}</Text>
+                </TableCell>
+                <TableCell>
                   <MdxComponentsWithCodeBlock>
-                    {type?.replaceAll('"', "'")}
+                    {description}
                   </MdxComponentsWithCodeBlock>
-                </VStack>
-              </TableCell>
-              <TableCell>
-                <MdxComponentsWithCodeBlock>
-                  {defaultValue}
-                </MdxComponentsWithCodeBlock>
-              </TableCell>
-            </TableRow>
-          ),
-        )}
-      </TableBody>
-    </Table>
+                </TableCell>
+                <TableCell>
+                  <VStack>
+                    <MdxComponentsWithCodeBlock>
+                      {type?.replaceAll('"', "'")}
+                    </MdxComponentsWithCodeBlock>
+                  </VStack>
+                </TableCell>
+                <TableCell>
+                  <MdxComponentsWithCodeBlock>
+                    {defaultValue}
+                  </MdxComponentsWithCodeBlock>
+                </TableCell>
+              </TableRow>
+            ),
+          )}
+        </TableBody>
+      </Table>
+    </Box>
   )
 }

apps/landing/src/components/mdx/components/Table/index.tsx

@@ -3,7 +3,7 @@ import { type ComponentProps } from 'react'
 
 export const Table = ({ ...props }: ComponentProps<'table'>) => {
   return (
-    <Box borderRadius="0.5rem" overflow="hidden">
+    <Box borderRadius="0.5rem" overflow="visible">
       <Box {...props} as="table" borderCollapse="collapse" borderSpacing={0} />
     </Box>
   )