2 files changed, 27 insertions, 5 deletions
diff --git a/frontend/src/styles/test.scss b/frontend/src/styles/test.scss
index f40c28dfd..e86a9d43b 100644
--- a/frontend/src/styles/test.scss
+++ b/frontend/src/styles/test.scss
@@ -400,14 +400,10 @@
   outline: none;
   display: block;
   resize: none;
-  position: fixed;
+  position: absolute;
   z-index: -1;
   cursor: default;
   pointer-events: none;
-  margin-left: 1rem;
-  // left: 50%;
-  // top: 50%;
-  // transform: translate(-50%, -50%);
 }
 
 #capsWarning {
diff --git a/frontend/src/ts/test/test-ui.ts b/frontend/src/ts/test/test-ui.ts
index eeee40847..a4a4e0499 100644
--- a/frontend/src/ts/test/test-ui.ts
+++ b/frontend/src/ts/test/test-ui.ts
@@ -131,6 +131,7 @@ export function updateActiveElement(backspace?: boolean): void {
       });
     }
   } catch (e) {}
+  updateWordsInputPosition();
 }
 
 function getWordHTML(word: string): string {
@@ -188,6 +189,30 @@ export function showWords(): void {
   $("#words").html(wordsHTML);
 
   updateWordsHeight();
+  updateWordsInputPosition(true);
+}
+
+const posUpdateLangList = ["japanese", "chinese", "korean"];
+export function updateWordsInputPosition(force = false): void {
+  const shouldUpdate = posUpdateLangList.some((l) =>
+    Config.language.startsWith(l)
+  );
+
+  if (!force && !shouldUpdate) return;
+
+  const el = document.querySelector("#wordsInput") as HTMLElement;
+  const activeWord = document.querySelector(
+    "#words .active"
+  ) as HTMLElement | null;
+
+  if (!shouldUpdate || !activeWord) {
+    el.style.top = "0px";
+    el.style.left = "0px";
+    return;
+  }
+
+  el.style.top = activeWord.offsetTop + "px";
+  el.style.left = activeWord.offsetLeft + "px";
 }
 
 export function updateWordsHeight(): void {
@@ -711,6 +736,7 @@ export function lineJump(currentTop: number): void {
     }
   }
   currentTestLine++;
+  updateWordsInputPosition();
 }
 
 export function arrangeCharactersRightToLeft(): void {