Storybook: Centered addon: Invisible portions of overflowing components are inaccessible

[su-narthur]

When using the Centered addon, portions of a component which overflow the preview window are inaccessible.

Adding overflow: scroll; to the wrapper Centered creates allows for accessing the bottom inaccessible portion, but not the top inaccessible portion due to this issue with flexbox.

Adding margin: auto; to an inner wrapper immediately inside the one Centered now creates seems to fix the issue without affecting the centering of components which completely fit. See this explanation of the fix and this demo.

I blindly edited the addon's src/index.js file and came up with the following, though I'm new to the js development world and so didn't know how to compile it in order to test the fix:

import React from 'react';

const style = {
  position: 'fixed',
  top: 0,
  left: 0,
  bottom: 0,
  right: 0,
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  overflow: 'auto',
};

const innerStyle = {
  margin: 'auto',
}

export default function(storyFn) {
    return <div style={style}><div style={innerStyle}>{storyFn()}</div></div>;
}

Can this fix be added to the addon?

[ndelangen]

Do you see an opportunity to open a PR to fix this @su-narthur ?

[su-narthur]

@ndelangen Absolutely, this would be better as a PR. I hesitated, since I didn't know how to test my fix. Go for it anyway?

[ndelangen]

Go for it, I can help you test if you'd like.

My schedule for tomorrow will only allow me to be available after 17:30 CEST though.

[su-narthur]

@ndelangen Ok, I've created a PR. What's next?

[ndelangen]

Thank you! I'll review and test it! 👍

[ndelangen]

Merged!

[casvil]

_overflow-x does not work._

I am developing a case which I have a table with fixed column widths. When the table does not fit the container or whatever is placed in, it won't overflow and scroll horizontally.

The inner div style innerStyle needs as well to have the property overflow: 'auto' .
I'd like to contribute with a PR

[kevinsar]

@casvil I can confirm that I am still seeing this bug in storybook 5.x.x, did you happen to come up with a fix?

[casvil]

hey @kevinsar , it was merged in https://github.com/storybookjs/storybook/pull/6361 but removed later in https://github.com/storybookjs/storybook/pull/6862. Sad

You can create your own custom decorator with overflow: auto being set