Fix z-index for the toolbar dropdown panels.

[panr]

Suggested merge commit message (convention)

Fix (ui): Dropdown panels from the editor's main toolbar should be always above the contextual balloons from the editor's content. Closes #7874.

[panr]

@oleq @Mgsy @FilipTokarski could you take a look at this?

[panr]

priority is 📈

[Mgsy]

Is the floating toolbar in the scope of this PR? Currently, dropdown panels are displayed under the contextual balloons from the content after scrolling down a bit (the screen below shows the classic editor).

[oleq]

Is the floating toolbar in the scope of this PR? Currently, dropdown panels are displayed under the contextual balloons from the content after scrolling down a bit.

I was about to point it out. Unfortunately this is inevitable because the floating toolbar has position: fixed. As a whole it must have lesser z-index than contextual balloons because they have the priority (floating toolbar vs. contextual toolbar) so, for instance, the table toolbar does not disappear under the floating toolbar. 

But, the drawback of lesser z-index is that no matter what, there's no way to make the panel located in the floating toolbar display over the contextual balloon (like in the screenshot). CSS works on layers and if layer A (floating toolbar) has lesser z-index than layer B (contextual toolbar), then no matter how high the z-index of the panel (living inside layer A) is, it is still limited to the z-index of the entire layer A.

[oleq]

I'm OK with the change and we can merge it when @Mgsy gives it a green light.

[Mgsy]

We've tested it with @FilipTokarski and looks good 👌