The latest articles on DEV Community by Reshmi Ashok Kumar (@reshmi_a_k). https://dev.to/reshmi_a_k https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3242627%2Fa37ca215-315d-4bf8-82f4-32b2ab74be90.png https://dev.to/reshmi_a_k en Reshmi Ashok Kumar Tue, 10 Jun 2025 05:03:19 +0000 https://dev.to/reshmi_a_k/leetcode-ui-bug-misaligned-accepted-popup-border-visual-demo-fix-52bi https://dev.to/reshmi_a_k/leetcode-ui-bug-misaligned-accepted-popup-border-visual-demo-fix-52bi <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fo5cb7nenrrdf2b6dog5v.gif" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fo5cb7nenrrdf2b6dog5v.gif" alt="Image description" width="400" height="291"></a></p> <p>I noticed that the blue border is slightly misaligned to the right even though the top, bottom, and rounded corners are perfect.</p> <h3> 🐞 The Bug: </h3> <ul> <li>When the "Accepted" popup appears, its blue blinking outline: <ul> <li>Is shifted ~1cm to the right(approx i'm saying for visualisation)</li> <li>Has perfect height and rounded corners</li> <li>But doesn't feel centered</li> </ul> </li> </ul> <h3> 🎥 I built a visual demo that compares: </h3> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>❌ Buggy (LeetCode’s)</th> <th>✅ Fixed (Corrected)</th> </tr> </thead> <tbody> <tr> <td>Shifted blue outline</td> <td>Centered properly</td> </tr> </tbody> </table></div> <p>➡ Check it out here:<br><br> 🔗 <a href="https://github.com/ReshmiAK/leetcode_bug_ui" rel="noopener noreferrer">GitHub Repo with Demo</a></p> <h3> ⚙️ Technical Insight: </h3> <p>This bug is simulated using:</p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code> css .popup.buggy.show::after { transform: translateX(10px); /* 👈 causes the shift */ } </code></pre> </div> leetcode ui webdev html