Misaligned popover arrows

[simonihmig]

Seems similar to #23793, although I could not reproduce the issue for tooltips, but indeed for popovers.

Here is a demo: https://codepen.io/simonihmig/pen/WdxXja. The first button triggers a popover, where you can clearly see that the arrow is misaligned.

It has left: 132px applied by popper.js. However the popover itself has a width of 276px, so the center should rather be 137px. And indeed if I set this manually to this value or left: 50% in Chrome Dev Tools, then it is perfectly aligned! So somewhere this 5px offset is causing the misalignment.

[Johann-S]

Marked as css because as you can see here :

Our arrow element is in the right place but due to our CSS it's not correctly centered

[simonihmig]

Right! Popper positions this correctly, just the pseudo elements (responsible for rendering the actual arrow) should be aligned to the center of .arrow, not the left edge! (or .arrow should have a zero width?)

[alecpl]

Possible fix:

[...] .popover.bs-popover-bottom .arrow::before {
    margin-left: calc((.8rem/2 + 1px) * -1);
}