From 5c95285643cf4b2a262146603ffe21a0f216b06a Mon Sep 17 00:00:00 2001
From: Christian Fehmer <fehmer@users.noreply.github.com>
Date: Mon, 13 Jul 2026 10:53:04 +0200
Subject: [PATCH 1/2] fix: google recaptcha challenge not reachable (@fehmer)
 (#8226)

may fix #8225
---
 frontend/src/ts/components/modals/ForgotPasswordModal.tsx | 2 +-
 frontend/src/ts/components/modals/GoogleSignUpModal.tsx   | 1 +
 frontend/src/ts/components/modals/UserReportModal.tsx     | 1 +
 3 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/src/ts/components/modals/ForgotPasswordModal.tsx b/frontend/src/ts/components/modals/ForgotPasswordModal.tsx
index c66b819d5d51..556e5289f367 100644
--- a/frontend/src/ts/components/modals/ForgotPasswordModal.tsx
+++ b/frontend/src/ts/components/modals/ForgotPasswordModal.tsx
@@ -34,7 +34,7 @@ export function ForgotPasswordModal() {
   }));
 
   return (
-    <AnimatedModal id="ForgotPassword" title="Forgot password">
+    <AnimatedModal id="ForgotPassword" title="Forgot password" mode="dialog">
       <form
         class="flex flex-col justify-center gap-4"
         onSubmit={(e) => {
diff --git a/frontend/src/ts/components/modals/GoogleSignUpModal.tsx b/frontend/src/ts/components/modals/GoogleSignUpModal.tsx
index d4a29b4128c0..ac49d6c37498 100644
--- a/frontend/src/ts/components/modals/GoogleSignUpModal.tsx
+++ b/frontend/src/ts/components/modals/GoogleSignUpModal.tsx
@@ -48,6 +48,7 @@ export function GoogleSignupModal() {
     <AnimatedModal
       id={modalId}
       title="Account name"
+      mode="dialog"
       afterHide={() => void afterHide()}
     >
       <p>Please enter a username before continuing</p>
diff --git a/frontend/src/ts/components/modals/UserReportModal.tsx b/frontend/src/ts/components/modals/UserReportModal.tsx
index 5260bca06ddd..1e2d6c8271d4 100644
--- a/frontend/src/ts/components/modals/UserReportModal.tsx
+++ b/frontend/src/ts/components/modals/UserReportModal.tsx
@@ -42,6 +42,7 @@ export function UserReportModal() {
     <AnimatedModal
       modalClass="max-w-3xl"
       id="UserReport"
+      mode="dialog"
       title={`Report user ${getUserToReport()?.name}`}
     >
       <p>

From f1b6029738b4843fd810fb7893d32db483bd0cd5 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <fehmer@users.noreply.github.com>
Date: Mon, 13 Jul 2026 12:42:50 +0200
Subject: [PATCH 2/2] fix(account): missing test activity calendar (@fehmer)
 (#8230)

---
 .../pages/profile/ActivityCalendar.tsx        | 65 ++++++++++---------
 .../components/pages/profile/UserProfile.tsx  |  4 +-
 2 files changed, 38 insertions(+), 31 deletions(-)

diff --git a/frontend/src/ts/components/pages/profile/ActivityCalendar.tsx b/frontend/src/ts/components/pages/profile/ActivityCalendar.tsx
index 1ecceba39c30..ba622c2504db 100644
--- a/frontend/src/ts/components/pages/profile/ActivityCalendar.tsx
+++ b/frontend/src/ts/components/pages/profile/ActivityCalendar.tsx
@@ -1,5 +1,5 @@
 import { TestActivity } from "@monkeytype/schemas/users";
-import { createSignal, JSXElement, onMount, Show } from "solid-js";
+import { createEffect, createSignal, JSXElement, Show } from "solid-js";
 
 import { get as getSeverConfiguration } from "../../../ape/server-configuration";
 import { getSnapshot, getTestActivityCalendar } from "../../../db";
@@ -24,38 +24,43 @@ export function ActivityCalendar(props: {
 
   let calendar: TestActivityCalendar | undefined;
 
-  const sync = () => {
-    if (props.testActivity === undefined || element() === undefined) {
-      calendar = undefined;
-      clearTestActivity(element()?.native);
-      return;
-    }
-
-    if (props.isAccountPage) {
-      //signals cannot store classes, use the testActivity from the snapshot for now
-      calendar = getSnapshot()?.testActivity;
-    } else {
-      calendar = new TestActivityCalendar(
-        props.testActivity.testsByDays,
-        new Date(props.testActivity.lastDay),
-        firstDayOfTheWeek,
-      );
-    }
+  createEffect(() =>
+    (() => {
+      if (
+        (!props.isAccountPage && props.testActivity === undefined) ||
+        (props.isAccountPage && getSnapshot()?.testActivity === undefined) ||
+        element() === undefined
+      ) {
+        calendar = undefined;
+        clearTestActivity(element()?.native);
+        return;
+      }
 
-    initTestActivity(
-      // oxlint-disable-next-line typescript/no-non-null-assertion
-      element()!.native,
-      calendar,
-    );
+      if (props.isAccountPage) {
+        //signals cannot store classes, use the testActivity from the snapshot for now
+        calendar = getSnapshot()?.testActivity;
+      } else {
+        const testActivity = props.testActivity as TestActivity;
+        calendar = new TestActivityCalendar(
+          testActivity.testsByDays,
+          new Date(testActivity.lastDay),
+          firstDayOfTheWeek,
+        );
+      }
 
-    if (!props.isAccountPage) {
-      // oxlint-disable-next-line typescript/no-non-null-assertion
-      const title = element()!.qsr(".top .title");
-      title.appendHtml(" last 12 months");
-    }
-  };
+      initTestActivity(
+        // oxlint-disable-next-line typescript/no-non-null-assertion
+        element()!.native,
+        calendar,
+      );
 
-  onMount(() => sync());
+      if (!props.isAccountPage) {
+        // oxlint-disable-next-line typescript/no-non-null-assertion
+        const title = element()!.qsr(".top .title");
+        title.appendHtml(" last 12 months");
+      }
+    })(),
+  );
 
   const yearOptions = () => {
     const startYear =
diff --git a/frontend/src/ts/components/pages/profile/UserProfile.tsx b/frontend/src/ts/components/pages/profile/UserProfile.tsx
index 4e8906a311da..9e66b68fa3e7 100644
--- a/frontend/src/ts/components/pages/profile/UserProfile.tsx
+++ b/frontend/src/ts/components/pages/profile/UserProfile.tsx
@@ -52,7 +52,9 @@ export function UserProfile(props: {
       </Show>
 
       <ActivityCalendar
-        testActivity={props.profile.testActivity}
+        testActivity={
+          props.isAccountPage ? undefined : props.profile.testActivity
+        }
         isAccountPage={props.isAccountPage}
       />
     </div>