Popover arrow can be incorrectly positioned if the popover shifts in the x-axis

We recently implemented support to display an arrow in the Popover, that points to the anchor element.

The implementation was very simplistic/naive: assuming the popover will align to the right or left of the anchor element, we set the arrow in the same side with a small gap.



However, if the space available in the viewport between the anchor and the side to which the Popover is expanding is too narrow to contain the Popover, we shift it in the x-axis to ensure there's no horizontal scroll. This can cause the arrow to no longer point to the anchor element due to its "static" position.


We could do a couple things:

1. More dynamically calculate the position of the arrow, so that it always points to the "center" of the anchor.
2. Reduce the max size of the popover so that it never shifts (this could be conditional if we want). We already cap the size of the popover to the size of the viewport, so we could reduce it even more.

2 might introduce some regression, or produce not obvious differences in behaviors, so it probably makes more sense to go with 1.