Block with long toolbar goes behind block settings

[dsas]

Description

When a block has ToolbarButton that are too wide to fit on the viewport, it should scroll horizontally until the 'three dots' block settings menu is displayed at the far right of the Toolbar. If there is an intermediary element, e.g. a div or a ToolbarGroup the 'three dots' block settings menu is displayed over it instead.

Step-by-step reproduction instructions

1. Create a block with an edit property that has several controls inside a ToolbarGroup, such that it's wide.
2. Change the viewport to be narrower than the toolbar created e.g. < 400px wide
3. Go to the new post screen
4. Insert the block

Screenshots, screen recording, code snippet

With ToolbarGroup

The expected behaviour - made by removing ToolbarGroup from the menu
https://user-images.githubusercontent.com/93301/158274170-ba939f80-fe1f-4c07-80e6-004ca787c094.mp4

Here's the example menu I used, just paste it over an existing blocks edit method to be able to reproduce quickly

edit: () => {
	return (
		<>
			<BlockControls>
				<ToolbarGroup>
					<ToolbarButton>
						Button one
					</ToolbarButton>
					<ToolbarButton>
						Button two
					</ToolbarButton>
					<ToolbarButton>
						Button three
					</ToolbarButton>
					<ToolbarButton>
						Button four
					</ToolbarButton>
					<ToolbarButton>
						Button five
					</ToolbarButton>
				</ToolbarGroup>
			</BlockControls>
		</>
	);
},

Environment info

• WP 5.9.2
• Gutenberg trunk - 0907f09 is HEAD

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[talldan]

I tried this in the table block, as that has quite a small toolbar, and it does seem to be a problem:

The RichText formats are overlapping there, but the same kind of issue.

For some reason it doesn't seem to happen for most core blocks, but that may be because many of them are using an existing Group like this:

<BlockControls group="block">

The Navigation block is one that I could find that suffers very slightly from this bug.

[dsas]

Yeah, sorry I should have said. Using <BlockControls group= is how I fixed the actual issue I was having (Automattic/jetpack#22745)

[dsas]

The core block I used for testing was cover if that helps.