[Bug]: Storybook's UI layout break sometimes when opening dev tools

[yannbf]

Describe the bug

Sometimes when resizing the browser and reaching the mobile viewport size (such as when opening browser dev tools), then going back to desktop viewport size, Storybook gets into a weird state where the mobile viewport elements are still shown, then the UI becomes quite broken:

Here's a gif showing this in action:

It's not always easy to reproduce, but sometimes it will happen quite often. I have found it useful to toggle the sidebar via option + S and then resize the browser.

[dosubot]

This is a regression in Storybook 9+ where resizing between mobile and desktop viewports can leave mobile UI elements (like the sidebar drawer) visible or break the UI, especially if you toggle the sidebar or have dialogs/popovers open during the transition. The root cause is that Storybook manages mobile and desktop UI state separately, and doesn't always reset or synchronize them when crossing the 600px breakpoint. This can leave the UI in a broken state until you refresh the page. More details and related discussion are in this issue.

There’s no documented fix yet. As a temporary workaround, try closing any open modals, popovers, or drawers before resizing, and avoid toggling the sidebar while resizing. If you can, please share your Storybook version and a minimal reproduction—this will help maintainers prioritize a fix.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}