LeetCode UI Bug: Misaligned "Accepted" Popup Border — Visual Demo & Fix

I noticed that the blue border is slightly misaligned to the right even though the top, bottom, and rounded corners are perfect.

🐞 The Bug:

• When the "Accepted" popup appears, its blue blinking outline:
  • Is shifted ~1cm to the right(approx i'm saying for visualisation)
  • Has perfect height and rounded corners
  • But doesn't feel centered

🎥 I built a visual demo that compares:

➡ Check it out here:

🔗 GitHub Repo with Demo

⚙️ Technical Insight:

This bug is simulated using:

css
.popup.buggy.show::after {
  transform: translateX(10px); /* 👈 causes the shift */
}