Uncodedtech · pull · Jan 21, 2026 · Jan 21, 2026 · Jan 21, 2026 · Jan 21, 2026
diff --git a/frontend/src/html/pages/account.html b/frontend/src/html/pages/account.html
@@ -374,7 +374,7 @@
         </div>
       </div>
     </div>
-    <div class="group filterButtons" style="display: none">
+    <div class="group filterButtons hidden">
       <div class="buttonsAndTitle" style="grid-column: 1/-1">
         <div class="title">
           <i class="fas fa-tools"></i>

diff --git a/frontend/src/index.html b/frontend/src/index.html
@@ -4,7 +4,6 @@
 
   <body>
     <mount data-component="overlays"></mount>
-    <div id="mediaQueryDebug"></div>
     <load src="html/warnings.html" />
     <div class="customBackground"></div>
 

diff --git a/frontend/src/styles/media-queries-blue.scss b/frontend/src/styles/media-queries-blue.scss
@@ -1,12 +1,6 @@
 @use "./media.scss" as *;
 
 @include media-query(blue) {
-  #mediaQueryDebug {
-    background: #29b6f6;
-    &::before {
-      content: "blue";
-    }
-  }
   .content-grid {
     --content-max-width: 640px;
   }

diff --git a/frontend/src/styles/media-queries-brown.scss b/frontend/src/styles/media-queries-brown.scss
@@ -2,12 +2,6 @@
 @use "./media.scss" as *;
 
 @include media-query(brown) {
-  #mediaQueryDebug {
-    background: #8d6e63;
-    &::before {
-      content: "brown";
-    }
-  }
   header {
     nav {
       font-size: 0.8rem;

diff --git a/frontend/src/styles/media-queries-gray.scss b/frontend/src/styles/media-queries-gray.scss
@@ -2,12 +2,6 @@
 @use "./media.scss" as *;
 
 @include media-query(gray) {
-  #mediaQueryDebug {
-    background: gray;
-    &::before {
-      content: "gray";
-    }
-  }
   .pageLeaderboards .content .tableAndUser {
     .titleAndButtons {
       grid-template-columns: 1fr;

diff --git a/frontend/src/styles/media-queries-green.scss b/frontend/src/styles/media-queries-green.scss
@@ -1,12 +1,6 @@
 @use "./media.scss" as *;
 
 @include media-query(green) {
-  #mediaQueryDebug {
-    background: #9ccc65;
-    &::before {
-      content: "green";
-    }
-  }
   .content-grid {
     --content-max-width: 768px;
   }

diff --git a/frontend/src/styles/media-queries-orange.scss b/frontend/src/styles/media-queries-orange.scss
@@ -1,12 +1,6 @@
 @use "./media.scss" as *;
 
 @include media-query(orange) {
-  #mediaQueryDebug {
-    background: #ffa726;
-    &::before {
-      content: "orange";
-    }
-  }
   .content-grid {
     --content-max-width: 1280px;
   }

diff --git a/frontend/src/styles/media-queries-purple.scss b/frontend/src/styles/media-queries-purple.scss
@@ -1,12 +1,6 @@
 @use "./media.scss" as *;
 
 @include media-query(purple) {
-  #mediaQueryDebug {
-    background: #7e57c2;
-    &::before {
-      content: "purple";
-    }
-  }
   .content-grid {
     --content-max-width: 100%;
     --padding-inline: 1rem;

diff --git a/frontend/src/styles/media-queries-yellow.scss b/frontend/src/styles/media-queries-yellow.scss
@@ -1,12 +1,6 @@
 @use "./media.scss" as *;
 
 @include media-query(yellow) {
-  #mediaQueryDebug {
-    background: #ffee58;
-    &::before {
-      content: "yellow";
-    }
-  }
   .content-grid {
     --content-max-width: 1024px;
   }

diff --git a/frontend/src/styles/media-queries.scss b/frontend/src/styles/media-queries.scss
@@ -1,39 +1,10 @@
-#mediaQueryDebug {
-  height: 0.5rem;
-  width: 100%;
-  background: #f44336;
-  position: fixed;
-  z-index: 99999999;
-  top: 0px;
-  &::before {
-    content: "red";
-    padding-top: 0.75rem;
-    padding-left: 0.5rem;
-    display: block;
-    z-index: 99999999;
-    position: absolute;
-  }
-  display: none;
-}
-
 body {
   &.mediaQueryDebugLevel1 {
-    #mediaQueryDebug {
-      display: block;
-    }
-  }
-  &.mediaQueryDebugLevel2 {
-    #mediaQueryDebug {
-      display: block;
-    }
     .content-grid {
       border: 0.1rem dashed var(--main-color);
     }
   }
-  &.mediaQueryDebugLevel3 {
-    #mediaQueryDebug {
-      display: block;
-    }
+  &.mediaQueryDebugLevel2 {
     .content-grid > * {
       border: 0.1rem dashed var(--sub-color);
     }

diff --git a/frontend/src/ts/components/layout/footer/Footer.tsx b/frontend/src/ts/components/layout/footer/Footer.tsx
@@ -4,26 +4,12 @@ import { getFocus } from "../../../signals/core";
 import { showModal } from "../../../stores/modals";
 import { Button } from "../../common/Button";
 
-import { ScrollToTop } from "./ScrollToTop";
 import { ThemeIndicator } from "./ThemeIndicator";
 import { VersionButton } from "./VersionButton";
 
 export function Footer(): JSXElement {
   return (
     <footer class="text-sub relative text-xs">
-      <ScrollToTop />
-      <button
-        type="button"
-        id="commandLineMobileButton"
-        class="bg-main text-bg fixed bottom-8 left-8 z-99 hidden h-12 w-12 rounded-full text-center leading-12"
-        onClick={() => {
-          showModal("Commandline");
-        }}
-        tabIndex="-1"
-      >
-        <i class="fas fa-terminal"></i>
-      </button>
-
       <div
         class="mb-8 text-center leading-loose transition-opacity"
         classList={{

diff --git a/frontend/src/ts/components/layout/overlays/MediaQueryDebugger.tsx b/frontend/src/ts/components/layout/overlays/MediaQueryDebugger.tsx
@@ -0,0 +1,45 @@
+import { JSXElement, Match, Show, Switch } from "solid-js";
+
+import { bp } from "../../../signals/breakpoints";
+import { isDevEnvironment } from "../../../utils/misc";
+
+export function MediaQueryDebugger(): JSXElement {
+  return (
+    <Show when={isDevEnvironment()}>
+      <div class="text-text fixed top-2 z-999999999999999 flex flex-col gap-2 font-mono text-xs">
+        <div class="bg-sub-alt flex w-min rounded-r px-2 py-1">
+          <div class="mr-2">OLD</div>
+          <div class="hidden 2xl:block">red</div>
+          <div class="hidden xl:block 2xl:hidden">orange</div>
+          <div class="hidden lg:block xl:hidden">yellow</div>
+          <div class="hidden md:block lg:hidden">green</div>
+          <div class="hidden sm:block md:hidden">blue</div>
+          <div class="xs:block hidden sm:hidden">purple</div>
+          <div class="xs:hidden">gray</div>
+        </div>
+        <div class="bg-sub-alt flex w-min rounded-r px-2 py-1">
+          <div class="mr-2">CSS</div>
+          <div class="hidden 2xl:block">2xl</div>
+          <div class="hidden xl:block 2xl:hidden">xl</div>
+          <div class="hidden lg:block xl:hidden">lg</div>
+          <div class="hidden md:block lg:hidden">md</div>
+          <div class="hidden sm:block md:hidden">sm</div>
+          <div class="xs:block hidden sm:hidden">xs</div>
+          <div class="xs:hidden">xxs</div>
+        </div>
+        <div class="bg-sub-alt flex w-min rounded-r px-2 py-1">
+          <div class="mr-2">JS</div>
+          <Switch>
+            <Match when={bp().xxl}>2xl</Match>
+            <Match when={bp().xl}>xl</Match>
+            <Match when={bp().lg}>lg</Match>
+            <Match when={bp().md}>md</Match>
+            <Match when={bp().sm}>sm</Match>
+            <Match when={bp().xs}>xs</Match>
+            <Match when={bp().xxs}>xxs</Match>
+          </Switch>
+        </div>
+      </div>
+    </Show>
+  );
+}
diff --git a/frontend/src/ts/components/layout/overlays/Overlays.tsx b/frontend/src/ts/components/layout/overlays/Overlays.tsx
@@ -1,16 +1,30 @@
 import { JSXElement } from "solid-js";
 
-import { TailwindMediaQueryDebugger } from "../../utils/TailwindMediaQueryDebugger";
+import { showModal } from "../../../stores/modals";
+import { ScrollToTop } from "../footer/ScrollToTop";
 
 import { Banners } from "./Banners";
 import { FpsCounter } from "./FpsCounter";
 import { LoaderBar } from "./LoaderBar";
+import { MediaQueryDebugger } from "./MediaQueryDebugger";
 
 export function Overlays(): JSXElement {
   return (
     <>
+      <ScrollToTop />
+      <button
+        type="button"
+        id="commandLineMobileButton"
+        class="bg-main text-bg fixed bottom-8 left-8 z-99 hidden h-12 w-12 rounded-full text-center leading-12"
+        onClick={() => {
+          showModal("Commandline");
+        }}
+        tabIndex="-1"
+      >
+        <i class="fas fa-terminal"></i>
+      </button>
       <Banners />
-      <TailwindMediaQueryDebugger />
+      <MediaQueryDebugger />
       <LoaderBar />
       <FpsCounter />
     </>

diff --git a/frontend/src/ts/components/utils/TailwindMediaQueryDebugger.tsx b/frontend/src/ts/components/utils/TailwindMediaQueryDebugger.tsx
diff --git a/frontend/src/ts/controllers/chart-controller.ts b/frontend/src/ts/controllers/chart-controller.ts
@@ -1360,6 +1360,7 @@ ConfigEvent.subscribe(({ key, newValue }) => {
     updateAccuracy();
     updateAverage10();
     updateAverage100();
+    accountHistory.update();
   }
   if (key === "fontFamily") setDefaultFontFamily(newValue);
 });