fix(ui): wrap markdown tables in responsive container for mobile

[vanshika2720]

[UI/UX] Audit and Fix Mobile Responsiveness for Markdown Tables

Description

Currently, large Markdown tables in the documentation can exceed the viewport width on mobile devices, breaking the page layout or making the content difficult to read.

This PR fixes the issue by customizing the Docusaurus MDXComponents to automatically wrap all Markdown documentation tables in a responsive container <div> styled with overflow-x: auto. This allows users to smoothly scroll wide tables horizontally on smaller screens while preserving the overall page width and layout integrity.

Changes

• src/theme/MDXComponents/index.js: Swizzled the base MDX components map and added a custom table component wrapper with overflowX: "auto".

Verification

• Verified that Markdown tables render correctly and can be scrolled horizontally when the table width exceeds the container width on mobile viewports.
• Confirmed that no unrelated changes or files were introduced and Prettier formatting adheres strictly to project standards.

Before

Before.mov

After

After.mov

[netlify]

✅ Deploy Preview for kmesh-net ready!

Name	Link
🔨 Latest commit	159c2cc
🔍 Latest deploy log	https://app.netlify.com/projects/kmesh-net/deploys/6a098b9c7d4fc400088bb9c1
😎 Deploy Preview	https://deploy-preview-307--kmesh-net.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[gemini-code-assist]

Code Review

This pull request introduces a custom MDX components configuration, specifically adding a scrollable wrapper for tables. The reviewer suggests adopting the theme wrapper pattern by spreading '@theme-original/MDXComponents' to improve maintainability and reduce boilerplate, while also recommending the addition of 'tabIndex={0}' to the table container for better keyboard accessibility.

[Copilot]

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

[Copilot]

Copilot wasn't able to review any files in this pull request.

[Copilot]

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

[yashisrani]

LGTM

[vanshika2720]

/cc @hzxuzhonghu
/cc @yashisrani
/cc @LiZhenCheng9527

[kmesh-bot]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by: yashisrani
Once this PR has been reviewed and has the lgtm label, please assign nlgwcy for approval. For more information see the Kubernetes Code Review Process.

The full list of commands accepted by this bot can be found here.

Details

Needs approval from an approver in each of these files:

• OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[yashisrani]

/lgtm