fix: horizontal scrolling overflow

[casvil]

Issue: A component (In my use case a table with fixed th, td widths) does not overflow when the content of the storybook does not fit de viewport.

What I did

I added the property overflow: auto to the inner div of the centered add-on.

How to test

This should be tested by setting a viewport width smaller than the width of the component being rendered.

If your answer is yes to any of these, please make sure to include it in your PR.

[casvil]

this is a feature request :)

[casvil]

@shilman @kazupon how to proceed from here? Is anything that can be done from my end?

[shilman]

Hi @casvil thanks for your contribution!!

Two requests:

• attach a picture of before & after to the PR to make it easier to review, or better yet, add a story that demonstrates this behavior to the official-storybook
• update the storyshots snapshots by running yarn test --core --update and committing the results?

Much appreciated 🙏

[casvil]

The content fits de viewport:

The content does not fit the viewport and a scrolling bar appears under the table:

The content does not fit the viewport and a scrolling bar appears under the storybook viewport:

[casvil]

@shilman failed tests after running yarn test --core --update. Can't update snapshots. What can I do?
Thanks!

[shilman]

Ah @casvil sorry for the slow reply. Try running yarn bootstrap --core first.

[vercel]

This pull request is automatically deployed with Now.
To access deployments, click Details below or on the icon next to each push.

Latest deployment for this branch: https://monorepo-git-fork-casvil-fix-horizontal-ov.storybook.now.sh