Popover position should be calculated based on is-from-[origin]

[jasmussen]

Popover menus are currently always centered according to the width of the opener element.

At the same time, for animation purposes, a 'is-from-' + origin can be applied. For most menus in block toolbar, that happens to be is-from-left.

Currently it looks right in most cases:

But this is smoke and mirrors! The following CSS rule compensates for it:

Those 25px happens to be the icon size of 24 plus the borderwidth of 1. Without this compensation margin, you can see what's up:

The problem with this hack is that it falls apart for anything that isn't a 24px icon button:

This is further exacerbated for buttons that are wider than a "Replace" button:

In other words, the popover centering math could use a little enhancement:

1. If the popover opens is-from-center, the current behavior is correct. See document outline:

2. If the popover opens from is-from-left, the popover needs to calculate its position based on the top left button of the opener. So, instead of this:

It should be this:

[jasmussen]

CC: @ellatrix — do you have any insights on how hard this might be to address? There's some related code in https://github.com/WordPress/gutenberg/blob/master/packages/components/src/animate/index.js#L40 that the popover positioning should probably be aware of.

[tellthemachines]

Related: #21275 where there has been a bit of back and forth about this already.

[jasmussen]

Oh wow, thank you.

Closing this one in favor of #21275.