From ece90183ce91c7da8ed2e672a857e92032f601e6 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <fehmer@users.noreply.github.com>
Date: Tue, 20 Jan 2026 17:59:31 +0100
Subject: [PATCH 1/7] chore: move firebase rewrite rule comment (@fehmer)
 (#7398)

---
 frontend/src/ts/controllers/page-controller.ts  | 1 -
 frontend/src/ts/controllers/route-controller.ts | 1 +
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/ts/controllers/page-controller.ts b/frontend/src/ts/controllers/page-controller.ts
index 7ad64695b2b2..112179c62dd3 100644
--- a/frontend/src/ts/controllers/page-controller.ts
+++ b/frontend/src/ts/controllers/page-controller.ts
@@ -26,7 +26,6 @@ type ChangeOptions = {
   loadingOptions?: LoadingOptions;
 };
 
-// NOTE: whenever adding a page add the pathname to the `firebase.json` rewrite rule
 const pages = {
   loading: PageLoading.page,
   test: PageTest.page,
diff --git a/frontend/src/ts/controllers/route-controller.ts b/frontend/src/ts/controllers/route-controller.ts
index d9d4295251c4..bf18c4fd983b 100644
--- a/frontend/src/ts/controllers/route-controller.ts
+++ b/frontend/src/ts/controllers/route-controller.ts
@@ -44,6 +44,7 @@ const route404: Route = {
   },
 };
 
+// NOTE: whenever adding a route add the pathname to the `firebase.json` rewrite rule
 const routes: Route[] = [
   {
     path: "/",

From d63cd5d7b56a93fc80175b7e3ddeb6da3636bff5 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Tue, 20 Jan 2026 17:54:54 +0100
Subject: [PATCH 2/7] fix: discord linking broken

---
 frontend/firebase.json | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/frontend/firebase.json b/frontend/firebase.json
index 4b4bc828ed56..d7603d4c7da8 100644
--- a/frontend/firebase.json
+++ b/frontend/firebase.json
@@ -6,6 +6,10 @@
       {
         "source": "/@(test|settings|account|about|login|profile|friends|account-settings|leaderboards){,/**}",
         "destination": "/index.html"
+      },
+      {
+        "source": "/verify",
+        "destination": "/index.html"
       }
     ],
     "cleanUrls": true,

From 54df529c5fda5dd6ba60fb5b7be1ada0fe86a7c0 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Tue, 20 Jan 2026 18:50:22 +0100
Subject: [PATCH 3/7] fix: misaligned friends button

---
 frontend/src/styles/nav.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/styles/nav.scss b/frontend/src/styles/nav.scss
index d9c7be3d1bd2..91c58ceb8ceb 100644
--- a/frontend/src/styles/nav.scss
+++ b/frontend/src/styles/nav.scss
@@ -197,6 +197,7 @@ nav {
 
         a,
         button {
+          justify-items: start;
           justify-content: left;
           padding-left: 0;
           border-radius: 0;

From 0599f5fd635d561ce55b3037240b92b207941619 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Tue, 20 Jan 2026 19:37:22 +0100
Subject: [PATCH 4/7] fix: sellout ad positioning on the about page

---
 .../src/ts/components/pages/AboutPage.tsx     | 20 +++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/frontend/src/ts/components/pages/AboutPage.tsx b/frontend/src/ts/components/pages/AboutPage.tsx
index 9edbdd89793a..0c97c811b2c4 100644
--- a/frontend/src/ts/components/pages/AboutPage.tsx
+++ b/frontend/src/ts/components/pages/AboutPage.tsx
@@ -224,13 +224,19 @@ export function AboutPage(): JSXElement {
         </dl>
       </section>
       <Show when={getAds() === "sellout"}>
-        <div id="ad-about-1-wrapper" class="ad full-width advertisement ad-h">
+        <div
+          id="ad-about-1-wrapper"
+          class="ad full-width advertisement ad-h place-self-center"
+        >
           <div class="icon">
             <i class="fas fa-ad"></i>
           </div>
           <div id="ad-about-1"></div>
         </div>
-        <div id="ad-about-1-small-wrapper" class="ad advertisement ad-h-s">
+        <div
+          id="ad-about-1-small-wrapper"
+          class="ad advertisement ad-h-s place-self-center"
+        >
           <div class="icon small">
             <i class="fas fa-ad"></i>
           </div>
@@ -351,13 +357,19 @@ export function AboutPage(): JSXElement {
         </p>
       </section>
       <Show when={getAds() === "sellout"}>
-        <div id="ad-about-2-wrapper" class="ad full-width advertisement ad-h">
+        <div
+          id="ad-about-2-wrapper"
+          class="ad full-width advertisement ad-h place-self-center"
+        >
           <div class="icon">
             <i class="fas fa-ad"></i>
           </div>
           <div id="ad-about-2"></div>
         </div>
-        <div id="ad-about-2-small-wrapper" class="ad advertisement ad-h-s">
+        <div
+          id="ad-about-2-small-wrapper"
+          class="ad advertisement ad-h-s place-self-center"
+        >
           <div class="icon small">
             <i class="fas fa-ad"></i>
           </div>

From 7ddaa4c49cf3b9939e33638e26f034240534e1ea Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Tue, 20 Jan 2026 20:26:00 +0100
Subject: [PATCH 5/7] fix: css layers in the wrong order in prod

---
 frontend/src/html/head.html    | 27 +++++++++++++++++++--------
 frontend/src/styles/index.scss |  8 --------
 2 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/frontend/src/html/head.html b/frontend/src/html/head.html
index ac53517ccbb4..89607f07f79f 100644
--- a/frontend/src/html/head.html
+++ b/frontend/src/html/head.html
@@ -106,14 +106,25 @@
   <meta name="twitter:card" content="summary_large_image" />
   <meta name="darkreader-lock" />
   <meta http-equiv="Cache-Control" content="no-store" />
-
-  <!-- 
-    order of the style imports is not important EXCEPT for index
-    index has to be first because it contains the order of css layers
-  -->
-  <link rel="stylesheet" href="styles/index.scss" />
-  <link rel="stylesheet" href="styles/tailwind.css" />
-  <link rel="stylesheet" href="styles/vendor.scss" />
+  <style>
+    /* 
+      Layer order NEEDS to be here and one layer per line.
+      This is because vite changes the order of the css imports,
+      and the layer definition needs to be at the very very top, otherwise things break.
+    */
+    @layer normalize;
+    @layer theme;
+    @layer base;
+    @layer components;
+    @layer properties;
+    @layer vendor;
+    @layer custom-styles;
+    @layer hidden;
+    @layer utilities;
+  </style>
+  <link rel="stylesheet" class="testtesttest" href="styles/index.scss" />
+  <link rel="stylesheet" class="testtest" href="styles/tailwind.css" />
+  <link rel="stylesheet" class="test" href="styles/vendor.scss" />
 
   <style class="customFont" type="text/css"></style>
 </head>
diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss
index c23d0df94ce1..6a81fb596d29 100644
--- a/frontend/src/styles/index.scss
+++ b/frontend/src/styles/index.scss
@@ -1,11 +1,3 @@
-// layer order
-@layer normalize; /* Normalize stuff */
-@layer theme, base, components, properties; /* Tailwind stuff */
-@layer vendor; /* Vendor files */
-@layer custom-styles; /* scss files */
-@layer hidden; /* custom hidden layer */
-@layer utilities; /* Tailwind again, make them override scss files */
-
 @layer hidden {
   // custom layer to hide elements without using !important
   // (as long as this layer is higher than custom-styles)

From 54dff131e37311b9732567e5231c3014ca2a48b6 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Tue, 20 Jan 2026 20:30:04 +0100
Subject: [PATCH 6/7] fix: incorrect hover color

!nuf
---
 frontend/src/ts/components/layout/footer/ScrollToTop.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/ts/components/layout/footer/ScrollToTop.tsx b/frontend/src/ts/components/layout/footer/ScrollToTop.tsx
index 3e511027f564..be6195b225e5 100644
--- a/frontend/src/ts/components/layout/footer/ScrollToTop.tsx
+++ b/frontend/src/ts/components/layout/footer/ScrollToTop.tsx
@@ -24,7 +24,7 @@ export function ScrollToTop(): JSXElement {
   return (
     <div class="content-grid ScrollToTop pointer-events-none fixed top-0 left-0 z-999999 h-full w-full">
       <button
-        class="breakout bg-sub-alt text-sub ring-bg hover:text-bg pointer-events-auto mb-8 grid h-16 w-16 place-self-end rounded-full text-[2rem] ring-8"
+        class="breakout bg-sub-alt text-sub ring-bg hover:text-bg hover:bg-text pointer-events-auto mb-8 grid h-16 w-16 place-self-end rounded-full text-[2rem] ring-8"
         style={{
           "grid-column": "content-end/breakout-end",
         }}

From dfe74968fdc5b8c95dbaa2b915c75f8969edbee9 Mon Sep 17 00:00:00 2001
From: Jack <jack@monkeytype.com>
Date: Tue, 20 Jan 2026 23:36:21 +0100
Subject: [PATCH 7/7] refactor: rework solid component mounting (@miodec)
 (#7402)

---
 frontend/src/html/popups.html                 |   2 -
 frontend/src/index.html                       |  14 +-
 frontend/src/ts/components/mount.tsx          |  13 +-
 .../src/ts/components/pages/AboutPage.tsx     | 703 +++++++++---------
 frontend/src/ts/utils/misc.ts                 |   7 +-
 5 files changed, 371 insertions(+), 368 deletions(-)

diff --git a/frontend/src/html/popups.html b/frontend/src/html/popups.html
index f67aa61a004f..15fc0f73b804 100644
--- a/frontend/src/html/popups.html
+++ b/frontend/src/html/popups.html
@@ -1,5 +1,3 @@
-<Modals />
-
 <dialog id="registerCaptchaModal" class="modalWrapper hidden">
   <div class="modal">
     <div class="g-recaptcha"></div>
diff --git a/frontend/src/index.html b/frontend/src/index.html
index fb4a46686c4e..b4105b17e56a 100644
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@@ -3,13 +3,13 @@
   <load src="html/head.html" />
 
   <body>
-    <Overlays />
+    <mount data-component="overlays"></mount>
     <div id="mediaQueryDebug"></div>
     <load src="html/warnings.html" />
     <div class="customBackground"></div>
 
     <!-- theme component adds to the head element, don't move to head.html -->
-    <Theme />
+    <mount data-component="theme"></mount>
     <div id="notificationCenter">
       <div class="clearAll button hidden">
         <i class="fas fa-times"></i>
@@ -22,6 +22,7 @@
         <div class="bar"></div>
       </div>
     </div>
+    <mount data-component="modals" id="solidmodals"></mount>
     <div id="popups">
       <load src="html/popups.html" />
     </div>
@@ -38,11 +39,8 @@
           <div id="ad-vertical-right"></div>
         </div>
         <load src="html/pages/loading.html" />
-        <div
-          class="page pageAbout full-width content-grid grid hidden gap-8"
-          id="pageAbout"
-        >
-          <AboutPage />
+        <div class="page pageAbout full-width hidden" id="pageAbout">
+          <mount data-component="aboutpage"></mount>
         </div>
         <load src="html/pages/settings.html" />
         <load src="html/pages/login.html" />
@@ -54,7 +52,7 @@
         <load src="html/pages/friends.html" />
         <load src="html/pages/leaderboards.html" />
       </main>
-      <footer />
+      <mount data-component="footer"></mount>
       <div
         id="ad-footer-wrapper"
         class="full-width ad advertisement ad-h focus"
diff --git a/frontend/src/ts/components/mount.tsx b/frontend/src/ts/components/mount.tsx
index 7ece1520efe5..adde13f61edb 100644
--- a/frontend/src/ts/components/mount.tsx
+++ b/frontend/src/ts/components/mount.tsx
@@ -10,22 +10,21 @@ import { Modals } from "./modals/Modals";
 import { AboutPage } from "./pages/AboutPage";
 
 const components: Record<string, () => JSXElement> = {
-  Footer: () => <Footer />,
-  Modals: () => <Modals />,
-  AboutPage: () => <AboutPage />,
-  Overlays: () => <Overlays />,
-  Theme: () => <Theme />,
+  footer: () => <Footer />,
+  aboutpage: () => <AboutPage />,
+  modals: () => <Modals />,
+  overlays: () => <Overlays />,
+  theme: () => <Theme />,
 };
 
 function mountToMountpoint(name: string, component: () => JSXElement): void {
   for (const mountPoint of qsa(name)) {
     render(() => component(), mountPoint.native);
-    mountPoint.native.replaceWith(...mountPoint.native.children);
   }
 }
 
 export function mountComponents(): void {
   for (const [query, component] of Object.entries(components)) {
-    mountToMountpoint(query, component);
+    mountToMountpoint(`mount[data-component=${query}]`, component);
   }
 }
diff --git a/frontend/src/ts/components/pages/AboutPage.tsx b/frontend/src/ts/components/pages/AboutPage.tsx
index 0c97c811b2c4..30b54653abf3 100644
--- a/frontend/src/ts/components/pages/AboutPage.tsx
+++ b/frontend/src/ts/components/pages/AboutPage.tsx
@@ -48,372 +48,377 @@ export function AboutPage(): JSXElement {
 
   return (
     <Show when={isOpen}>
-      <section class="text-sub text-center">
-        Created with love by Miodec.
-        <br />
-        <a href="#supporters_title">Supported</a> and{" "}
-        <a href="#contributors_title">expanded</a> by many awesome people.
-        <br />
-        Launched on 15th of May, 2020.
-      </section>
-      <section>
-        <AsyncContent
-          alwaysShowContent
-          resource={typingStats}
-          errorMessage="Failed to get global typing stats"
-        >
-          {(data) => (
-            <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
-              <For
-                each={
-                  [
-                    ["total tests started", data?.testsStarted],
-                    ["total typing time", data?.timeTyping],
-                    ["total tests completed", data?.testsCompleted],
-                  ] as const
-                }
-              >
-                {([title, data]) => (
-                  <div class="text-center">
-                    <div class="text-sub">{title}</div>
-                    <div class="text-5xl">{data?.text ?? "-"}</div>
-                    <div class="text-xl">{data?.subText ?? "-"}</div>
-                  </div>
-                )}
-              </For>
-            </div>
-          )}
-        </AsyncContent>
-      </section>
-      <section class="h-48 w-full">
-        <AsyncContent
-          alwaysShowContent
-          resource={speedHistogram}
-          errorMessage="Failed to get global speed stats for histogram"
-        >
-          {(data) => (
-            <ChartJs
-              type="bar"
-              data={{
-                labels: data?.labels ?? [],
-                datasets: [
-                  {
-                    yAxisID: "count",
-                    label: "Users",
-                    data: data?.data ?? [],
-                  },
-                ],
-              }}
-              options={{
-                responsive: true,
-                maintainAspectRatio: false,
-                hover: {
-                  mode: "nearest",
-                  intersect: false,
-                },
-                scales: {
-                  x: {
-                    axis: "x",
-                    bounds: "ticks",
-                    display: true,
-                    title: {
-                      display: false,
-                      text: "Bucket",
+      <div class="content-grid grid gap-8">
+        <section class="text-sub text-center">
+          Created with love by Miodec.
+          <br />
+          <a href="#supporters_title">Supported</a> and{" "}
+          <a href="#contributors_title">expanded</a> by many awesome people.
+          <br />
+          Launched on 15th of May, 2020.
+        </section>
+        <section>
+          <AsyncContent
+            alwaysShowContent
+            resource={typingStats}
+            errorMessage="Failed to get global typing stats"
+          >
+            {(data) => (
+              <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
+                <For
+                  each={
+                    [
+                      ["total tests started", data?.testsStarted],
+                      ["total typing time", data?.timeTyping],
+                      ["total tests completed", data?.testsCompleted],
+                    ] as const
+                  }
+                >
+                  {([title, data]) => (
+                    <div class="text-center">
+                      <div class="text-sub">{title}</div>
+                      <div class="text-5xl">{data?.text ?? "-"}</div>
+                      <div class="text-xl">{data?.subText ?? "-"}</div>
+                    </div>
+                  )}
+                </For>
+              </div>
+            )}
+          </AsyncContent>
+        </section>
+        <section class="h-48 w-full">
+          <AsyncContent
+            alwaysShowContent
+            resource={speedHistogram}
+            errorMessage="Failed to get global speed stats for histogram"
+          >
+            {(data) => (
+              <ChartJs
+                type="bar"
+                data={{
+                  labels: data?.labels ?? [],
+                  datasets: [
+                    {
+                      yAxisID: "count",
+                      label: "Users",
+                      data: data?.data ?? [],
                     },
-                    offset: true,
+                  ],
+                }}
+                options={{
+                  responsive: true,
+                  maintainAspectRatio: false,
+                  hover: {
+                    mode: "nearest",
+                    intersect: false,
                   },
-                  count: {
-                    axis: "y",
-                    beginAtZero: true,
-                    min: 0,
-                    ticks: {
-                      autoSkip: true,
-                      autoSkipPadding: 20,
-                      stepSize: 10,
+                  scales: {
+                    x: {
+                      axis: "x",
+                      bounds: "ticks",
+                      display: true,
+                      title: {
+                        display: false,
+                        text: "Bucket",
+                      },
+                      offset: true,
                     },
-                    display: true,
-                    title: {
+                    count: {
+                      axis: "y",
+                      beginAtZero: true,
+                      min: 0,
+                      ticks: {
+                        autoSkip: true,
+                        autoSkipPadding: 20,
+                        stepSize: 10,
+                      },
                       display: true,
-                      text: "Users",
+                      title: {
+                        display: true,
+                        text: "Users",
+                      },
                     },
                   },
-                },
-                plugins: {
-                  annotation: {
-                    annotations: [],
-                  },
-                  tooltip: {
-                    animation: { duration: 250 },
-                    intersect: false,
-                    mode: "index",
+                  plugins: {
+                    annotation: {
+                      annotations: [],
+                    },
+                    tooltip: {
+                      animation: { duration: 250 },
+                      intersect: false,
+                      mode: "index",
+                    },
                   },
-                },
-              }}
-            />
-          )}
-        </AsyncContent>
-        <div class="text-sub text-right text-xs">
-          distribution of time 60 leaderboard results (wpm)
-        </div>
-      </section>
-      <section>
-        <H2 icon="fas fa-info-circle" text="about" />
-        <p>
-          Monkeytype is a minimalistic and customizable typing test. It features
-          many test modes, an account system to save your typing speed history,
-          and user-configurable features such as themes, sounds, a smooth caret,
-          and more. Monkeytype attempts to emulate the experience of natural
-          keyboard typing during a typing test, by unobtrusively presenting the
-          text prompts and displaying typed characters in-place, providing
-          straightforward, real-time feedback on typos, speed, and accuracy.
-          <br />
-          <br />
-          Test yourself in various modes, track your progress and improve your
-          speed.
-        </p>
-      </section>
-      <section>
-        <H3 icon="fas fa-align-left" text="word set" />
-        <p>
-          By default, this website uses the most common 200 words in the English
-          language to generate its tests. You can change to an expanded set
-          (1000 most common words) in the options, or change the language
-          entirely.
-        </p>
-      </section>
-      <section>
-        <H3 icon="fas fa-keyboard" text="keybinds" />
-        <p>
-          You can use <kbd>tab</kbd> and <kbd>enter</kbd> (or just{" "}
-          <kbd>tab</kbd> if you have quick tab mode enabled) to restart the
-          typing test. Open the command line by pressing <kbd>ctrl/cmd</kbd> +{" "}
-          <kbd>shift</kbd> + <kbd>p</kbd> or <kbd>esc</kbd> - there you can
-          access all the functionality you need without touching your mouse.
-        </p>
-      </section>
-      <section>
-        <H3 icon="fas fa-list-ol" text="stats" />
-        <dl class="grid">
-          <dt class="col-1 mr-4">wpm</dt>
-          <dd class="col-2">
-            - total number of characters in the correctly typed words (including
-            spaces), divided by 5 and normalised to 60 seconds.
-          </dd>
+                }}
+              />
+            )}
+          </AsyncContent>
+          <div class="text-sub text-right text-xs">
+            distribution of time 60 leaderboard results (wpm)
+          </div>
+        </section>
+        <section>
+          <H2 icon="fas fa-info-circle" text="about" />
+          <p>
+            Monkeytype is a minimalistic and customizable typing test. It
+            features many test modes, an account system to save your typing
+            speed history, and user-configurable features such as themes,
+            sounds, a smooth caret, and more. Monkeytype attempts to emulate the
+            experience of natural keyboard typing during a typing test, by
+            unobtrusively presenting the text prompts and displaying typed
+            characters in-place, providing straightforward, real-time feedback
+            on typos, speed, and accuracy.
+            <br />
+            <br />
+            Test yourself in various modes, track your progress and improve your
+            speed.
+          </p>
+        </section>
+        <section>
+          <H3 icon="fas fa-align-left" text="word set" />
+          <p>
+            By default, this website uses the most common 200 words in the
+            English language to generate its tests. You can change to an
+            expanded set (1000 most common words) in the options, or change the
+            language entirely.
+          </p>
+        </section>
+        <section>
+          <H3 icon="fas fa-keyboard" text="keybinds" />
+          <p>
+            You can use <kbd>tab</kbd> and <kbd>enter</kbd> (or just{" "}
+            <kbd>tab</kbd> if you have quick tab mode enabled) to restart the
+            typing test. Open the command line by pressing <kbd>ctrl/cmd</kbd> +{" "}
+            <kbd>shift</kbd> + <kbd>p</kbd> or <kbd>esc</kbd> - there you can
+            access all the functionality you need without touching your mouse.
+          </p>
+        </section>
+        <section>
+          <H3 icon="fas fa-list-ol" text="stats" />
+          <dl class="grid">
+            <dt class="col-1 mr-4">wpm</dt>
+            <dd class="col-2">
+              - total number of characters in the correctly typed words
+              (including spaces), divided by 5 and normalised to 60 seconds.
+            </dd>
 
-          <dt class="col-1 mr-4">raw wpm</dt>
-          <dd class="col-2">
-            {" "}
-            - calculated just like wpm, but also includes incorrect words.
-          </dd>
+            <dt class="col-1 mr-4">raw wpm</dt>
+            <dd class="col-2">
+              {" "}
+              - calculated just like wpm, but also includes incorrect words.
+            </dd>
 
-          <dt class="col-1 mr-4">acc</dt>
-          <dd class="col-2"> - percentage of correctly pressed keys.</dd>
+            <dt class="col-1 mr-4">acc</dt>
+            <dd class="col-2"> - percentage of correctly pressed keys.</dd>
 
-          <dt class="col-1 mr-4">char</dt>
-          <dd class="col-2">
-            - correct characters / incorrect characters. Calculated after the
-            test has ended.
-          </dd>
+            <dt class="col-1 mr-4">char</dt>
+            <dd class="col-2">
+              - correct characters / incorrect characters. Calculated after the
+              test has ended.
+            </dd>
 
-          <dt class="col-1 mr-4">consistency</dt>
-          <dd class="col-2">
-            - based on the variance of your raw wpm. Closer to 100% is better.
-            Calculated using the coefficient of variation of raw wpm and mapped
-            onto a scale from 0 to 100.
-          </dd>
-        </dl>
-      </section>
-      <Show when={getAds() === "sellout"}>
-        <div
-          id="ad-about-1-wrapper"
-          class="ad full-width advertisement ad-h place-self-center"
-        >
-          <div class="icon">
-            <i class="fas fa-ad"></i>
+            <dt class="col-1 mr-4">consistency</dt>
+            <dd class="col-2">
+              - based on the variance of your raw wpm. Closer to 100% is better.
+              Calculated using the coefficient of variation of raw wpm and
+              mapped onto a scale from 0 to 100.
+            </dd>
+          </dl>
+        </section>
+        <Show when={getAds() === "sellout"}>
+          <div
+            id="ad-about-1-wrapper"
+            class="ad full-width advertisement ad-h place-self-center"
+          >
+            <div class="icon">
+              <i class="fas fa-ad"></i>
+            </div>
+            <div id="ad-about-1"></div>
           </div>
-          <div id="ad-about-1"></div>
-        </div>
-        <div
-          id="ad-about-1-small-wrapper"
-          class="ad advertisement ad-h-s place-self-center"
-        >
-          <div class="icon small">
-            <i class="fas fa-ad"></i>
+          <div
+            id="ad-about-1-small-wrapper"
+            class="ad advertisement ad-h-s place-self-center"
+          >
+            <div class="icon small">
+              <i class="fas fa-ad"></i>
+            </div>
+            <div id="ad-about-1-small"></div>
           </div>
-          <div id="ad-about-1-small"></div>
-        </div>
-      </Show>
-      <section>
-        <H3 icon="fas fa-chart-area" text="results screen" />
-        <p>
-          After completing a test you will be able to see your wpm, raw wpm,
-          accuracy, character stats, test length, leaderboards info and test
-          info (you can hover over some values to get floating point numbers).
-          You can also see a graph of your wpm and raw over the duration of the
-          test. Remember that the wpm line is a global average, while the raw
-          wpm line is a local, momentary value (meaning if you stop, the value
-          is 0).
-        </p>
-      </section>
-      <section>
-        <H3 icon="fas fa-bug" text="bug report or feature request" />
-        <p>
-          If you encounter a bug, or have a feature request - join the Discord
-          server, send me an email, a direct message on Twitter or create an
-          issue on GitHub.
-        </p>
-      </section>
-      <div></div>
-      <section>
-        <H2 icon="fas fa-life-ring" text="support" />
-        <p>
-          Thanks to everyone who has supported this project. It would not be
-          possible without you and your continued support.
-        </p>
-        <div class="mt-4 text-xl">
-          <Button
-            icon="fas fa-donate"
-            onClick={() => showModal("Support")}
-            text="support"
-            class="w-full p-8"
-          />
-        </div>
-      </section>
-      <div></div>
-      <section>
-        <H2 icon="fas fa-envelope" text="contact" />
-        <p>
-          If you encounter a bug, have a feature request or just want to say hi
-          - here are the different ways you can contact me directly.
-        </p>
-        <div class="mt-4 grid w-full grid-cols-1 gap-4 text-xl sm:grid-cols-2 lg:grid-cols-4">
-          <Button
-            text="mail"
-            icon="fas fa-envelope"
-            onClick={() => showModal("Contact")}
-            class="w-full p-8"
-          />
-          <Button
-            text="twitter"
-            icon="fab fa-twitter"
-            href="https://x.com/monkeytype"
-            class="w-full p-8"
-          />
-          <Button
-            text="discord"
-            icon="fab fa-discord"
-            href="https://discord.gg/monkeytype"
-            class="w-full p-8"
-          />
-          <Button
-            text="github"
-            icon="fab fa-github"
-            href="https://github.com/monkeytypegame/monkeytype"
-            class="w-full p-8"
-          />
-        </div>
-      </section>
-      <div></div>
-      <section>
-        <H2 icon="fas fa-users" text="credits" />
-        <p>
-          <Button
-            type="text"
-            text="Montydrei"
-            href="https://www.reddit.com/user/montydrei"
-            class="p-0 pt-2 pr-2 pb-2"
-          />
-          for the name suggestion
-        </p>
-        <p>
-          <Button
-            type="text"
-            text="Everyone"
-            href="https://www.reddit.com/r/MechanicalKeyboards/comments/gc6wx3/experimenting_with_a_completely_new_type_of/"
-            class="p-0 pt-2 pr-2 pb-2"
-          />
-          who provided valuable feedback on the original reddit post for the
-          prototype of this website
-        </p>
-        <p>
-          <Button
-            type="text"
-            text="Supporters"
-            href="#supporters_title"
-            class="p-0 pt-2 pr-2 pb-2"
-          />
-          who helped financially by donating, enabling optional ads or buying
-          merch
-        </p>
-        <p>
-          <Button
-            type="text"
-            text="Contributors"
-            href="https://github.com/monkeytypegame/monkeytype/graphs/contributors"
-            class="p-0 pt-2 pr-2 pb-2"
-          />
-          on GitHub that have helped with implementing various features, adding
-          themes and more
-        </p>
-      </section>
-      <Show when={getAds() === "sellout"}>
-        <div
-          id="ad-about-2-wrapper"
-          class="ad full-width advertisement ad-h place-self-center"
-        >
-          <div class="icon">
-            <i class="fas fa-ad"></i>
+        </Show>
+        <section>
+          <H3 icon="fas fa-chart-area" text="results screen" />
+          <p>
+            After completing a test you will be able to see your wpm, raw wpm,
+            accuracy, character stats, test length, leaderboards info and test
+            info (you can hover over some values to get floating point numbers).
+            You can also see a graph of your wpm and raw over the duration of
+            the test. Remember that the wpm line is a global average, while the
+            raw wpm line is a local, momentary value (meaning if you stop, the
+            value is 0).
+          </p>
+        </section>
+        <section>
+          <H3 icon="fas fa-bug" text="bug report or feature request" />
+          <p>
+            If you encounter a bug, or have a feature request - join the Discord
+            server, send me an email, a direct message on Twitter or create an
+            issue on GitHub.
+          </p>
+        </section>
+        <div></div>
+        <section>
+          <H2 icon="fas fa-life-ring" text="support" />
+          <p>
+            Thanks to everyone who has supported this project. It would not be
+            possible without you and your continued support.
+          </p>
+          <div class="mt-4 text-xl">
+            <Button
+              icon="fas fa-donate"
+              onClick={() => showModal("Support")}
+              text="support"
+              class="w-full p-8"
+            />
           </div>
-          <div id="ad-about-2"></div>
-        </div>
-        <div
-          id="ad-about-2-small-wrapper"
-          class="ad advertisement ad-h-s place-self-center"
-        >
-          <div class="icon small">
-            <i class="fas fa-ad"></i>
+        </section>
+        <div></div>
+        <section>
+          <H2 icon="fas fa-envelope" text="contact" />
+          <p>
+            If you encounter a bug, have a feature request or just want to say
+            hi - here are the different ways you can contact me directly.
+          </p>
+          <div class="mt-4 grid w-full grid-cols-1 gap-4 text-xl sm:grid-cols-2 lg:grid-cols-4">
+            <Button
+              text="mail"
+              icon="fas fa-envelope"
+              onClick={() => showModal("Contact")}
+              class="w-full p-8"
+            />
+            <Button
+              text="twitter"
+              icon="fab fa-twitter"
+              href="https://x.com/monkeytype"
+              class="w-full p-8"
+            />
+            <Button
+              text="discord"
+              icon="fab fa-discord"
+              href="https://discord.gg/monkeytype"
+              class="w-full p-8"
+            />
+            <Button
+              text="github"
+              icon="fab fa-github"
+              href="https://github.com/monkeytypegame/monkeytype"
+              class="w-full p-8"
+            />
           </div>
-          <div id="ad-about-2-small"></div>
-        </div>
-      </Show>
-      <div></div>
-      <section>
-        <H2 icon="fas fa-hand-holding-usd" text="top supporters" />
-        <AsyncContent
-          resource={supporters}
-          errorMessage="Failed to get supporters"
-        >
-          {(data) => (
-            <div
-              class="grid"
-              style={{
-                "grid-template-columns": "repeat(auto-fill, minmax(13em, 1fr))",
-              }}
-            >
-              <For each={data}>{(name) => <div>{name}</div>}</For>
+        </section>
+        <div></div>
+        <section>
+          <H2 icon="fas fa-users" text="credits" />
+          <p>
+            <Button
+              type="text"
+              text="Montydrei"
+              href="https://www.reddit.com/user/montydrei"
+              class="p-0 pt-2 pr-2 pb-2"
+            />
+            for the name suggestion
+          </p>
+          <p>
+            <Button
+              type="text"
+              text="Everyone"
+              href="https://www.reddit.com/r/MechanicalKeyboards/comments/gc6wx3/experimenting_with_a_completely_new_type_of/"
+              class="p-0 pt-2 pr-2 pb-2"
+            />
+            who provided valuable feedback on the original reddit post for the
+            prototype of this website
+          </p>
+          <p>
+            <Button
+              type="text"
+              text="Supporters"
+              href="#supporters_title"
+              class="p-0 pt-2 pr-2 pb-2"
+            />
+            who helped financially by donating, enabling optional ads or buying
+            merch
+          </p>
+          <p>
+            <Button
+              type="text"
+              text="Contributors"
+              href="https://github.com/monkeytypegame/monkeytype/graphs/contributors"
+              class="p-0 pt-2 pr-2 pb-2"
+            />
+            on GitHub that have helped with implementing various features,
+            adding themes and more
+          </p>
+        </section>
+        <Show when={getAds() === "sellout"}>
+          <div
+            id="ad-about-2-wrapper"
+            class="ad full-width advertisement ad-h place-self-center"
+          >
+            <div class="icon">
+              <i class="fas fa-ad"></i>
             </div>
-          )}
-        </AsyncContent>
-      </section>
-      <div></div>
-      <section>
-        <H2 icon="fas fa-code-branch" text="contributors" />
-        <AsyncContent
-          resource={contributors}
-          errorMessage="Failed to get contributors"
-        >
-          {(data) => (
-            <div
-              class="grid"
-              style={{
-                "grid-template-columns": "repeat(auto-fill, minmax(13em, 1fr))",
-              }}
-            >
-              <For each={data}>{(name) => <div>{name}</div>}</For>
+            <div id="ad-about-2"></div>
+          </div>
+          <div
+            id="ad-about-2-small-wrapper"
+            class="ad advertisement ad-h-s place-self-center"
+          >
+            <div class="icon small">
+              <i class="fas fa-ad"></i>
             </div>
-          )}
-        </AsyncContent>
-      </section>
+            <div id="ad-about-2-small"></div>
+          </div>
+        </Show>
+        <div></div>
+        <section>
+          <H2 icon="fas fa-hand-holding-usd" text="top supporters" />
+          <AsyncContent
+            resource={supporters}
+            errorMessage="Failed to get supporters"
+          >
+            {(data) => (
+              <div
+                class="grid"
+                style={{
+                  "grid-template-columns":
+                    "repeat(auto-fill, minmax(13em, 1fr))",
+                }}
+              >
+                <For each={data}>{(name) => <div>{name}</div>}</For>
+              </div>
+            )}
+          </AsyncContent>
+        </section>
+        <div></div>
+        <section>
+          <H2 icon="fas fa-code-branch" text="contributors" />
+          <AsyncContent
+            resource={contributors}
+            errorMessage="Failed to get contributors"
+          >
+            {(data) => (
+              <div
+                class="grid"
+                style={{
+                  "grid-template-columns":
+                    "repeat(auto-fill, minmax(13em, 1fr))",
+                }}
+              >
+                <For each={data}>{(name) => <div>{name}</div>}</For>
+              </div>
+            )}
+          </AsyncContent>
+        </section>
+      </div>
     </Show>
   );
 }
diff --git a/frontend/src/ts/utils/misc.ts b/frontend/src/ts/utils/misc.ts
index 27715d1a6ceb..102d85279395 100644
--- a/frontend/src/ts/utils/misc.ts
+++ b/frontend/src/ts/utils/misc.ts
@@ -389,12 +389,15 @@ export function isElementVisible(query: string): boolean {
 }
 
 export function isPopupVisible(popupId: string): boolean {
-  return isElementVisible(`#popups #${popupId}`);
+  return (
+    isElementVisible(`#popups #${popupId}`) ||
+    isElementVisible(`#solidmodals #${popupId}`)
+  );
 }
 
 export function isAnyPopupVisible(): boolean {
   const popups = document.querySelectorAll(
-    "#popups .popupWrapper, #popups .backdrop, #popups .modalWrapper",
+    "#popups .popupWrapper, #popups .backdrop, #popups .modalWrapper, #solidmodals dialog",
   );
   let popupVisible = false;
   for (const popup of popups) {