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

Author: nadalaba

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 {