fix: resolve horizontal overflow on table of components page on mobile & web view #2630

[Mohit5Upadhyay]

Initial checklist

• I read the support docs
• I read the contributing guide
• I agree to follow the code of conduct
• I searched issues and discussions and couldn’t find anything or linked relevant results below
• I made sure the docs are up to date
• I included tests (or that’s not needed)

Description of changes

This PR fixes Issue: #2630 , a mobile responsiveness issue on the /table-of-components page of the MDX site. Previously, on small screens, the table caused horizontal page overflow, resulting in a poor user experience and causing Horizontal scrolling.

Update

overflow-component-table.mp4

Closes #2630

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 100.00%. Comparing base (def2cba) to head (56bb886).

Additional details and impacted files

@@            Coverage Diff            @@
##              main     #2631   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           21        21           
  Lines         2650      2650           
  Branches         2         2           
=========================================
  Hits          2650      2650           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

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

[wooorm]

I am not entirely sure this is a problem that needs fixing? 🤔

[Mohit5Upadhyay]

Thanks @wooorm! 🙏

I am not entirely sure this is a problem that needs fixing? 🤔

The issue primarily affects mobile users. On smaller screens, the table on the /table-of-components page overflows the viewport, resulting in full-page horizontal scrolling. This can negatively impact readability and overall user experience, especially on touch devices.

By wrapping the table in a scrollable container, the fix ensures:

• Horizontal scroll is limited to the table itself, not the whole page.
• The layout remains visually consistent across screen sizes.

Let me know your thoughts —

[remcohaszing]

I like the change visually, but I think there should be a fix which doesn’t involve a media query. Just scroll the table whenever it overflows. Or use a grid instead of a table. Then the rows can be aligned vertically on a narrow viewport.

[wooorm]

This can negatively impact readability and overall user experience, especially on touch devices.

Why? Things are readable and scrollable in both cases. There’s more scrolling if you try and fit it inside the parent.