impr(max line width): setting the value to 0 will now always align the words to the width of the container

backend/src/api/schemas/config-schema.ts

@@ -146,7 +146,7 @@ const CONFIG_SCHEMA = joi.object({
   britishEnglish: joi.boolean(),
   lazyMode: joi.boolean(),
   showAverage: joi.string().valid("off", "speed", "acc", "both"),
-  maxLineWidth: joi.number().min(20).max(1000),
+  maxLineWidth: joi.number().min(20).max(1000).allow(0),
 });
 
 export default CONFIG_SCHEMA;

frontend/src/html/pages/settings.html

@@ -900,6 +900,7 @@
       </div>
       <div class="text">
         Change the maximum width of the typing test, measured in characters.
+        Setting this to 0 will align the words to the edges of the content area.
       </div>
       <div class="inputs">
         <div class="inputAndButton">
@@ -907,7 +908,7 @@
             type="number"
             placeholder="max line width"
             class="input"
-            min="20"
+            min="0"
           />
           <button class="save no-auto-handle">
             <i class="fas fa-save fa-fw"></i>

frontend/src/styles/test.scss

@@ -102,7 +102,6 @@
 
   #typingTest {
     position: relative;
-    max-width: 70ch;
     width: 100%;
     margin: 0 auto;
   }

frontend/src/ts/config.ts

@@ -1669,7 +1669,7 @@ export function setMaxLineWidth(
     return false;
   }
 
-  if (maxLineWidth < 20) {
+  if (maxLineWidth < 20 && maxLineWidth !== 0) {
     maxLineWidth = 20;
   }
   if (maxLineWidth > 1000) {

frontend/src/ts/constants/default-config.ts

@@ -93,5 +93,5 @@ export default {
   lazyMode: false,
   showAverage: "off",
   tapeMode: "off",
-  maxLineWidth: 70,
+  maxLineWidth: 0,
 } as SharedTypes.Config;

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

@@ -353,6 +353,7 @@ export function showWords(): void {
 
   $("#words").html(wordsHTML);
 
+  updateWordsWidth();
   updateWordsHeight(true);
   updateActiveElement(undefined, true);
   void Caret.updatePosition();
@@ -1407,6 +1408,38 @@ export function highlightMode(mode?: SharedTypes.Config.HighlightMode): void {
   $("#words").attr("class", existing.join(" "));
 }
 
+function updateWordsWidth(): void {
+  let css: Record<string, string> = {};
+  if (Config.tapeMode === "off") {
+    if (Config.maxLineWidth === 0) {
+      css = {
+        "max-width": "100%",
+      };
+    } else {
+      css = {
+        "max-width": Config.maxLineWidth + "ch",
+      };
+    }
+  } else {
+    if (Config.maxLineWidth === 0) {
+      css = {
+        "max-width": "100%",
+      };
+    } else {
+      css = {
+        "max-width": "100%",
+      };
+    }
+  }
+  const el = $("#typingTest");
+  el.css(css);
+  if (Config.maxLineWidth === 0) {
+    el.removeClass("full-width-padding").addClass("content");
+  } else {
+    el.removeClass("content").addClass("full-width-padding");
+  }
+}
+
 $(".pageTest").on("click", "#saveScreenshotButton", () => {
   void screenshot();
 });
@@ -1528,28 +1561,7 @@ ConfigEvent.subscribe((key, value) => {
       $(".pageTest #restartTestButton").addClass("hidden");
     }
   }
-  if (key === "tapeMode") {
-    if (value === "off") {
-      $("#typingTest").css({
-        "max-width": Config.maxLineWidth + "ch",
-      });
-      $("#miniTimerAndLiveWpm").css({
-        "grid-column": "full-width",
-      });
-    } else {
-      $("#typingTest").css({
-        "max-width": "100%",
-      });
-      $("#miniTimerAndLiveWpm").css({
-        "grid-column": "content",
-      });
-    }
-  }
   if (key === "maxLineWidth") {
-    if (Config.tapeMode === "off") {
-      $("#typingTest").css({
-        "max-width": Config.maxLineWidth + "ch",
-      });
-    }
+    updateWordsWidth();
   }
 });