impr(tape mode): show next line if test has newlines (@NadAlaba)

frontend/src/styles/test.scss

@@ -261,9 +261,23 @@
     }
   }
 
-  &.tape .word {
-    margin: 0.25em 0.6em 0.75em 0;
-    white-space: nowrap;
+  &.tape {
+    display: block;
+    text-wrap: nowrap;
+    width: 200vw;
+    .word {
+      margin: 0.25em 0.6em 0.25em 0;
+      display: inline-block;
+      vertical-align: top;
+    }
+    .beforeNewline {
+      display: inline-block;
+      vertical-align: top;
+      margin: 0.25em 0;
+    }
+    .afterNewline {
+      display: inline-block;
+    }
   }
 
   /* a little hack for right-to-left languages */
@@ -462,13 +476,13 @@
     display: inline-block;
   }
 
-  &.lastbeforenewline::after {
-    font-family: "Font Awesome";
-    font-weight: 600;
-    content: "\f107";
-    margin-left: 0.5rem;
-    opacity: 0.25;
-  }
+  //&.lastbeforenewline::after {
+  //  font-family: "Font Awesome";
+  //  font-weight: 600;
+  //  content: "\f107";
+  //  margin-left: 0.5rem;
+  //  opacity: 0.25;
+  //}
 
   .wordInputHighlight {
     opacity: 1;
@@ -564,9 +578,9 @@
   pointer-events: none;
   top: -2.5rem;
 
-  &.focus {
-    // top: 0rem;
-  }
+  //&.focus {
+  // top: 0rem;
+  //}
 
   i {
     margin-right: 0.5rem;
@@ -1182,7 +1196,9 @@
 .pageTest {
   #wordsWrapper {
     position: relative;
+    overflow: visible clip;
     &.tape {
+      overflow: hidden;
       -webkit-mask-image: linear-gradient(
         90deg,
         rgba(0, 0, 0, 0) 1%,
@@ -1221,7 +1237,8 @@
   }
   .outOfFocusWarning {
     text-align: center;
-    height: 0;
+    height: 100%;
+    align-content: center;
     font-size: 1rem;
     z-index: 999;
     position: absolute;

frontend/src/ts/test/test-logic.ts

@@ -1416,7 +1416,6 @@ ConfigEvent.subscribe((eventKey, eventValue, nosave) => {
       restart();
     }
     if (eventKey === "difficulty" && !nosave) restart();
-    if (eventKey === "showAllLines" && !nosave) restart();
     if (
       eventKey === "customLayoutFluid" &&
       Config.funbox.includes("layoutfluid")