Fix button page layout

Author: forestream

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

@@ -11,12 +11,12 @@ import { Colors } from './demo/Colors'
 ###### Examples
 
 <div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap' }}>
-    <section style={{ flex: '1' }}>
+    <section style={{ flex: '1', maxWidth: 'calc(50% - 8px)' }}>
       <MdxCard src="button/demo/Variants.tsx" demo={<Variants />} />
       <MdxCard src="button/demo/Danger.tsx" demo={<Danger />} />
       <MdxCard src="button/demo/Disabled.tsx" demo={<Disabled />} />
     </section>
-    <section style={{ flex: '1' }}>
+    <section style={{ flex: '1', maxWidth: 'calc(50% - 8px)' }}>
       <MdxCard src="button/demo/Icon.tsx" demo={<Icon />} />
       <MdxCard src="button/demo/Colors.tsx" demo={<Colors />} />
     </section>

apps/landing/src/app/(detail)/components/button/demo/Variants.tsx

@@ -8,7 +8,7 @@ import { Box, css } from '@devup-ui/react'
 export function Variants() {
   return (
     <>
-      <Box display="flex" gap="12px" marginBottom="16px">
+      <Box display="flex" flexWrap="wrap" gap="12px" marginBottom="16px">
         <Button
           className={css({ height: 'min-content' })}
           size="sm"
@@ -31,7 +31,7 @@ export function Variants() {
           Primary lg
         </Button>
       </Box>
-      <Box display="flex" gap="12px" marginBottom="16px">
+      <Box display="flex" flexWrap="wrap" gap="12px" marginBottom="16px">
         <Button className={css({ height: 'min-content' })} size="sm">
           Default sm
         </Button>

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

@@ -17,6 +17,7 @@ export default function Layout({
         <Box
           className="markdown-body"
           flex={1}
+          overflow="auto"
           px={['16px', '30px', '60px']}
           py={['24px', '40px']}
           w="100%"