Popover border overlaps arrow when placement is top in some resolutions

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

This is similar to https://github.com/twbs/bootstrap/issues/38200, but I opened a new ticket since it's somewhat more urgent. I noticed that the popover border overlaps the arrow on my wide monitors at work and at home, though it works correctly on my macbook built-in display. My home monitor is set to 1920x1080. Scaling to 960x540 causes the issue to resolve.

I have a different laptop running ArchLinux with Wayland compositor. I attached this machine to the same monitor, and the issue did not appear in my chromium browser. Just mentioning as it seems like it's not necessarily just the resolution or monitor. Though the issue appears in the more normal configuration using the macbook. Unfortunately I don't have other devices around for testing.

Attached screenshot of the defect:

Reduced test cases

Visit https://getbootstrap.com/docs/5.3/components/popovers/#four-directions and click the Popover on Top button on a display set to resolution 1920 x 1080, connected to a macbook pro.

What operating system(s) are you seeing the problem on?

macOS

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

v5.3.2

Start with the reduced test case at the Popovers four-directions documentation page and compare the Popover on Top at 1920x1080 versus 960x540 in Chrome on macOS. Read the related issue #38200, then trace the popover and arrow styling. Done means the border no longer overlaps the arrow in the reported configuration without breaking the other placements.