fix(hints): hide hints in blind mode and update position on some config changes (@NadAlaba) (#5754)

* fix(hints): update hints position on blind mode and hide extra letters (@NadAlaba)

* update hints position on font family preview

* hide hints in blind mode

* allow wide hints to overflow horizontally when tapeMode=off

---------

Co-authored-by: Jack <jack@monkeytype.com>

frontend/src/styles/test.scss

@@ -294,6 +294,9 @@
         color: var(--correct-letter-color);
         animation: var(--correct-letter-animation);
       }
+      & .hints hint {
+        display: none;
+      }
     }
     // &.highlight-word {
     //   .word.typed.error,

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

@@ -151,10 +151,15 @@ ConfigEvent.subscribe((eventKey, eventValue, nosave) => {
     updateWordsHeight(true);
     void updateWordsInputPosition(true);
   }
-  if (eventKey === "fontSize" || eventKey === "fontFamily")
+  if (
+    ["fontSize", "fontFamily", "blindMode", "hideExtraLetters"].includes(
+      eventKey
+    )
+  ) {
     updateHintsPosition().catch((e: unknown) => {
       console.error(e);
     });
+  }
 
   if (eventKey === "theme") void applyBurstHeatmap();
 
@@ -275,7 +280,7 @@ export function updateActiveElement(
   }
 }
 
-async function updateHintsPosition(): Promise<void> {
+export async function updateHintsPosition(): Promise<void> {
   if (
     ActivePage.get() !== "test" ||
     resultVisible ||
@@ -499,12 +504,14 @@ function updateWordsHeight(force = false): void {
     CustomText.getLimitMode() !== "time" &&
     CustomText.getLimitValue() !== 0
   ) {
+    // overflow-x should not be visible in tape mode, but since showAllLines can't
+    // be enabled simultaneously with tape mode we don' need to check it's off
     $("#words")
       .css("height", "auto")
-      .css("overflow", "hidden")
+      .css("overflow", "visible clip")
       .css("width", "100%")
       .css("margin-left", "unset");
-    $("#wordsWrapper").css("height", "auto").css("overflow", "hidden");
+    $("#wordsWrapper").css("height", "auto").css("overflow", "visible clip");
 
     let nh = wordHeight * 3;
 
@@ -555,19 +562,21 @@ function updateWordsHeight(force = false): void {
     $("#words").css("height", "0px");
 
     if (Config.tapeMode !== "off") {
-      $("#words").width("200vw");
+      $("#words").css({ overflow: "hidden", width: "200vw" });
+      $("#wordsWrapper").css({ overflow: "hidden" });
       scrollTape();
     } else {
-      $("#words").css({ marginLeft: "unset", width: "" });
+      $("#words").css({
+        overflow: "visible clip",
+        marginLeft: "unset",
+        width: "",
+      });
+      $("#wordsWrapper").css({ overflow: "visible clip" });
     }
 
     setTimeout(() => {
-      $("#wordsWrapper")
-        .css("height", finalWrapperHeight + "px")
-        .css("overflow", "hidden");
-      $("#words")
-        .css("height", finalWordsHeight + "px")
-        .css("overflow", "hidden");
+      $("#words").css("height", finalWordsHeight + "px");
+      $("#wordsWrapper").css("height", finalWrapperHeight + "px");
       $(".outOfFocusWarning").css(
         "margin-top",
         finalWrapperHeight / 2 - Numbers.convertRemToPixels(1) / 2 + "px"

frontend/src/ts/ui.ts

@@ -16,6 +16,7 @@ export function previewFontFamily(font: string): void {
     "--font",
     '"' + font.replace(/_/g, " ") + '", "Roboto Mono", "Vazirmatn"'
   );
+  void TestUI.updateHintsPosition();
   isPreviewingFont = true;
 }