From 238a2c72e4aad9ff4c50a2e4941b7543b79b3ec4 Mon Sep 17 00:00:00 2001
From: Nad Alaba <37968805+NadAlaba@users.noreply.github.com>
Date: Wed, 4 Jun 2025 14:16:19 +0300
Subject: [PATCH] fix(wordsInput): prevent #wordsInput from overflowing the
 #wordsWrapper (@NadAlaba) (#6610)

### Description

in tape mode, if a long word is wider than the #wordsWrapper, then
#wordsInput may overflow to the right causing a horizontal scroll to
keep it in view. This limits its width so that it ends with the
#wordsWrapper.


https://github.com/user-attachments/assets/a9266407-a21c-43c0-9304-e683c6c2ce04
---
 frontend/src/ts/test/test-ui.ts | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/frontend/src/ts/test/test-ui.ts b/frontend/src/ts/test/test-ui.ts
index 719b22890..be35a26b4 100644
--- a/frontend/src/ts/test/test-ui.ts
+++ b/frontend/src/ts/test/test-ui.ts
@@ -461,6 +461,15 @@ export async function updateWordsInputPosition(initial = false): Promise<void> {
   const targetTop =
     activeWord.offsetTop + letterHeight / 2 - el.offsetHeight / 2 + 1; //+1 for half of border
 
+  if (Config.tapeMode !== "off") {
+    const wordsWrapperWidth = (
+      document.querySelector("#wordsWrapper") as HTMLElement
+    ).offsetWidth;
+    el.style.maxWidth =
+      wordsWrapperWidth * (1 - Config.tapeMargin / 100) + "px";
+  } else {
+    el.style.maxWidth = "";
+  }
   if (activeWord.offsetWidth < letterHeight) {
     el.style.width = letterHeight + "px";
   } else {