impr(test page): make desktop test config visible on narrower widths

monkeytypegame · Apr 30, 2024 · b95c2e8 · b95c2e8
1 parent f03bab2
commit b95c2e8
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 5 deletions.
diff --git a/frontend/src/html/pages/test.html b/frontend/src/html/pages/test.html
@@ -1,5 +1,5 @@
 <div class="page pageTest hidden full-width content-grid">
-  <div id="testConfig">
+  <div id="testConfig" class="full-width">
     <div class="row">
       <div class="puncAndNum">
         <div class="textButton punctuationMode">

diff --git a/frontend/src/styles/media-queries-blue.scss b/frontend/src/styles/media-queries-blue.scss
@@ -9,10 +9,8 @@
     --content-max-width: 640px;
   }
   #testConfig {
-    display: none;
-  }
-  #mobileTestConfigButton {
-    display: block;
+    font-size: 0.65rem;
+    --horizontalPadding: 0.55em;
   }
   #testModesNotice {
     font-size: 0.8rem;

diff --git a/frontend/src/styles/media-queries-purple.scss b/frontend/src/styles/media-queries-purple.scss
@@ -34,6 +34,12 @@
     }
   }
   .pageTest {
+    #testConfig {
+      display: none;
+    }
+    #mobileTestConfigButton {
+      display: block;
+    }
     #result .wrapper {
       .stats {
         grid-template-columns: 1fr;