fix(leaderboards): content overflow on smaller screens (@byseif21, @Miodec) (#6733)

### Description
* when the table got wider than the screen, it broke the layout and
pushed other elements out of view.
fixed it by `overflow-x: hidden`
* making the table itself more responsive, so it adapts across screen
sizes

* video ; 


https://github.com/user-attachments/assets/c84272d1-4c77-4e59-980e-aab09c18d6a1

Closes #6732

---------

Co-authored-by: Miodec <[email protected]>

Author: byseif21

frontend/src/html/pages/leaderboards.html

@@ -23,7 +23,7 @@
         <div class="title timer">Updates in: -</div>
 
         <div class="jumpButtons">
-          <div class="updating hidden">
+          <div class="updating">
             <i class="fas fa-circle-notch fa-spin"></i>
           </div>
           <button data-action="firstPage"><i class="fas fa-crown"></i></button>
@@ -55,7 +55,7 @@
               wpm
               <div class="sub">accuracy</div>
             </td>
-            <td class="stat narrow">
+            <td class="stat narrow rawAndConsistency">
               raw
               <div class="sub">consistency</div>
             </td>

frontend/src/styles/core.scss

@@ -389,16 +389,18 @@ key {
   display: grid;
   grid-template-columns: max-content auto;
   align-items: baseline;
+  --spacing: 0.5em;
+  --horizontalScale: 1.25;
   .fas,
   .far {
-    margin-right: 0.3rem;
-    margin-left: 0.3rem;
-    margin-top: 0.3rem;
-    margin-bottom: 0.3rem;
+    margin-right: calc(var(--spacing) * var(--horizontalScale));
+    margin-left: calc(var(--spacing) * var(--horizontalScale));
+    margin-top: var(--spacing);
+    margin-bottom: var(--spacing);
     font-size: 0.9em;
   }
   .text {
-    margin-right: 0.3rem;
+    margin-right: calc(var(--spacing) * var(--horizontalScale));
   }
 }
 

frontend/src/styles/leaderboards.scss

@@ -10,8 +10,8 @@
     height: 100%;
 
     .bigtitle {
-      font-size: 2rem;
-      margin-bottom: 1rem;
+      font-size: 2em;
+      margin-bottom: 1em;
       .text {
         grid-area: text;
       }
@@ -50,12 +50,12 @@
 
       .titleAndButtons {
         align-items: center;
-        font-size: 1rem;
+        font-size: 1em;
         display: grid;
         grid-template-columns: 1fr 1fr;
         justify-content: space-between;
         button {
-          width: 3rem;
+          width: 3em;
         }
         .title {
           font-size: 1rem;
@@ -70,7 +70,7 @@
           .updating {
             font-size: 1.5em;
             color: var(--sub-color);
-            margin-right: 0.5em;
+            margin-left: 0.5em;
           }
         }
       }
@@ -87,8 +87,8 @@
       .bigUser {
         // color: var(--main-color);
         font-size: 1em;
-        margin-bottom: 2rem;
-        margin-top: 2rem;
+        margin-bottom: 2em;
+        margin-top: 2em;
         background: var(--sub-alt-color);
         padding: 1em 2em;
         border-radius: var(--roundness);
@@ -121,6 +121,9 @@
           .sub {
             opacity: 0.5;
           }
+          &:last-child {
+            text-wrap-mode: nowrap;
+          }
         }
         .date {
           font-size: 0.75em;
@@ -143,15 +146,6 @@
           //   }
         }
       }
-      .avatarNameBadge {
-        display: grid;
-        grid-template-columns: min-content max-content auto;
-        gap: 0.5rem;
-        place-items: center left;
-        .avatarPlaceholder {
-          color: var(--sub-color);
-        }
-      }
       table {
         width: 100%;
         border-spacing: 0;
@@ -187,7 +181,7 @@
               text-align: right;
             }
             &.date {
-              width: 20ch;
+              width: 1px;
               text-align: right;
             }
           }
@@ -199,14 +193,11 @@
           gap: 0.5em;
           place-items: center left;
           .avatarPlaceholder {
-            width: 1.25em;
-            height: 1.25em;
-            font-size: 1.25em;
-            // background: var(--sub-color);
             color: var(--sub-color);
-            // display: grid;
-            // place-content: center center;
             border-radius: 100%;
+            i {
+              font-size: 1.29em;
+            }
           }
           .entryName {
             text-decoration: none;
@@ -215,11 +206,13 @@
           }
           .avatarPlaceholder,
           .avatar {
+            width: 1.25em;
+            height: 1.25em;
             grid-row: 1/2;
             grid-column: 1/2;
           }
           .badge {
-            font-size: 0.6em;
+            font-size: 0.75em;
           }
           .flagsAndBadge {
             display: flex;
@@ -244,6 +237,7 @@
           }
 
           td.date {
+            text-wrap-mode: nowrap;
             text-align: right;
             font-size: 0.75em;
           }

