Merge pull request #461 from arty0928/feature/fix-table

Fix Table Component Scroll & Light Mode Color Issues

Author: owjs3901

apps/landing/devup.json

@@ -8,6 +8,7 @@
         "text": "#2F2F2F",
         "background": "#FFF",
         "containerBackground": "#FFF",
+        "codeBackground": "#F5F5F5",
         "border": "#E0E0E0",
         "success": "#4CAF50",
         "warning": "#FF9800",
@@ -53,6 +54,7 @@
         "text": "#EDEDED",
         "background": "#131313",
         "containerBackground": "#373639",
+        "codeBackground": "#2E2E2E",
         "border": "#333",
         "success": "#4CAF50",
         "warning": "#FF9800",

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/CustomCodeBlock.tsx

@@ -4,7 +4,7 @@ export function CustomCodeBlock({ children }: { children: string }) {
   return (
     <Box
       as="code"
-      bg="$containerBackground"
+      bg="$codeBackground"
       borderRadius="0.25rem"
       color="$text"
       padding="0.25rem"

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>
   )

packages/components/devup.json

@@ -11,6 +11,7 @@
         "text": "#272727",
         "background": "#F5F5F5",
         "containerBackground": "#FFFFFF",
+        "codeBackground": "#F5F5F5",
         "border": "#E4E4E4",
         "success": "#2CA353",
         "warning": "#FF9800",
@@ -74,6 +75,7 @@
         "text": "#F6F6F6",
         "background": "#202020",
         "containerBackground": "#1E1E1E",
+        "codeBackground": "#2E2E2E",
         "border": "#434343",
         "success": "#4CAF50",
         "warning": "#FF9800",