Merge pull request #476 from arty0928/feature/code-overflow

Fix: Code block overflow on mobile in N/M Base docs using responsive grid

Author: owjs3901

apps/landing/src/app/(detail)/docs/core-concepts/nm-base/page.mdx

@@ -1,3 +1,5 @@
+import { ExampleGrid } from '@/components/mdx/components/ExampleGrid'
+
 export const metadata = {
   title: 'N/M Base',
   alternates: {
@@ -48,15 +50,7 @@ Class name generation follows these steps:
 
 ### **Basic Class Names**
 
-<div
-  style={{
-    display: 'grid',
-    gridTemplateColumns: '1fr 1fr',
-    gap: '2rem',
-    marginBottom: '2rem',
-    alignItems: 'start',
-  }}
->
+<ExampleGrid>
   <div>
     ```tsx // Input
     <div>
@@ -75,19 +69,11 @@ Class name generation follows these steps:
     </div>
     ```
   </div>
-</div>
+</ExampleGrid>
 
 ### **Responsive Class Names**
 
-<div
-  style={{
-    display: 'grid',
-    gridTemplateColumns: '1fr 1fr',
-    gap: '2rem',
-    marginBottom: '2rem',
-    alignItems: 'start',
-  }}
->
+<ExampleGrid>
   <div>
     ```tsx // Input
     <Box w={[100, 200, 300]} />
@@ -99,19 +85,11 @@ Class name generation follows these steps:
     {/* w: 100px, w: 200px, w: 300px */}
     ```
   </div>
-</div>
+</ExampleGrid>
 
 ### **Pseudo-selector Class Names**
 
-<div
-  style={{
-    display: 'grid',
-    gridTemplateColumns: '1fr 1fr',
-    gap: '2rem',
-    marginBottom: '2rem',
-    alignItems: 'start',
-  }}
->
+<ExampleGrid>
   <div>
     ```tsx
     <Box _hover={{ bg: 'red' }} />
@@ -123,19 +101,11 @@ Class name generation follows these steps:
     {/* .g:hover { background: red; } */}
     ```
   </div>
-</div>
+</ExampleGrid>
 
 ### **File-specific Class Names**
 
-<div
-  style={{
-    display: 'grid',
-    gridTemplateColumns: '1fr 1fr',
-    gap: '2rem',
-    marginBottom: '2rem',
-    alignItems: 'start',
-  }}
->
+<ExampleGrid>
   <div>
     ```tsx
     <div>
@@ -152,7 +122,7 @@ Class name generation follows these steps:
     </div>
     ```
   </div>
-</div>
+</ExampleGrid>
 
 ## Ad-blocker Compatibility
 

apps/landing/src/components/mdx/components/ExampleGrid.tsx

@@ -0,0 +1,14 @@
+import { Grid } from '@devup-ui/react'
+import { ReactNode } from 'react'
+
+interface ExampleGridProps {
+  children: ReactNode
+}
+
+export function ExampleGrid({ children }: ExampleGridProps) {
+  return (
+    <Grid gap="16px" gridTemplateColumns={['repeat(1, 1fr)', 'repeat(2, 1fr)']}>
+      {children}
+    </Grid>
+  )
+}