Invalid block scrim hides block options on mobile

[johngodley]

Describe the bug
If a block becomes invalid and you are viewing on mobile then the grey scrim hides the block options.

To Reproduce
Steps to reproduce the behavior:

1. View editor using a mobile-sized display (i.e. Chrome dev tools > Device)
2. Make a block invalid (remove the trailing </p> of a paragraph)
3. Scroll down to the bottom of the block
4. Note that the block dropdown menu, and other buttons, are hidden behind the grey scrim

Expected behavior
The dropdown menu button to be available as it is on desktop. I'm not sure about the other buttons

[johngodley]

@jasmussen pinging for thoughts. I'm happy to try and fix this, but I'm not sure what it should do - should the scrim stop before the bottom toolbar?

[jasmussen]

should the scrim stop before the bottom toolbar?

Yes, that seems like a good solution.

Could we simply do something like .. and this is pseudo code:

.scrim {
	...
	bottom: $block-toolbar-height;

	@include break-small() {
		bottom: 0;
	}
}

☝️ this should make the scrim not cover the bottom toolbar, until the break-small breakpoint where if I recall correctly, the block toolbar moves.

[johngodley]

Perfect! Used in a fix in #9473