From 4ed3b7d6c818c93d630dc529080576c02bcc0bda Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Sat, 27 Apr 2024 00:02:08 +0200
Subject: [PATCH] style(typing result): improve styling on narrow screens

also fix random elements causing grid issues
---
 frontend/src/html/pages/test.html             |  4 ++--
 frontend/src/styles/media-queries-brown.scss  |  4 ----
 frontend/src/styles/media-queries-purple.scss | 11 +++++++++++
 frontend/src/styles/test.scss                 |  4 ++++
 4 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/frontend/src/html/pages/test.html b/frontend/src/html/pages/test.html
index cac532e6b..992f12222 100644
--- a/frontend/src/html/pages/test.html
+++ b/frontend/src/html/pages/test.html
@@ -296,7 +296,7 @@
       <!-- <div class="title">wpm over time</div> -->
       <canvas id="wpmChart"></canvas>
     </div>
-    <div class="bottom" style="grid-column: 1/3">
+    <div class="bottom">
       <div id="resultWordsHistory" class="hidden">
         <div class="title">
           <span>input history</span>
@@ -441,7 +441,7 @@
       <a href="/login" router-link>Sign in</a>
       to save your result
     </div>
-    <div style="grid-column: span 2">
+    <div style="grid-column: 1/-1">
       <div id="ad-result-wrapper" class="ad full-width advertisement ad-h">
         <div class="iconAndText">
           <div class="icon"><i class="fas fa-ad"></i></div>
diff --git a/frontend/src/styles/media-queries-brown.scss b/frontend/src/styles/media-queries-brown.scss
index c651f5112..cc82d1723 100644
--- a/frontend/src/styles/media-queries-brown.scss
+++ b/frontend/src/styles/media-queries-brown.scss
@@ -26,10 +26,6 @@
       grid-template-areas:
         "stats" "chart"
         "morestats";
-      .stats {
-        grid-template-columns: 1fr;
-        grid-template-areas: "wpm" "acc";
-      }
       .stats.morestats {
         justify-items: start;
         display: grid;
diff --git a/frontend/src/styles/media-queries-purple.scss b/frontend/src/styles/media-queries-purple.scss
index 0b87b3514..d98139d55 100644
--- a/frontend/src/styles/media-queries-purple.scss
+++ b/frontend/src/styles/media-queries-purple.scss
@@ -35,6 +35,17 @@
   }
   .pageTest {
     #result {
+      .stats {
+        grid-template-columns: 1fr;
+        grid-template-areas: "wpm" "acc";
+        width: max-content;
+        justify-items: start;
+        justify-self: center;
+      }
+      .morestats {
+        justify-self: unset;
+        width: unset;
+      }
       .buttons {
         grid-template-columns: 1fr 1fr;
         grid-auto-flow: unset;
diff --git a/frontend/src/styles/test.scss b/frontend/src/styles/test.scss
index 959fdb11e..00714ff27 100644
--- a/frontend/src/styles/test.scss
+++ b/frontend/src/styles/test.scss
@@ -690,6 +690,10 @@
     }
   }
 
+  .bottom {
+    grid-column: 1/-1;
+  }
+
   .stats {
     grid-area: stats;
     display: grid;