In Storybook 8, remove the "min-width" of bottom-docked Addon panel

[MichaelAllenWarner]

Is your feature request related to a problem? Please describe.

Before Storybook 8, it was possible to drag the divider between the left sidebar and the main Preview area in order to make the Preview area as wide or as narrow as you wished. This is very handy for responsive testing.

In Storybook 8, this is still possible, but with the following limitation: if the Addon panel is docked at the bottom, then you can't get the Preview area below 370px in width. I'm not sure how this limitation is actually enforced in the code, but in effect the bottom-docked Addon panel has a 370px "min-width". To work around this, I have to either hide or side-dock the Addon panel.

Describe the solution you'd like

I'd like to be able to drag the divider between the left sidebar and the main Preview area to make the main Preview area as narrow as I like, even when the Addon panel is bottom-docked.

Describe alternatives you've considered

No response

Are you able to assist to bring the feature to reality?

no

Additional context

No response

[valentinpalkovic]

Hi @MichaelAllenWarner

Thank you for reporting this! @cdedreuille Do you have any thoughts on this?

[cdedreuille]

Thanks @MichaelAllenWarner and @valentinpalkovic. In Storybook 8 we change a lot of the core layout to work better for mobile. We added a new way to drag the sidebar and to fix a lot of the sidebar layout I believe we added a constrain to make sure it doesn't go below a certain size.

What I'm curious to understand is why are you not just hiding the sidebar? There's a shortcut for that. This will help you extend the preview to each side of your browser.

[MichaelAllenWarner]

Hi @cdedreuille,

Well, hiding the sidebar doesn't do the trick, because then there's no divider to drag at all, and all the desktop browsers on my Mac (Edge, Chrome, Safari, and Firefox) themselves place limits on how narrow a window can be! (Aside: one can get around that by docking the dev-tools to the side of the browser window, and dragging the divider between the dev-tools and the browser window.)

But to your point: yes, I can always just hide the Addon panel or change it from bottom-docked to side-docked -- it's not difficult (keyboard shortcuts, as you say), and once I do that I can make the main Preview area as narrow as I like by dragging the divider between the Preview area and the sidebar. However:

1. I prefer having the Addon panel bottom-docked, and so it's inconvenient to have to do this whenever I want to do responsive-testing for the smallest viewports we care about (which is usually 320px). A minor inconvenience to be sure, but inconvenient nonetheless.
2. More important: Often I'm handing off Storybook instances to non-developers who have no prior experience with Storybook, and I have to instruct them how to view things at various viewport-widths. My go-to explanation has always been "drag the dividing line between the sidebar and the main area," which is pretty simple. That's still mostly fine, but now there's a little hiccup in that they won't be able to get the viewport-width down quite as far as they may need to, and I don't want to make the instructions any more complicated for them ("if you want to make the main area even smaller, close the Addon panel -- then if you want to reopen it, use this here keyboard shortcut, or click on the gear icon...").

So, I figured I'd file this feature request to simply nix the "min-width" on the bottom-docked Addon panel!

[cdedreuille]

Thanks for explaining your use case. The experience I would recommend would be to use the viewport addon and create stories in specific sizes so you don't have to instruct your team on how to play with it.

That said, the viewport addon can be widely improved. This has been a request of mine for quite a while now but to solve it properly we need to break the addon and to fit inside the manager directly which is not a simple task.

To be transparent, I don't think the min-width on the left sidebar will change soon. We put that in place to make sure the content of the sidebar has enough space to be.

[MichaelAllenWarner]

Just to be clear: I'm talking about the "min-width" of the whole (main area + bottom-docked Addon panel) column, not the lef sidebar. I should have simply posted a video earlier, but here:

Screen.Recording.2024-03-12.at.1.29.39.PM.mov

[cdedreuille]

Oh understood. You're right I misunderstood your request, I though you were talking about the left sidebar. I can see how this limitation could be annoying and I agree that we could remove this limitation. @JReinhold Do you see any potential problems to remove the min-width on the right side?

[MichaelAllenWarner]

@cdedreuille Thanks for the reply; this would still be a welcome change. By the way: if I'm not mistaken, the "min-width" isn't always the same (i.e., it isn't always the 370px I originally mentioned). It may vary depending on what's showing in the Addon panel at the moment. Not sure.

[JReinhold]

Maybe just have a min-width of 10px, just to ensure the main area doesn't completely disappear by mistake?