fix(wordsInput): clamp #wordsInput from the left to #wordsWrapper (@nadalaba) (monkeytypegame#6637)

### Description

In RTL tape mode (which will be a reality after monkeytypegame#5748), if a long word
is wider than the #wordsWrapper, then #wordsInput may overflow to the
left causing a horizontal scroll to keep it in view. This PR prevents
its left edge from overflowing the #wordsWrapper.

Co-authored-by: Jack <[email protected]>

Author: nadalaba

frontend/src/ts/test/test-ui.ts

@@ -456,11 +456,7 @@ export async function updateWordsInputPosition(initial = false): Promise<void> {
     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";
+    el.style.maxWidth = `${100 - Config.tapeMargin}%`;
   } else {
     el.style.maxWidth = "";
   }
@@ -483,7 +479,7 @@ export async function updateWordsInputPosition(initial = false): Promise<void> {
   if (activeWord.offsetWidth < letterHeight && isLanguageRTL) {
     el.style.left = activeWord.offsetLeft - letterHeight + "px";
   } else {
-    el.style.left = activeWord.offsetLeft + "px";
+    el.style.left = Math.max(0, activeWord.offsetLeft) + "px";
   }
 }