ToolsPanel: The ToolsPanel menu gets in the way of seeing what selected options look like

[apeatling]

Prior: #41376

Description

When using the ToolsPanel to select different design tool options, the ToolsPanel menu obscures the content behind. This means you can't select a design tool and get an idea of what it actually does without closing the menu first.

[apeatling]

Using Figma as a reference, their equivalent menus are position initially to the side. We already have prior art there in the form of the color selection controls.

Figma also allows you to drag around the menu and position it wherever you'd like. I think this is interesting, but an obvious first iteration would be to move it to the side.

My one concern there is the disconnect from the button you've clicked. It feels less like a menu, perhaps the reason Figma treats it more like a draggable popup box with a close button. We should discuss if this is an issue for Gutenberg.

[fotisps]

In our case, most of the fix menus are on the sidebar so using figma as a paradigm, I think it's not the best solution. I would just add a close text and icon as a button in order to close the window, in case the user needs to see all the options that are available after making his/her choice.

[jameskoster]

As an interim, perhaps we could reduce the menu width, and open it from the bottom-left of the ellipsis?

Before	After

I appreciate it won't always be possible to do this, but I believe we could make these changes with relative ease, and that they would improve the quality of life while we work on a more holistic solution.

[mtias]

Can we just self close it? We have many menus that perform actions and self close.

[apeatling]

Finding out more via #41546 (comment)