From 8629779a7bc9483647b4a16329a0be71593ca207 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Sat, 20 Sep 2025 15:56:40 +0200
Subject: [PATCH] fix: words input positioning in tape mode

---
 frontend/src/ts/test/test-ui.ts | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/frontend/src/ts/test/test-ui.ts b/frontend/src/ts/test/test-ui.ts
index efa1ffa421ee..61c19781969a 100644
--- a/frontend/src/ts/test/test-ui.ts
+++ b/frontend/src/ts/test/test-ui.ts
@@ -525,8 +525,9 @@ export function updateWordsInputPosition(): void {
       : TestState.isLanguageRightToLeft;
 
     const el = document.querySelector<HTMLElement>("#wordsInput");
+    const wrapperElement = document.querySelector<HTMLElement>("#wordsWrapper");
 
-    if (!el) return;
+    if (!el || !wrapperElement) return;
 
     const activeWord = getActiveWordElement();
 
@@ -553,10 +554,16 @@ export function updateWordsInputPosition(): void {
 
     el.style.top = targetTop + "px";
 
-    if (activeWord.offsetWidth < letterHeight && isTestRightToLeft) {
-      el.style.left = activeWord.offsetLeft - letterHeight + "px";
+    if (Config.tapeMode !== "off") {
+      el.style.left = `${
+        wrapperElement.offsetWidth * (Config.tapeMargin / 100)
+      }px`;
     } else {
-      el.style.left = Math.max(0, activeWord.offsetLeft) + "px";
+      if (activeWord.offsetWidth < letterHeight && isTestRightToLeft) {
+        el.style.left = activeWord.offsetLeft - letterHeight + "px";
+      } else {
+        el.style.left = Math.max(0, activeWord.offsetLeft) + "px";
+      }
     }
 
     keepWordsInputInTheCenter();