Fix button mdx page responsive design

Author: forestream

apps/landing/src/app/(detail)/components/MdxCard.tsx

@@ -16,6 +16,8 @@ export default function MdxCard({ children }: { children: React.ReactNode }) {
         border: '1px solid $border',
         bg: '$containerBackground',
         maxWidth: '100%',
+        minWidth: '300px',
+        flexShrink: 0,
         cursor: 'default',
         marginBottom: '20px',
         _lastChild: {

apps/landing/src/app/(detail)/components/Table.tsx

@@ -19,6 +19,7 @@ export function Table({
       selectors={{
         '& th, & td': {
           border: 'none',
+          minWidth: '200px',
         },
       }}
       {...props}

apps/landing/src/app/(detail)/components/button/Examples.mdx

@@ -5,17 +5,17 @@ import MdxCardFooter from '../MdxCardFooter'
 
 ###### Examples
 
-<div style={{ display: 'flex', gap: '16px' }}>
+<div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap' }}>
     <section style={{ flex: '1 1 0%' }}>
     <MdxCard>
     <div style={{ padding: '32px 24px' }}>
     <div style={{width: '100%'}}>
-    <div style={{ display: 'flex', gap: '12px', marginBottom: '16px' }}>
+    <div style={{ display: 'flex',flexWrap: 'wrap', gap: '12px', marginBottom: '16px' }}>
     <Button size="sm" style={{ height: 'min-content' }} variant="primary">Primary sm</Button>
     <Button size="md" style={{ height: 'min-content' }} variant="primary">Primary md</Button>
     <Button size="lg" style={{ height: 'min-content' }} variant="primary">Primary lg</Button>
     </div>
-    <div style={{ display: 'flex', gap: '12px' }}>
+    <div style={{ display: 'flex',flexWrap: 'wrap', gap: '12px' }}>
     <Button size="sm" style={{ height: 'min-content' }}>Default sm</Button>
     <Button size="md" style={{ height: 'min-content' }}>Default md</Button>
     <Button size="lg" style={{ height: 'min-content' }}>Default lg</Button>
@@ -56,7 +56,7 @@ import MdxCardFooter from '../MdxCardFooter'
             <div style={{ padding: '32px 24px' }}>
               <div style={{ width: '100%' }}>
                 <div
-                  style={{ display: 'flex', gap: '12px', marginBottom: '16px' }}
+                  style={{ display: 'flex',flexWrap:'wrap', gap: '12px', marginBottom: '16px' }}
                 >
                   <Button danger size="sm" style={{ height: 'min-content' }}>Danger sm</Button>
                   <Button danger size="md" style={{ height: 'min-content' }}>Danger md</Button>
@@ -85,7 +85,7 @@ import MdxCardFooter from '../MdxCardFooter'
             <div style={{ padding: '32px 24px' }}>
               <div style={{ width: '100%' }}>
                 <div
-                  style={{ display: 'flex', gap: '12px', marginBottom: '16px' }}
+                  style={{ display: 'flex',flexWrap:'wrap', gap: '12px', marginBottom: '16px' }}
                 >
                   <Button disabled variant="primary" style={{ height: 'min-content' }}>Primary disabled</Button>
                   <Button disabled style={{ height: 'min-content' }}>Default disabled</Button>
@@ -109,7 +109,7 @@ import MdxCardFooter from '../MdxCardFooter'
             <div style={{ padding: '32px 24px' }}>
               <div style={{ width: '100%' }}>
                 <div
-                  style={{ display: 'flex', gap: '12px', marginBottom: '16px' }}
+                  style={{ display: 'flex',flexWrap: 'wrap', gap: '12px', marginBottom: '16px' }}
                 >
                   <Button
                     icon={
@@ -224,7 +224,7 @@ import MdxCardFooter from '../MdxCardFooter'
             <div style={{ padding: '32px 24px' }}>
               <div style={{ width: '100%' }}>
                 <div
-                  style={{ display: 'flex', gap: '12px', marginBottom: '16px' }}
+                  style={{ display: 'flex', gap: '12px', marginBottom: '16px', flexWrap: 'wrap' }}
                 >
                   <Button
                     colors={{ 
@@ -257,7 +257,7 @@ import MdxCardFooter from '../MdxCardFooter'
                   </Button>
                 </div>
                 <div
-                  style={{ display: 'flex', gap: '12px', marginBottom: '16px' }}
+                  style={{ display: 'flex', gap: '12px', marginBottom: '16px', flexWrap: 'wrap' }}
                 >
                   <Button
                     colors={{ 
@@ -291,7 +291,7 @@ import MdxCardFooter from '../MdxCardFooter'
 
                 </div>
                 <div
-                  style={{ display: 'flex', gap: '12px', marginBottom: '16px' }}
+                  style={{ display: 'flex', gap: '12px', marginBottom: '16px', flexWrap: 'wrap' }}
                 >
                   <Button
                     colors={{ 

apps/landing/src/app/(detail)/components/layout.tsx

@@ -14,7 +14,12 @@ export default function Layout({
             <LeftMenu />
           </Box>
         </Box>
-        <Box className="markdown-body" overflow="hidden" px="60px" py="40px">
+        <Box
+          className="markdown-body"
+          overflow="hidden"
+          px={['16px', null, '60px']}
+          py={['24px', null, '40px']}
+        >
           {children}
         </Box>
         <Box display={['none', null, null, null, null, 'initial']}>