fix: multi-line words causing issues in ui scrolling and tape mode (@NadAlaba, @Miodec) (#5857)

3 files changed, 21 insertions, 27 deletions

diff --git a/frontend/src/styles/test.scss b/frontend/src/styles/test.scss
index b9b22473f..8a437be05 100644
--- a/frontend/src/styles/test.scss
+++ b/frontend/src/styles/test.scss
@@ -263,6 +263,7 @@
 
   &.tape .word {
     margin: 0.25em 0.6em 0.75em 0;
+    white-space: nowrap;
   }
 
   /* a little hack for right-to-left languages */
@@ -529,7 +530,9 @@
 }
 
 #wordsInput {
-  font-size: 1rem;
+  width: 1ch;
+  font-size: 1em;
+  height: 1em;
   opacity: 0;
   padding: 0;
   margin: 0 auto;
diff --git a/frontend/src/ts/config.ts b/frontend/src/ts/config.ts
index 03c384c1b..ec0ba020e 100644
--- a/frontend/src/ts/config.ts
+++ b/frontend/src/ts/config.ts
@@ -1763,7 +1763,7 @@ export function setFontSize(
 
   config.fontSize = fontSize;
 
-  $("#caret, #paceCaret, #liveStatsMini, #typingTest").css(
+  $("#caret, #paceCaret, #liveStatsMini, #typingTest, #wordsInput").css(
     "fontSize",
     fontSize + "rem"
   );
diff --git a/frontend/src/ts/test/test-ui.ts b/frontend/src/ts/test/test-ui.ts
index 99c4d09f1..18a04d85c 100644
--- a/frontend/src/ts/test/test-ui.ts
+++ b/frontend/src/ts/test/test-ui.ts
@@ -457,41 +457,32 @@ export async function updateWordsInputPosition(initial = false): Promise<void> {
   const activeWordMargin =
     parseInt(computed.marginTop) + parseInt(computed.marginBottom);
 
-  // const wordsWrapperTop =
-  //   (document.querySelector("#wordsWrapper") as HTMLElement | null)
-  //     ?.offsetTop ?? 0;
+  const letterHeight = Numbers.convertRemToPixels(Config.fontSize);
+  const targetTop =
+    activeWord.offsetTop + letterHeight / 2 - el.offsetHeight / 2 + 1; //+1 for half of border
+
+  if (activeWord.offsetWidth < letterHeight) {
+    el.style.width = letterHeight + "px";
+  } else {
+    el.style.width = activeWord.offsetWidth + "px";
+  }
 
   if (Config.tapeMode !== "off") {
-    el.style.top =
-      // wordsWrapperTop +
-      activeWord.offsetHeight +
-      activeWordMargin * 0.25 +
-      -el.offsetHeight +
-      "px";
+    el.style.top = targetTop + "px";
     el.style.left = activeWord.offsetLeft + "px";
     return;
   }
 
-  if (isLanguageRTL) {
-    el.style.left =
-      activeWord.offsetLeft - el.offsetWidth + activeWord.offsetWidth + "px";
+  if (initial) {
+    el.style.top = targetTop + letterHeight + activeWordMargin + 4 + "px";
   } else {
-    el.style.left = activeWord.offsetLeft + "px";
+    el.style.top = targetTop + "px";
   }
 
-  if (
-    initial &&
-    !posUpdateLangList.some((l) => Config.language.startsWith(l))
-  ) {
-    el.style.top =
-      activeWord.offsetTop +
-      activeWord.offsetHeight +
-      -el.offsetHeight +
-      (activeWord.offsetHeight + activeWordMargin) +
-      "px";
+  if (activeWord.offsetWidth < letterHeight && isLanguageRTL) {
+    el.style.left = activeWord.offsetLeft - letterHeight + "px";
   } else {
-    el.style.top =
-      activeWord.offsetTop + activeWord.offsetHeight + -el.offsetHeight + "px";
+    el.style.left = activeWord.offsetLeft + "px";
   }
 }