RocketChat / RocketChat/fuselage
Docs: Args table overflows on mobile and causes horizontal page scroll
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 162
- Forks
- 258
- Avg merge
- 2d 23h
- Merged PRs (30d)
- 24
Description
Description
The Args/Props table inside the Storybook Docs view is not responsive on mobile screens.
Some table cells (e.g. union types, controls column, long generic types) force the table to exceed the viewport width.
Because the table is not wrapped in a scrollable container, the entire Docs page becomes horizontally scrollable, instead of just the table.
This breaks the mobile layout and results in a poor user experience.
Steps to reproduce
- Open Storybook.
- Switch to Docs tab of any component (e.g. AutoComplete → Docs).
- Set the viewport to ~375px (iPhone size).
- Scroll to the Args table.
- Observe that:
- The table content overflows to the right
- The table itself does not scroll
- The whole page scrolls horizontally instead
Image of Bug
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the issue in the Storybook Docs Args/Props table at a 375px viewport, using a component such as AutoComplete and checking long union or generic types. Locate the table rendering and its surrounding layout, then verify that only the table scrolls horizontally while the Docs page remains fixed to the viewport.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, storybook, typescript
- Domain
- documentation, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100