From 79b79e0519b348c0d63b5013e181a81643bfab8d Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Fri, 17 Oct 2025 16:54:41 +0200
Subject: [PATCH] fix(caret): incorrect underline positioning

---
 frontend/src/styles/caret.scss | 1 -
 frontend/src/ts/utils/caret.ts | 9 +++++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/frontend/src/styles/caret.scss b/frontend/src/styles/caret.scss
index 3bb2ed914..962cc4c7c 100644
--- a/frontend/src/styles/caret.scss
+++ b/frontend/src/styles/caret.scss
@@ -72,6 +72,5 @@
   &.underline {
     height: 0.1em;
     width: 0.5em;
-    margin-top: 1.2em;
   }
 }
diff --git a/frontend/src/ts/utils/caret.ts b/frontend/src/ts/utils/caret.ts
index b9adba7ad..f06db5ead 100644
--- a/frontend/src/ts/utils/caret.ts
+++ b/frontend/src/ts/utils/caret.ts
@@ -519,10 +519,15 @@ export class Caret {
     top += options.letter.offsetTop;
     top += options.word.offsetTop;
 
-    // center the caret vertically and horizontally
-    if (this.style !== "underline") {
+    if (this.style === "underline") {
+      // if style is underline, add the height of the letter to the top
+      top += options.letter.offsetHeight;
+    } else {
+      // else center vertically in the letter
       top += (options.letter.offsetHeight - this.getHeight()) / 2;
     }
+
+    // also center horizontally
     if (!this.isFullWidth()) {
       left += (this.getWidth() / 2) * -1;
     }