Fix Table Component Scroll & Light Mode Color Issues

[arty0928]

Resolves #460

Problem 1: Table not horizontally scrollable on mobile devices

The props table in component documentation pages was not horizontally scrollable on mobile devices, causing content to be cut off when the table width exceeded the viewport width.

Root Cause

The Table component wrapper had overflow="hidden", which prevented horizontal scrolling:

// apps/landing/src/components/mdx/components/Table/index.tsx
export const Table = ({ ...props }: ComponentProps<'table'>) => {
  return (
    <Box borderRadius="0.5rem" overflow="hidden">  // Blocked scrolling
      <Box {...props} as="table" borderCollapse="collapse" borderSpacing={0} />
    </Box>
  )
}

Solution

1. Added scroll container to PropsTable with overflow="auto" and set minimum table width
2. Changed Table wrapper overflow from hidden to visible

// apps/landing/src/components/PropsTable.tsx
<Box maxWidth="100%" overflow="auto" width="100%">
  <Table border={0} style={{ minWidth: '600px' }}>

// apps/landing/src/components/mdx/components/Table/index.tsx
<Box borderRadius="0.5rem" overflow="visible">  //  hidden → visible

Files modified:

• apps/landing/src/components/PropsTable.tsx
• apps/landing/src/components/mdx/components/Table/index.tsx

Result

Before	After
❌ Table content cut off	✅ Horizontal scroll enabled

Problem 2: Inline code not visible in light mode

Inline code (backtick-wrapped) was not visible in light mode due to insufficient contrast between background and text colors.

Light Mode (Before)	Dark Mode (Before)
❌ Code barely visible	✅ Works correctly

Root Cause

CustomCodeBlock component used $containerBackground which was #FFF in light mode, providing no contrast with the surrounding content.

Solution

Added dedicated codeBackground color token to avoid affecting other components:

• Light mode: #F5F5F5
• Dark mode: #2E2E2E

// CustomCodeBlock.tsx
<Box bg="$codeBackground">  // Changed from $containerBackground

Files modified:

• apps/landing/devup.json
• packages/components/devup.json
• apps/landing/src/components/mdx/components/CustomCodeBlock.tsx

Result

Light Mode (After)	Dark Mode (After)
✅ Code now visible with proper contrast	✅ Maintains correct appearance

[changeset-bot]

⚠️ No Changeset found

Latest commit: 051eb24

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 7 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.