Popover - ::before and ::after carets are misaligned when using --right-bottom

[iancanderson]

When using .Popover-message--right-bottom, the background caret (gray) is not aligned correctly with the foreground (white) caret. See screenshot:

I think this is because the ::before and ::after pseudo elements have different values for their bottom property, specifically when using --right-bottom orientation: https://github.com/primer/primer/blob/e9b76069771492c5e94656f917ba023b8321694a/modules/primer-popover/lib/popover.scss#L158-L173

Is there a historical reason for the difference in these problems, or should they just be set to the same value?

For example, for the top-oriented carets, their top value is the same:
https://github.com/primer/primer/blob/e9b76069771492c5e94656f917ba023b8321694a/modules/primer-popover/lib/popover.scss#L149-L156

[iancanderson]

I actually just found that for --right-bottom, I needed to set ::before bottom to 1 pixel less than ::after bottom in order to get them to line up correctly

With equal bottom values

With ::before up 1 pixel higher than ::after

[shawnbot]

Thanks for this, @iancanderson! Your solution with ::before 1px higher is the right one: we want the drop shadow to start above the white caret. This particular bit of CSS is under review in github/design-systems#406, but I think it'd be good to fix the popover in the meantime.