fix: changing tape mode during the test causing overflow

Author: Miodec

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

@@ -347,7 +347,7 @@ function getWordHTML(word: string): string {
   return retval;
 }
 
-function updateWordWrapperClasses(): void {
+function updateWordWrapperClasses(initial = false): void {
   if (Config.tapeMode !== "off") {
     $("#words").addClass("tape");
     $("#wordsWrapper").addClass("tape");
@@ -382,13 +382,15 @@ function updateWordWrapperClasses(): void {
   }
 
   $("#words").attr("class", existing.join(" "));
+
+  updateWordsWidth();
+  updateWordsHeight(true);
+  void updateWordsInputPosition(initial);
 }
 
 export function showWords(): void {
   $("#words").empty();
 
-  updateWordWrapperClasses();
-
   let wordsHTML = "";
   if (Config.mode !== "zen") {
     for (let i = 0; i < TestWords.words.length; i++) {
@@ -401,13 +403,12 @@ export function showWords(): void {
 
   $("#words").html(wordsHTML);
 
-  updateWordsWidth();
-  updateWordsHeight(true);
   updateActiveElement(undefined, true);
   setTimeout(() => {
     void Caret.updatePosition();
   }, 125);
-  void updateWordsInputPosition(true);
+
+  updateWordWrapperClasses(true);
 }
 
 const posUpdateLangList = ["japanese", "chinese", "korean"];