frontend/src/styles/media-queries-brown.scss

@@ -57,4 +57,48 @@
   #testActivity {
     display: none;
   }
+
+  .pageLeaderboards {
+    .content .tableAndUser {
+      //font-size: 0.7rem;
+      .bigUser {
+        gap: 1em;
+        padding-left: 0.75em;
+        .stat.narrow:last-child {
+          font-size: 0.75em;
+        }
+        .userInfo {
+          font-size: 0.8em;
+        }
+        .rank {
+          margin-right: 0.5em;
+        }
+      }
+      .titleAndButtons {
+        // grid-template-columns: 1fr;
+        .title {
+          // text-align: center;
+          font-size: 1em;
+        }
+      }
+      table {
+        .avatarNameBadge .flagsAndBadge .badge .text {
+          display: block;
+        }
+        tbody td.date {
+          font-size: 0.75em;
+        }
+        .avatarNameBadge {
+          grid-template-columns: 1.25em 1fr;
+          grid-template-areas:
+            "avatar name"
+            "badges badges";
+          .flagsAndBadge {
+            grid-area: badges;
+            // justify-self: center;
+          }
+        }
+      }
+    }
+  }
 }

frontend/src/styles/media-queries-gray.scss

@@ -0,0 +1,27 @@
+//this is very overkill for the modern world so dont worry too much about this width
+@media only screen and (max-width: 330px) {
+  #mediaQueryDebug {
+    background: gray;
+    &::before {
+      content: "gray";
+    }
+  }
+  .pageLeaderboards .content .tableAndUser {
+    .titleAndButtons {
+      grid-template-columns: 1fr;
+      gap: 0.5em;
+      .title {
+        text-align: right;
+      }
+    }
+    .rawAndConsistency {
+      display: none;
+    }
+  }
+  header {
+    gap: 0.25rem;
+    nav .textButton {
+      padding: 0.5em 0.25em;
+    }
+  }
+}

frontend/src/styles/media-queries-purple.scss

@@ -22,11 +22,33 @@
       }
     }
   }
+
   .pageLeaderboards {
     .content .bigtitle .text:after {
       left: 0.1rem;
       transform: none;
     }
+    .content .tableAndUser {
+      font-size: clamp(0.7rem, 2.8vw, 0.9rem);
+      .bigUser {
+        gap: 1.5em;
+      }
+      table {
+        td {
+          padding: 0.5em;
+        }
+        .avatarNameBadge .flagsAndBadge .badge .text {
+          display: none;
+        }
+        tbody td:nth-child(2) {
+          width: 100%;
+        }
+      }
+      .bigUser {
+        padding: 0.5em;
+        padding-left: 1em;
+      }
+    }
   }
   header {
     nav {

frontend/src/styles/media-queries.scss

@@ -50,6 +50,7 @@ body {
 @import "media-queries-blue";
 @import "media-queries-purple";
 @import "media-queries-brown";
+@import "media-queries-gray";
 
 @media only screen and (max-width: 1875px) {
   .ad.ad-v {

frontend/src/ts/pages/leaderboards.ts

@@ -512,7 +512,7 @@ function buildTableRow(entry: LeaderboardEntry, me = false): string {
         <div class="sub">${formatted.acc}</div>
       </td>
       </td>
-      <td class="stat narrow">
+      <td class="stat narrow rawAndConsistency">
       ${formatted.raw}
         <div class="sub">${formatted.con}</div>
       </td>
@@ -778,7 +778,7 @@ function fillUser(): void {
           <div>${formatted.wpm}</div>
           <div class="sub">${formatted.acc}</div>
         </div>
-        <div class="stat narrow">
+        <div class="stat narrow rawAndConsistency">
           <div>${formatted.raw}</div>
           <div class="sub">${formatted.con}</div>
         </div>
@@ -880,7 +880,7 @@ function fillUser(): void {
 
 function updateContent(): void {
   $(".page.pageLeaderboards .loading").addClass("hidden");
-  $(".page.pageLeaderboards .updating").addClass("hidden");
+  $(".page.pageLeaderboards .updating").addClass("invisible");
   $(".page.pageLeaderboards .error").addClass("hidden");
 
   if (state.error !== undefined) {
@@ -892,7 +892,7 @@ function updateContent(): void {
 
   if (state.updating) {
     disableButtons();
-    $(".page.pageLeaderboards .updating").removeClass("hidden");
+    $(".page.pageLeaderboards .updating").removeClass("invisible");
     return;
   } else if (state.loading) {
     disableButtons();