From 7f04503921e84fb89a4f010a389000a019bbefab Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Tue, 30 Apr 2024 21:00:02 +0200
Subject: [PATCH] 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    |  2 +-
 frontend/src/html/pages/settings.html       |  3 +-
 frontend/src/styles/test.scss               |  1 -
 frontend/src/ts/config.ts                   |  2 +-
 frontend/src/ts/constants/default-config.ts |  2 +-
 frontend/src/ts/test/test-ui.ts             | 56 +++++++++++++--------
 6 files changed, 39 insertions(+), 27 deletions(-)

diff --git a/backend/src/api/schemas/config-schema.ts b/backend/src/api/schemas/config-schema.ts
index 65c3592fc..2b524d0d8 100644
--- a/backend/src/api/schemas/config-schema.ts
+++ b/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;
diff --git a/frontend/src/html/pages/settings.html b/frontend/src/html/pages/settings.html
index 2cd9e8bb4..f021be038 100644
--- a/frontend/src/html/pages/settings.html
+++ b/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>
diff --git a/frontend/src/styles/test.scss b/frontend/src/styles/test.scss
index 38255b0d3..60046a3d9 100644
--- a/frontend/src/styles/test.scss
+++ b/frontend/src/styles/test.scss
@@ -102,7 +102,6 @@
 
   #typingTest {
     position: relative;
-    max-width: 70ch;
     width: 100%;
     margin: 0 auto;
   }
diff --git a/frontend/src/ts/config.ts b/frontend/src/ts/config.ts
index 6eced679d..6eff129ef 100644
--- a/frontend/src/ts/config.ts
+++ b/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) {
diff --git a/frontend/src/ts/constants/default-config.ts b/frontend/src/ts/constants/default-config.ts
index 42b992a5e..8df8e066b 100644
--- a/frontend/src/ts/constants/default-config.ts
+++ b/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;
diff --git a/frontend/src/ts/test/test-ui.ts b/frontend/src/ts/test/test-ui.ts
index e61af5b42..286725dd0 100644
--- a/frontend/src/ts/test/test-ui.ts
+++ b/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();
   }
 });