updated styling for test config

frontend/src/styles/test.scss

@@ -910,6 +910,7 @@
 }
 
 #mobileTestConfig {
+  font-size: 0.75rem;
   padding: 0.25rem 1rem;
   background: var(--sub-alt-color);
   border-radius: var(--roundness);
@@ -932,39 +933,48 @@
   .puncAndNum {
     // transition: 0.25s cubic-bezier(0.37, 0, 0.63, 1);
     overflow: hidden;
-    max-width: 13rem;
+    max-width: 15rem;
     opacity: 1;
   }
   .row {
     display: flex;
-    padding: 0.25rem 1rem;
+    // padding: 0 0.5rem;
     background: var(--sub-alt-color);
     border-radius: var(--roundness);
     // width: max-content;
   }
   .spacer {
-    height: 75%;
+    height: auto;
     width: 0.25rem;
     border-radius: calc(var(--roundness) / 2);
     background: var(--bg-color);
-    margin: auto 1rem;
+    margin: 0.5rem 0;
     transition: 0.25s;
     &.scrolled {
       width: 0;
       margin: auto 0;
     }
   }
-  .textButton {
-    transition: 0.125s;
-  }
+
   .mode,
   .time,
   .wordCount,
   .puncAndNum,
   .quoteLength {
     display: grid;
-    gap: 0.5rem;
     grid-auto-flow: column;
+
+    .textButton {
+      transition: 0.125s;
+      padding: 0.75rem 0.5rem;
+
+      &:first-child {
+        padding: 0.75rem 0.5rem 0.75rem 1rem;
+      }
+      &:last-child {
+        padding: 0.75rem 1rem 0.75rem 0.5rem;
+      }
+    }
   }
   .time,
   .wordCount,

frontend/src/styles/z_media-queries.scss

@@ -160,14 +160,21 @@
 
 @media only screen and (max-width: 900px) {
   #testConfig {
-    .row {
-      padding: 0.25rem 0.25rem;
-    }
-    .spacer {
-      margin: auto 0.25rem;
-    }
-    .textButton {
-      padding: 0.5rem 0.25rem;
+    .mode,
+    .time,
+    .wordCount,
+    .puncAndNum,
+    .quoteLength {
+      .textButton {
+        padding: 0.75rem 0.3rem;
+
+        &:first-child {
+          padding: 0.75rem 0.3rem 0.75rem 0.6rem;
+        }
+        &:last-child {
+          padding: 0.75rem 0.6rem 0.75rem 0.3rem;
+        }
+      }
     }
   }
   .ad.ad-h {
@@ -292,11 +299,30 @@
 
 @media only screen and (max-width: 800px) {
   #testConfig {
+    .spacer {
+      display: none;
+    }
     .row {
       display: grid;
       justify-items: center;
       padding: 0.25rem 1rem;
     }
+    .mode,
+    .time,
+    .wordCount,
+    .puncAndNum,
+    .quoteLength {
+      .textButton {
+        padding: 0.5rem 0.75rem;
+
+        &:first-child {
+          padding: 0.5rem 0.75rem;
+        }
+        &:last-child {
+          padding: 0.5rem 0.75rem;
+        }
+      }
+    }
   }
 
   #top {
@@ -693,6 +719,9 @@
       }
     }
   }
+  #testModesNotice {
+    font-size: 0.75rem;
+  }
   #cookiePopupWrapper {
     #cookiePopup,
     .extensionMessage {
@@ -848,6 +877,16 @@
   }
 }
 
+@media only screen and (max-width: 450px) {
+  #testConfig {
+    display: none;
+  }
+
+  #mobileTestConfig {
+    display: block;
+  }
+}
+
 @media only screen and (max-width: 400px) {
   #top .config {
     grid-gap: 0.25rem;
@@ -857,14 +896,6 @@
     }
   }
 
-  #testConfig {
-    display: none;
-  }
-
-  #mobileTestConfig {
-    display: block;
-  }
-
   #bottom {
     font-size: 0.65rem;
     .leftright {

frontend/src/ts/test/test-config.ts

@@ -103,7 +103,7 @@ export async function update(
       .animate(
         {
           opacity: 1,
-          maxWidth: "13rem",
+          maxWidth: "14rem",
         },
         animTime,
         "easeInOutSine"
@@ -117,7 +117,7 @@ export async function update(
     $("#testConfig .puncAndNum")
       .css({
         opacity: 1,
-        maxWidth: "13rem",
+        maxWidth: "14rem",
       })
       .animate(
         {