From 155c348850b6dd094453e0ef1339d1e9a5981c11 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Fri, 26 Apr 2024 19:35:14 +0200
Subject: [PATCH] style(typing test): align mini progress with the words, not
 the content width

---
 frontend/src/html/pages/test.html |  2 +-
 frontend/src/styles/test.scss     |  3 +--
 frontend/src/ts/test/test-ui.ts   | 14 ++++++++++++--
 3 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/frontend/src/html/pages/test.html b/frontend/src/html/pages/test.html
index abcd5bd6ddaa..cac532e6b331 100644
--- a/frontend/src/html/pages/test.html
+++ b/frontend/src/html/pages/test.html
@@ -104,7 +104,7 @@
     <div id="timerNumber" class="timerMain">
       <div>60</div>
     </div>
-    <div id="miniTimerAndLiveWpm" class="timerMain">
+    <div id="miniTimerAndLiveWpm" class="full-width-padding timerMain">
       <div class="time hidden">1:00</div>
       <div class="wpm hidden">60</div>
       <div class="acc hidden">100%</div>
diff --git a/frontend/src/styles/test.scss b/frontend/src/styles/test.scss
index 522e04493c2b..959fdb11eca1 100644
--- a/frontend/src/styles/test.scss
+++ b/frontend/src/styles/test.scss
@@ -1144,11 +1144,10 @@
     height: 0;
     margin-left: 0.25em;
     display: flex;
-    position: absolute;
+    margin-top: -1.25em;
     color: black;
 
     div {
-      margin-top: -1.25em;
       font-size: 1em;
       line-height: 1em;
     }
diff --git a/frontend/src/ts/test/test-ui.ts b/frontend/src/ts/test/test-ui.ts
index 7307211aa8f2..5c548e05604a 100644
--- a/frontend/src/ts/test/test-ui.ts
+++ b/frontend/src/ts/test/test-ui.ts
@@ -1530,9 +1530,19 @@ ConfigEvent.subscribe((key, value) => {
   }
   if (key === "tapeMode") {
     if (value === "off") {
-      $("#typingTest").css("max-width", "70ch");
+      $("#typingTest").css({
+        "max-width": "70ch%",
+      });
+      $("#miniTimerAndLiveWpm").css({
+        "grid-column": "full-width-padding",
+      });
     } else {
-      $("#typingTest").css("max-width", "100%");
+      $("#typingTest").css({
+        "max-width": "100%",
+      });
+      $("#miniTimerAndLiveWpm").css({
+        "grid-column": "content",
+      });
     }
   }
 });