moved words input outside words wrapper to avoid weird graphical glitches

2 files changed, 41 insertions, 16 deletions

diff --git a/frontend/src/ts/test/test-ui.ts b/frontend/src/ts/test/test-ui.ts
index 6b09de75c..71e47d19f 100644
--- a/frontend/src/ts/test/test-ui.ts
+++ b/frontend/src/ts/test/test-ui.ts
@@ -221,8 +221,21 @@ export function updateWordsInputPosition(initial = false): void {
     return;
   }
 
+  const computed = window.getComputedStyle(activeWord);
+  const activeWordMargin =
+    parseInt(computed.marginTop) + parseInt(computed.marginBottom);
+
+  const wordsWrapperTop =
+    (document.querySelector("#wordsWrapper") as HTMLElement | null)
+      ?.offsetTop || 0;
+
   if (Config.tapeMode !== "off") {
-    el.style.top = activeWord.offsetTop + "px";
+    el.style.top =
+      wordsWrapperTop +
+      activeWord.offsetHeight +
+      activeWordMargin * 0.25 +
+      -el.offsetHeight +
+      "px";
     el.style.left = activeWord.offsetLeft + "px";
     return;
   }
@@ -232,10 +245,22 @@ export function updateWordsInputPosition(initial = false): void {
     !posUpdateLangList.some((l) => Config.language.startsWith(l))
   ) {
     el.style.left = "0px";
-    el.style.top = activeWord.offsetHeight * 2 + "px";
+    el.style.top =
+      wordsWrapperTop +
+      activeWord.offsetHeight * 2 +
+      activeWordMargin * 1.5 +
+      -el.offsetHeight +
+      "px";
   } else {
-    el.style.top = activeWord.offsetTop + "px";
     el.style.left = activeWord.offsetLeft + "px";
+    el.style.top =
+      activeWord.offsetTop -
+      activeWordMargin +
+      wordsWrapperTop +
+      activeWord.offsetHeight +
+      activeWordMargin +
+      -el.offsetHeight +
+      "px";
   }
 }
 
diff --git a/frontend/static/html/pages/test.html b/frontend/static/html/pages/test.html
index 349b0807f..17bfe952b 100644
--- a/frontend/static/html/pages/test.html
+++ b/frontend/static/html/pages/test.html
@@ -113,20 +113,20 @@
       <i class="fas fa-mouse-pointer"></i>
       Click here or start typing to focus
     </div>
+    <input
+      id="wordsInput"
+      class=""
+      tabindex="0"
+      type="text"
+      autocomplete="off"
+      autocapitalize="off"
+      autocorrect="off"
+      data-gramm="false"
+      data-gramm_editor="false"
+      data-enable-grammarly="false"
+      list="autocompleteOff"
+    />
     <div id="wordsWrapper" translate="no">
-      <input
-        id="wordsInput"
-        class=""
-        tabindex="0"
-        type="text"
-        autocomplete="off"
-        autocapitalize="off"
-        autocorrect="off"
-        data-gramm="false"
-        data-gramm_editor="false"
-        data-enable-grammarly="false"
-        list="autocompleteOff"
-      />
       <div id="paceCaret" class="default hidden"></div>
       <div id="caret" class="default"></div>
       <div id="words"></div>