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

[arty0928]

Resolves #475

Problem: Code block layout overflow on mobile devices in N/M Base documentation

The code examples in the N/M Base documentation page were displayed using a fixed 2-column grid layout (gridTemplateColumns: '1fr 1fr'), causing horizontal overflow and breaking the layout on mobile devices.

Root Cause

The N/M Base documentation page used a fixed 2-column grid layout that caused horizontal overflow on mobile devices.

// apps/landing/src/app/(detail)/docs/core-concepts/nm-base/page.mdx
<div
  style={{
    display: 'grid',
    gridTemplateColumns: '1fr 1fr',  // Fixed 2 columns
    gap: '2rem',
    marginBottom: '2rem',
    alignItems: 'start',
  }}
>

Solution: Implemented dedicated ExampleGrid component for MDX

Background:

While DevupUI's Grid component supports responsive arrays, it cannot be used directly in MDX files because the MDX parser (acorn) cannot parse array syntax within JSX:

<!--  MDX parsing error -->
<Grid gridTemplateColumns={['repeat(1, 1fr)', 'repeat(2, 1fr)']}>
  <div>A</div>
  <div>B</div>
</Grid>

Solution:

Created a separate .tsx component to be processed by DevupUI's compiler at build time:

// ExampleGrid.tsx - compiled at build time
export function ExampleGrid({ children }: { children: ReactNode }) {
  return (
    <Grid 
      gap="16px" 
      gridTemplateColumns={['repeat(1, 1fr)', 'repeat(2, 1fr)']}
    >
      {children}
    </Grid>
  )
}

Design decisions:

• Reuses DevupUI's Grid component for consistency with existing codebase
• Uses responsive array pattern following DevupUI standards
• children: ReactNode type for flexible number of child elements
• Server component optimized at build time

Result

Before	After
20251031-0540-55.3463390.mp4 ❌ Fixed 2-column grid causes horizontal overflow and content cut off ❌ Users must scroll horizontally to view code examples	✅ Responsive grid: 1 column on mobile, 2 columns on desktop ✅ All content visible and properly laid out within viewport

[changeset-bot]

⚠️ No Changeset found

Latest commit: 0c80bac

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
see 5 files with indirect coverage changes

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.