docs(fuselage): prevent horizontal overflow of Docs Args table on mobile

[dev-rohit-gupta]

Proposed changes (including videos or screenshots)

This PR fixes an issue where the Args/Props table inside the Storybook Docs view overflows horizontally on mobile viewports.

On smaller screens, some table cells (for example union types, generic types, and the controls column) force the table to exceed the viewport width. Since the table is not wrapped in a scrollable container, the entire Docs page becomes horizontally scrollable instead of just the table, which breaks the mobile layout.

To fix this, a scoped CSS rule is added so that only the direct wrapper of the Args/Props table becomes horizontally scrollable:

*:has(> .docblock-argstable) {
  width: 100%;
  overflow-x: auto;
  display: block;
}

This rule is applied globally through the Storybook Docs layer (.storybook/preview.js), so it reliably affects all component Docs pages without requiring changes to individual component stories.

Result:

1. The Args/Props table scrolls horizontally within its own container on small screens.
2. The rest of the Docs page no longer overflows horizontally.
3. Desktop behavior is unchanged.

Before (bug):

After (fix):

Issue(s)

closes : #1795

Further comments

On mobile, an even better UX might be to render the Args/Props information as an accordion instead of a wide table, so that each prop can be expanded/collapsed individually. That would require customizing how the Storybook Docs addon renders the Args table, so this PR focuses only on the minimal and safe CSS fix for the current layout.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 0440ae8

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

[CLAassistant]

All committers have signed the CLA.

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[Copilot]

Pull request overview

This PR fixes a mobile responsive layout issue in Storybook documentation pages where the Args/Props table causes horizontal overflow of the entire page. The solution adds a scoped CSS rule that makes only the table's parent container horizontally scrollable, preserving the proper layout on mobile devices.

Key Changes

• Added a new SCSS file with a CSS rule targeting the Args table wrapper using the :has() pseudo-class
• Imported the SCSS file in the Storybook preview configuration to apply globally to all Docs pages

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
packages/fuselage/.storybook/preview.tsx	Added import for the new docs-overrides.scss file to apply global Docs styling
packages/fuselage/.storybook/docs-overrides.scss	New file containing CSS rule to make Args table container scrollable on overflow

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[dev-rohit-gupta]

Hi @tassoevan I have ensured all checks are passing and the branch is up to date. Please let me know if any further changes are required. Thanks!