Make it possible to adjust the width of the List View and/or Block Settings Sidebar

[mrfoxtalbot]

What problem does this address?

The default width of the sidebar (and list view) might not suit all user preferences and/or screen sizes, especially in the case of big and complex block patterns.

What is your proposed solution?

We could allow the sidebar and list view to be resized. There is a plugin that does this already for the sidebar and some users find it very valuable.

[hanneslsm]

Not sure about the right sidebar (in which situation would you need the change the width?) but for the list view it would be extremely valuable.
I think @jasmussen and @andrewserong have worked on adding the horizontal scrollbar on the list view. Maybe there was a reason why the scrollbar was implemented instead of a variable width?

Screen.Recording.2023-07-28.at.09.52.08.mov

[mrfoxtalbot]

I see what you mean, this would be a lot more useful of the list view. A horizontal scroll bar is helpful but for complex block groupings, being able to make the list view wider would be even better.

[jasmussen]

I would think it useful to start with the List View and see how that works.

For the inspector sidebar on the right, if we do this it should be at a point where the componentry usage of all block inspectors is matured. Right now it's in a poor state with a lot of older components that don't scale well at all, and the story around the horizontal scrollbar, especially in cases of the off-canvas navigation editing experience which puts a list view in the inspector, is not yet fully polished. In other words, there are some other aspects we need to mature before the contents on the right would actually scale in a useful way.

And even when we get to that point — a polished and considered inspector — we might find the need to resize that inspector is gone. That is, when items and controls wrap with intent, you might not want to resize it at all. To that end, the fact that users might find it useful to resize the inspector at the current point in time, that may reveal issues with the contents itself that if fixed would mitigate the need.

[Ren2049]

Ran into the issue recently where the three list-view dots were out of view on the deepest layer forcing me to use the canvas instead.

I also think that a wider sidebar on the right could be useful to fit more than six color swatches into a row. This may not seem like a big issue but if you're into design systems and color scales and have a scale for each color it can become a problem that slows you down because you have to hover to find out the underlying names if you can't rely on the clarity of having all the steps within a row.

[andrewserong]

Thanks for writing up this issue! I think it's a great idea for the list view (I think Joen might have suggested it in the past, too?), and I'd be keen to try it out. I'm currently mostly helping with reviews and bug fixes for 6.3, but once that's out the door, I'd like to have a go at this feature if no-one beats me to it, then we can try it out in the plugin and see if we can get it in for 6.4.

[andrewserong]

Just moving this one to the 6.5 column as I don't believe it's urgent for 6.4. There is a WIP PR over in #53452 to explore this feature. I'm happy to have another go at that once the dust has settled a bit on 6.4 work.

[annezazu]

No progress made on this front. Punting from 6.5.

[andrewserong]

Thanks for updating Anne! For 6.5 the priorities were to focus on drag and drop (and displacing list view items), right click, and extending keyboard shortcut support. There is an old WIP PR in #53452 for looking into making the width adjustable, but perhaps we'll be able to look at finalising the design for that for 6.6.

[annezazu]

Sounds excellent ✨

[Sirjazzfeetz]

Hoping to see this come to the right-side panel for code content.

[richtabor]

I would think it useful to start with the List View and see how that works.

I agree with this sentiment; let's try with List View first. There is likely to be less destructive resizing the list view items as they're 100% wide. Resizing the Inspector may lead to unexpected results.

[andrewserong]

Thanks to the work from @jameskoster in #60713, I believe this issue is no longer required. The spacing of the list view items has been tightened considerably so that even in very deeply nested lists, there is no horizontal scrollbar:

Let me know if anyone thinks this issue is still a priority, otherwise I will close this out for now.

[jasmussen]

I would avoid resizing the inspector on the right. It could still be interesting for the list view, but it's also non-trivial to build, most likely, and with enough other important things, I'd agree that the priority of this has been reduced.

[jameskoster]

I see this as a low-priority nice-to-have.

It's highly subjective and workflow-dependent, but with the updated List View metrics, I now find myself occasionally wanting to make the panel narrower, especially on smaller screens when the right panel is also open. There's a lot of wasted space here:

[jasmussen]

I now find myself occasionally wanting to make the panel narrower

Likewise. Though it shoudl be said we need to probably apply a min-width that's no thinner than the width of the two tab labels and the close button. Picking one that works for the verbose German locale is probably fine here, but there should be a min-width.

[richtabor]

+1 for reducing priority. It's a nice to have, but I don't think it will have a real impact on usability.

May also be complicated now that the sidebars both animate in/out.

[andrewserong]

Okay, great. Thanks for confirming folks! Since it's a nice-to-have, I'll leave the issue open, but I'll remove it from the 6.6 board.