search

linearlabs-workspace / storybook-addon-mock

This addon allows you to mock fetch or XMLHttpRequest in the storybook.
https://storybook-addon-mock.netlify.app
MIT License
112 stars 42 forks source link

panel content not scrollable #199

Open sr258 opened 10 months ago

sr258 commented 10 months ago

The "Mock Request" panel in Storybook is not scrollable. While there is more content inside, there is no way to scroll vertically. There is a overflow: hidden CSS property on two divs that prevents scrolling.

I use storybook-addon-mock v4.3.0 and Storybook 7.5.3.

pkyeck commented 4 months ago

came here to report the same bug ...

Screenshot 2024-05-14 at 17 42 54

really annoying, if you have a couple of mocks :(

I did take a quick look at the source and found this in Panel.js:

return (
        <AddonPanel {...props}>
            <ScrollArea>
                {mockData.map((item, index) => {
                    // ... snip
                })}
            </ScrollArea>
        </AddonPanel>
    );

ScrollArea sounds correct but it either never worked or is not supposed to work like this!? 🤔

I just removed the two nested <div>s that get added via DevTools and this seems to do the trick... maybe I'll do a PR with this super small change if nobody says that the <ScrollArea> is needed for anything else ...

pkyeck commented 4 months ago

Ok, made the changes and tested them locally 👍

But because we are also still using the 4.3.0 version, I can't just create a PR to main 😕
Here are the changes, these would need to go into a v4 branch and be published as 4.3.1

https://github.com/linearlabs-workspace/storybook-addon-mock/compare/4.3.0...pkyeck:fix-panel-not-scrollable?expand=1

pkyeck commented 4 months ago

would be great to also get this PR cherry-picked into the v4 branch: https://github.com/linearlabs-workspace/storybook-addon-mock/pull/212