From 484ec7e476e1cbd351ca2fff7f0bbb9940843e26 Mon Sep 17 00:00:00 2001
From: arty0928 <arty0928@konkuk.ac.kr>
Date: Wed, 29 Oct 2025 01:40:21 +0900
Subject: [PATCH 1/3] Draft PR


From e52cb271efb60ded52788a62afdc06c5be101c82 Mon Sep 17 00:00:00 2001
From: arty0928 <arty0928@konkuk.ac.kr>
Date: Fri, 31 Oct 2025 00:46:23 +0900
Subject: [PATCH 2/3] fix: enable horizontal scroll for table component on
 mobile #460

---
 apps/landing/src/components/PropsTable.tsx    | 84 ++++++++++---------
 .../components/mdx/components/Table/index.tsx |  2 +-
 2 files changed, 44 insertions(+), 42 deletions(-)

diff --git a/apps/landing/src/components/PropsTable.tsx b/apps/landing/src/components/PropsTable.tsx
index 0847e7f8..8bd3e9ff 100644
--- a/apps/landing/src/components/PropsTable.tsx
+++ b/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>
   )
 }
diff --git a/apps/landing/src/components/mdx/components/Table/index.tsx b/apps/landing/src/components/mdx/components/Table/index.tsx
index 02c4155f..e82196ff 100644
--- a/apps/landing/src/components/mdx/components/Table/index.tsx
+++ b/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>
   )

From 051eb24dcbdc0da7076569afc3726a44a95d3c81 Mon Sep 17 00:00:00 2001
From: arty0928 <arty0928@konkuk.ac.kr>
Date: Fri, 31 Oct 2025 02:15:58 +0900
Subject: [PATCH 3/3] fix: resolve inline code visibility issue in light mode
 by adding 'codeBackground' color #460

---
 apps/landing/devup.json                                        | 2 ++
 apps/landing/src/components/mdx/components/CustomCodeBlock.tsx | 2 +-
 packages/components/devup.json                                 | 2 ++
 3 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/apps/landing/devup.json b/apps/landing/devup.json
index df27821b..ccb80380 100644
--- a/apps/landing/devup.json
+++ b/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",
diff --git a/apps/landing/src/components/mdx/components/CustomCodeBlock.tsx b/apps/landing/src/components/mdx/components/CustomCodeBlock.tsx
index 429ae342..0fa1957d 100644
--- a/apps/landing/src/components/mdx/components/CustomCodeBlock.tsx
+++ b/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"
diff --git a/packages/components/devup.json b/packages/components/devup.json
index ab553df7..888d6348 100644
--- a/packages/components/devup.json
+++ b/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",