diff --git a/biome.json b/biome.json
index 17393dfd1..9dc190833 100644
--- a/biome.json
+++ b/biome.json
@@ -46,7 +46,8 @@
         "noUnusedTemplateLiteral": "error",
         "useNumberNamespace": "error",
         "noInferrableTypes": "error",
-        "noUselessElse": "error"
+        "noUselessElse": "error",
+        "noDescendingSpecificity": "off"
       }
     }
   }
diff --git a/frontend/src/components/AccountDeleteButton.tsx b/frontend/src/components/AccountDeleteButton.tsx
index da39f522e..6f1b80bec 100644
--- a/frontend/src/components/AccountDeleteButton.tsx
+++ b/frontend/src/components/AccountDeleteButton.tsx
@@ -70,7 +70,10 @@ const AccountDeleteButton: React.FC<Props> = (props) => {
     mutationFn: ({
       password,
       hsErase,
-    }: { password: string | null; hsErase: boolean }) =>
+    }: {
+      password: string | null;
+      hsErase: boolean;
+    }) =>
       graphqlRequest({
         query: MUTATION,
         variables: { password, hsErase },
diff --git a/frontend/src/components/ButtonLink.tsx b/frontend/src/components/ButtonLink.tsx
index d8dc8de72..57362612d 100644
--- a/frontend/src/components/ButtonLink.tsx
+++ b/frontend/src/components/ButtonLink.tsx
@@ -7,7 +7,7 @@
 import { createLink } from "@tanstack/react-router";
 import { Button } from "@vector-im/compound-web";
 import cx from "classnames";
-import { type PropsWithChildren, forwardRef } from "react";
+import { forwardRef, type PropsWithChildren } from "react";
 import styles from "./ButtonLink.module.css";
 
 type Props = {
diff --git a/frontend/src/components/Dialog/Dialog.module.css b/frontend/src/components/Dialog/Dialog.module.css
index cd5f1840a..eceb0c3bc 100644
--- a/frontend/src/components/Dialog/Dialog.module.css
+++ b/frontend/src/components/Dialog/Dialog.module.css
@@ -95,6 +95,7 @@
 
   /* Cap the block size */
   max-block-size: calc(100vh - var(--cpd-space-4x));
+  /* biome-ignore lint/suspicious/noDuplicateProperties: this isn't a real duplicate */
   max-block-size: calc(100svh - var(--cpd-space-4x));
 
   /* Drawer comes in the Android style by default */
diff --git a/frontend/src/components/Dialog/Dialog.tsx b/frontend/src/components/Dialog/Dialog.tsx
index fd354c872..45dba57a2 100644
--- a/frontend/src/components/Dialog/Dialog.tsx
+++ b/frontend/src/components/Dialog/Dialog.tsx
@@ -102,4 +102,4 @@ export const Title: React.FC<PropsWithChildren> = ({ children }) => (
   <DialogTitle className={styles.title}>{children}</DialogTitle>
 );
 
-export { Description, Close } from "@radix-ui/react-dialog";
+export { Close, Description } from "@radix-ui/react-dialog";
diff --git a/frontend/src/components/Dialog/index.ts b/frontend/src/components/Dialog/index.ts
index db7bc83d5..73467a18a 100644
--- a/frontend/src/components/Dialog/index.ts
+++ b/frontend/src/components/Dialog/index.ts
@@ -4,4 +4,4 @@
 // SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 // Please see LICENSE files in the repository root for full details.
 
-export { Close, Dialog, Title, Description } from "./Dialog";
+export { Close, Description, Dialog, Title } from "./Dialog";
diff --git a/frontend/src/components/Layout/Layout.module.css b/frontend/src/components/Layout/Layout.module.css
index ca51ed2ff..794f16783 100644
--- a/frontend/src/components/Layout/Layout.module.css
+++ b/frontend/src/components/Layout/Layout.module.css
@@ -16,6 +16,7 @@
 
   /* Fallback for browsers that do not support 100svh */
   min-height: 100vh;
+  /* biome-ignore lint/suspicious/noDuplicateProperties: this isn't a real duplicate */
   min-height: 100svh;
 
   margin: 0 auto;
diff --git a/frontend/src/components/LoadingScreen/LoadingScreen.module.css b/frontend/src/components/LoadingScreen/LoadingScreen.module.css
index 4c2f04354..5963f9ecc 100644
--- a/frontend/src/components/LoadingScreen/LoadingScreen.module.css
+++ b/frontend/src/components/LoadingScreen/LoadingScreen.module.css
@@ -10,6 +10,7 @@
 
   /* Fallback for browsers that do not support 100svh */
   min-height: 100vh;
+  /* biome-ignore lint/suspicious/noDuplicateProperties: this isn't a real duplicate */
   min-height: 100svh;
 
   justify-content: center;
diff --git a/frontend/src/components/PaginationControls.tsx b/frontend/src/components/PaginationControls.tsx
index ad569cf78..f8d3e68c3 100644
--- a/frontend/src/components/PaginationControls.tsx
+++ b/frontend/src/components/PaginationControls.tsx
@@ -39,9 +39,9 @@ const PaginationControls: React.FC<Props> = ({
         {t("common.previous")}
       </Button>
       <div className="text-center">
-        {count !== undefined ? (
-          <>{t("frontend.pagination_controls.total", { totalCount: count })}</>
-        ) : null}
+        {count !== undefined
+          ? t("frontend.pagination_controls.total", { totalCount: count })
+          : null}
       </div>
       <Button
         kind="secondary"
diff --git a/frontend/src/components/Separator/Separator.tsx b/frontend/src/components/Separator/Separator.tsx
index 3a3b8d245..886c63040 100644
--- a/frontend/src/components/Separator/Separator.tsx
+++ b/frontend/src/components/Separator/Separator.tsx
@@ -3,6 +3,9 @@
 // SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 // Please see LICENSE files in the repository root for full details.
 
+// biome-ignore-all lint/a11y/useFocusableInteractive: this is a false positive
+// biome-ignore-all lint/a11y/useAriaPropsForRole: this is a false positive
+
 import cx from "classnames";
 import { forwardRef } from "react";
 
@@ -14,7 +17,6 @@ type Props = {
 
 const Separator = forwardRef<HTMLDivElement, Props>(
   ({ kind, className, ...props }: Props, ref) => (
-    // biome-ignore lint/a11y/useFocusableInteractive: this is a false positive
     <div
       aria-orientation="horizontal"
       role="separator"
diff --git a/frontend/src/components/Session/DeviceTypeIcon.test.tsx b/frontend/src/components/Session/DeviceTypeIcon.test.tsx
index d207b0a6f..10f107d0b 100644
--- a/frontend/src/components/Session/DeviceTypeIcon.test.tsx
+++ b/frontend/src/components/Session/DeviceTypeIcon.test.tsx
@@ -10,7 +10,7 @@ import { composeStory } from "@storybook/react-vite";
 import { render } from "@testing-library/react";
 import { describe, expect, it } from "vitest";
 
-import Meta, { Unknown, Pc, Mobile, Tablet } from "./DeviceTypeIcon.stories";
+import Meta, { Mobile, Pc, Tablet, Unknown } from "./DeviceTypeIcon.stories";
 
 describe("<DeviceTypeIcon />", () => {
   it("renders unknown device type", () => {
diff --git a/frontend/src/components/SessionCard/index.ts b/frontend/src/components/SessionCard/index.ts
index 076e7c696..065c738a6 100644
--- a/frontend/src/components/SessionCard/index.ts
+++ b/frontend/src/components/SessionCard/index.ts
@@ -5,13 +5,13 @@
 // Please see LICENSE files in the repository root for full details.
 
 export {
-  Root,
-  LinkBody,
-  Body,
-  Header,
-  Name,
-  Client,
-  Metadata,
-  Info,
   Action,
+  Body,
+  Client,
+  Header,
+  Info,
+  LinkBody,
+  Metadata,
+  Name,
+  Root,
 } from "./SessionCard";
diff --git a/frontend/src/components/SessionDetail/EditSessionName.tsx b/frontend/src/components/SessionDetail/EditSessionName.tsx
index 39082302f..5c22fadbb 100644
--- a/frontend/src/components/SessionDetail/EditSessionName.tsx
+++ b/frontend/src/components/SessionDetail/EditSessionName.tsx
@@ -3,6 +3,7 @@
 // SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 // Please see LICENSE files in the repository root for full details.
 
+import type { UseMutationResult } from "@tanstack/react-query";
 import IconEdit from "@vector-im/compound-design-tokens/assets/web/icons/edit";
 import { Button, Form, IconButton, Tooltip } from "@vector-im/compound-web";
 import {
@@ -11,12 +12,10 @@ import {
   useRef,
   useState,
 } from "react";
+import { useTranslation } from "react-i18next";
 import * as Dialog from "../Dialog";
 import LoadingSpinner from "../LoadingSpinner";
 
-import type { UseMutationResult } from "@tanstack/react-query";
-import { useTranslation } from "react-i18next";
-
 // This needs to be its own component because else props and refs aren't passed properly in the trigger
 const EditButton = forwardRef<
   HTMLButtonElement,
diff --git a/frontend/src/components/SessionDetail/OAuth2SessionDetail.test.tsx b/frontend/src/components/SessionDetail/OAuth2SessionDetail.test.tsx
index 43c7f9ee6..3ea7d2d78 100644
--- a/frontend/src/components/SessionDetail/OAuth2SessionDetail.test.tsx
+++ b/frontend/src/components/SessionDetail/OAuth2SessionDetail.test.tsx
@@ -6,12 +6,10 @@
 
 // @vitest-environment happy-dom
 
+import { TooltipProvider } from "@vector-im/compound-web";
 import { beforeAll, describe, expect, it } from "vitest";
-
 import { makeFragmentData } from "../../gql";
 import { mockLocale } from "../../test-utils/mockLocale";
-
-import { TooltipProvider } from "@vector-im/compound-web";
 import render from "../../test-utils/render";
 import OAuth2SessionDetail, { FRAGMENT } from "./OAuth2SessionDetail";
 
diff --git a/frontend/src/components/UserEmail/UserEmail.tsx b/frontend/src/components/UserEmail/UserEmail.tsx
index 23f07fb63..2a592eb10 100644
--- a/frontend/src/components/UserEmail/UserEmail.tsx
+++ b/frontend/src/components/UserEmail/UserEmail.tsx
@@ -105,7 +105,7 @@ const UserEmail: React.FC<{
 
   const onRemoveClick = useCallback(
     async (_e: React.MouseEvent<HTMLButtonElement>): Promise<void> => {
-      let password = undefined;
+      let password: string | undefined;
       if (shouldPromptPassword) {
         password = await promptPassword();
       }
diff --git a/frontend/src/components/UserProfile/AddEmailForm.tsx b/frontend/src/components/UserProfile/AddEmailForm.tsx
index 3a4c42458..727d0f4c8 100644
--- a/frontend/src/components/UserProfile/AddEmailForm.tsx
+++ b/frontend/src/components/UserProfile/AddEmailForm.tsx
@@ -32,11 +32,9 @@ export const CONFIG_FRAGMENT = graphql(/* GraphQL */ `
 
 const ADD_EMAIL_MUTATION = graphql(/* GraphQL */ `
   mutation AddEmail($email: String!, $password: String, $language: String!) {
-    startEmailAuthentication(input: {
-      email: $email,
-      password: $password,
-      language: $language
-    }) {
+    startEmailAuthentication(
+      input: { email: $email, password: $password, language: $language }
+    ) {
       status
       violations
       authentication {
@@ -64,7 +62,11 @@ const AddEmailForm: React.FC<{
       email,
       password,
       language,
-    }: { email: string; password?: string; language: string }) =>
+    }: {
+      email: string;
+      password?: string;
+      language: string;
+    }) =>
       graphqlRequest({
         query: ADD_EMAIL_MUTATION,
         variables: { email, password, language },
@@ -92,7 +94,7 @@ const AddEmailForm: React.FC<{
 
       const formData = new FormData(e.currentTarget);
       const email = formData.get("input") as string;
-      let password = undefined;
+      let password: string | undefined;
       if (shouldPromptPassword) {
         password = await promptPassword();
       }
diff --git a/frontend/src/gql/gql.ts b/frontend/src/gql/gql.ts
index d70194c77..635e117ca 100644
--- a/frontend/src/gql/gql.ts
+++ b/frontend/src/gql/gql.ts
@@ -44,7 +44,7 @@ type Documents = {
     "\n  mutation SetDisplayName($userId: ID!, $displayName: String) {\n    setDisplayName(input: { userId: $userId, displayName: $displayName }) {\n      status\n    }\n  }\n": typeof types.SetDisplayNameDocument,
     "\n  fragment AddEmailForm_user on User {\n    hasPassword\n  }\n": typeof types.AddEmailForm_UserFragmentDoc,
     "\n  fragment AddEmailForm_siteConfig on SiteConfig {\n    passwordLoginEnabled\n  }\n": typeof types.AddEmailForm_SiteConfigFragmentDoc,
-    "\n  mutation AddEmail($email: String!, $password: String, $language: String!) {\n    startEmailAuthentication(input: {\n      email: $email,\n      password: $password,\n      language: $language\n    }) {\n      status\n      violations\n      authentication {\n        id\n      }\n    }\n  }\n": typeof types.AddEmailDocument,
+    "\n  mutation AddEmail($email: String!, $password: String, $language: String!) {\n    startEmailAuthentication(\n      input: { email: $email, password: $password, language: $language }\n    ) {\n      status\n      violations\n      authentication {\n        id\n      }\n    }\n  }\n": typeof types.AddEmailDocument,
     "\n  query UserEmailList(\n    $first: Int\n    $after: String\n    $last: Int\n    $before: String\n  ) {\n    viewer {\n      __typename\n      ... on User {\n        emails(first: $first, after: $after, last: $last, before: $before) {\n          edges {\n            cursor\n            node {\n              ...UserEmail_email\n            }\n          }\n          totalCount\n          pageInfo {\n            hasNextPage\n            hasPreviousPage\n            startCursor\n            endCursor\n          }\n        }\n      }\n    }\n  }\n": typeof types.UserEmailListDocument,
     "\n  fragment UserEmailList_user on User {\n    hasPassword\n  }\n": typeof types.UserEmailList_UserFragmentDoc,
     "\n  fragment UserEmailList_siteConfig on SiteConfig {\n    emailChangeAllowed\n    passwordLoginEnabled\n  }\n": typeof types.UserEmailList_SiteConfigFragmentDoc,
@@ -101,7 +101,7 @@ const documents: Documents = {
     "\n  mutation SetDisplayName($userId: ID!, $displayName: String) {\n    setDisplayName(input: { userId: $userId, displayName: $displayName }) {\n      status\n    }\n  }\n": types.SetDisplayNameDocument,
     "\n  fragment AddEmailForm_user on User {\n    hasPassword\n  }\n": types.AddEmailForm_UserFragmentDoc,
     "\n  fragment AddEmailForm_siteConfig on SiteConfig {\n    passwordLoginEnabled\n  }\n": types.AddEmailForm_SiteConfigFragmentDoc,
-    "\n  mutation AddEmail($email: String!, $password: String, $language: String!) {\n    startEmailAuthentication(input: {\n      email: $email,\n      password: $password,\n      language: $language\n    }) {\n      status\n      violations\n      authentication {\n        id\n      }\n    }\n  }\n": types.AddEmailDocument,
+    "\n  mutation AddEmail($email: String!, $password: String, $language: String!) {\n    startEmailAuthentication(\n      input: { email: $email, password: $password, language: $language }\n    ) {\n      status\n      violations\n      authentication {\n        id\n      }\n    }\n  }\n": types.AddEmailDocument,
     "\n  query UserEmailList(\n    $first: Int\n    $after: String\n    $last: Int\n    $before: String\n  ) {\n    viewer {\n      __typename\n      ... on User {\n        emails(first: $first, after: $after, last: $last, before: $before) {\n          edges {\n            cursor\n            node {\n              ...UserEmail_email\n            }\n          }\n          totalCount\n          pageInfo {\n            hasNextPage\n            hasPreviousPage\n            startCursor\n            endCursor\n          }\n        }\n      }\n    }\n  }\n": types.UserEmailListDocument,
     "\n  fragment UserEmailList_user on User {\n    hasPassword\n  }\n": types.UserEmailList_UserFragmentDoc,
     "\n  fragment UserEmailList_siteConfig on SiteConfig {\n    emailChangeAllowed\n    passwordLoginEnabled\n  }\n": types.UserEmailList_SiteConfigFragmentDoc,
@@ -248,7 +248,7 @@ export function graphql(source: "\n  fragment AddEmailForm_siteConfig on SiteCon
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n  mutation AddEmail($email: String!, $password: String, $language: String!) {\n    startEmailAuthentication(input: {\n      email: $email,\n      password: $password,\n      language: $language\n    }) {\n      status\n      violations\n      authentication {\n        id\n      }\n    }\n  }\n"): typeof import('./graphql').AddEmailDocument;
+export function graphql(source: "\n  mutation AddEmail($email: String!, $password: String, $language: String!) {\n    startEmailAuthentication(\n      input: { email: $email, password: $password, language: $language }\n    ) {\n      status\n      violations\n      authentication {\n        id\n      }\n    }\n  }\n"): typeof import('./graphql').AddEmailDocument;
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
diff --git a/frontend/src/i18n.ts b/frontend/src/i18n.ts
index 445644602..77e5b7284 100644
--- a/frontend/src/i18n.ts
+++ b/frontend/src/i18n.ts
@@ -7,10 +7,10 @@
 import {
   type BackendModule,
   type InitOptions,
+  default as i18n,
   type LanguageDetectorModule,
   type ReadCallback,
   type ResourceKey,
-  default as i18n,
 } from "i18next";
 import { initReactI18next } from "react-i18next";
 
diff --git a/frontend/src/routes/__root.tsx b/frontend/src/routes/__root.tsx
index 9be779b74..a23a37992 100644
--- a/frontend/src/routes/__root.tsx
+++ b/frontend/src/routes/__root.tsx
@@ -7,9 +7,9 @@
 import type { QueryClient } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import {
+  createRootRouteWithContext,
   type ErrorRouteComponent,
   Outlet,
-  createRootRouteWithContext,
 } from "@tanstack/react-router";
 import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
 import GenericError from "../components/GenericError";
diff --git a/frontend/src/routes/_account.index.tsx b/frontend/src/routes/_account.index.tsx
index b59fab9fa..4b21b326c 100644
--- a/frontend/src/routes/_account.index.tsx
+++ b/frontend/src/routes/_account.index.tsx
@@ -188,73 +188,68 @@ function Index(): React.ReactElement {
   };
 
   return (
-    <>
-      <div className="flex flex-col gap-6">
-        {/* Only display this section if the user can add email addresses to their
+    <div className="flex flex-col gap-6">
+      {/* Only display this section if the user can add email addresses to their
           account *or* if they have any existing email addresses */}
-        {(siteConfig.emailChangeAllowed ||
-          viewerSession.user.emails.totalCount > 0) && (
-          <>
-            <Collapsible.Section
-              defaultOpen
-              title={t("frontend.account.contact_info")}
-            >
-              <UserEmailList
+      {(siteConfig.emailChangeAllowed ||
+        viewerSession.user.emails.totalCount > 0) && (
+        <>
+          <Collapsible.Section
+            defaultOpen
+            title={t("frontend.account.contact_info")}
+          >
+            <UserEmailList user={viewerSession.user} siteConfig={siteConfig} />
+
+            {siteConfig.emailChangeAllowed && (
+              <AddEmailForm
                 user={viewerSession.user}
                 siteConfig={siteConfig}
+                onAdd={onAdd}
               />
+            )}
+          </Collapsible.Section>
 
-              {siteConfig.emailChangeAllowed && (
-                <AddEmailForm
-                  user={viewerSession.user}
-                  siteConfig={siteConfig}
-                  onAdd={onAdd}
-                />
-              )}
-            </Collapsible.Section>
+          <Separator kind="section" />
+        </>
+      )}
 
-            <Separator kind="section" />
-          </>
-        )}
+      {siteConfig.passwordLoginEnabled && viewerSession.user.hasPassword && (
+        <>
+          <Collapsible.Section
+            defaultOpen
+            title={t("frontend.account.account_password")}
+          >
+            <AccountManagementPasswordPreview siteConfig={siteConfig} />
+          </Collapsible.Section>
 
-        {siteConfig.passwordLoginEnabled && viewerSession.user.hasPassword && (
-          <>
-            <Collapsible.Section
-              defaultOpen
-              title={t("frontend.account.account_password")}
-            >
-              <AccountManagementPasswordPreview siteConfig={siteConfig} />
-            </Collapsible.Section>
+          <Separator kind="section" />
+        </>
+      )}
 
-            <Separator kind="section" />
-          </>
-        )}
+      <Collapsible.Section title={t("common.e2ee")}>
+        <Text className="text-secondary" size="md">
+          {t("frontend.reset_cross_signing.description")}
+        </Text>
+        <ButtonLink to="/reset-cross-signing" kind="secondary" destructive>
+          {t("frontend.reset_cross_signing.start_reset")}
+        </ButtonLink>
+      </Collapsible.Section>
 
-        <Collapsible.Section title={t("common.e2ee")}>
-          <Text className="text-secondary" size="md">
-            {t("frontend.reset_cross_signing.description")}
-          </Text>
-          <ButtonLink to="/reset-cross-signing" kind="secondary" destructive>
-            {t("frontend.reset_cross_signing.start_reset")}
-          </ButtonLink>
-        </Collapsible.Section>
+      <Separator kind="section" />
 
-        <Separator kind="section" />
+      <SignOutButton id={viewerSession.id} />
 
-        <SignOutButton id={viewerSession.id} />
+      {siteConfig.accountDeactivationAllowed && (
+        <>
+          <Separator />
+          <AccountDeleteButton
+            user={viewerSession.user}
+            siteConfig={siteConfig}
+          />
+        </>
+      )}
 
-        {siteConfig.accountDeactivationAllowed && (
-          <>
-            <Separator />
-            <AccountDeleteButton
-              user={viewerSession.user}
-              siteConfig={siteConfig}
-            />
-          </>
-        )}
-
-        <Separator />
-      </div>
-    </>
+      <Separator />
+    </div>
   );
 }
diff --git a/frontend/src/routes/_account.plan.index.tsx b/frontend/src/routes/_account.plan.index.tsx
index 9ae338842..1c5453982 100644
--- a/frontend/src/routes/_account.plan.index.tsx
+++ b/frontend/src/routes/_account.plan.index.tsx
@@ -33,10 +33,10 @@ export const Route = createFileRoute({
 
     preload(planManagementIframeUri, { as: "document" });
   },
-  component: Plan,
+  component: RouteComponent,
 });
 
-function Plan(): React.ReactElement {
+function RouteComponent(): React.ReactElement {
   const result = useSuspenseQuery(query);
   const { planManagementIframeUri } = result.data.siteConfig;
 
@@ -45,6 +45,14 @@ function Plan(): React.ReactElement {
     return <Navigate to="/" replace />;
   }
 
+  return <Plan planManagementIframeUri={planManagementIframeUri} />;
+}
+
+function Plan({
+  planManagementIframeUri,
+}: {
+  planManagementIframeUri: string;
+}): React.ReactElement {
   const ref = useRef<HTMLIFrameElement>(null);
 
   // Query the size of the iframe content and set the height
@@ -79,6 +87,24 @@ function Plan(): React.ReactElement {
     [calculateHeight],
   );
 
+  const attachObserver = useCallback(
+    (iframe: HTMLIFrameElement) => {
+      const iframeBody = iframe.contentWindow?.document.body;
+      if (!iframeBody) {
+        return;
+      }
+      // calculate the height immediately
+      calculateHeight();
+      // observe future changes to the body of the iframe
+      observer.observe(iframeBody, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+      });
+    },
+    [calculateHeight, observer],
+  );
+
   useEffect(() => {
     const iframe = ref.current;
     if (iframe) {
@@ -86,22 +112,7 @@ function Plan(): React.ReactElement {
     }
     // Cleanup observer when the component unmounts
     return () => observer.disconnect();
-  }, [observer]);
-
-  const attachObserver = (iframe: HTMLIFrameElement) => {
-    const iframeBody = iframe.contentWindow?.document.body;
-    if (!iframeBody) {
-      return;
-    }
-    // calculate the height immediately
-    calculateHeight();
-    // observe future changes to the body of the iframe
-    observer.observe(iframeBody, {
-      childList: true,
-      subtree: true,
-      attributes: true,
-    });
-  };
+  }, [observer, attachObserver]);
 
   return (
     <iframe
diff --git a/frontend/src/routes/_account.sessions.index.tsx b/frontend/src/routes/_account.sessions.index.tsx
index d628a55cb..e7f930a57 100644
--- a/frontend/src/routes/_account.sessions.index.tsx
+++ b/frontend/src/routes/_account.sessions.index.tsx
@@ -4,8 +4,7 @@
 // SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 // Please see LICENSE files in the repository root for full details.
 
-import { useSuspenseQuery } from "@tanstack/react-query";
-import { queryOptions } from "@tanstack/react-query";
+import { queryOptions, useSuspenseQuery } from "@tanstack/react-query";
 import { notFound } from "@tanstack/react-router";
 import { H3 } from "@vector-im/compound-web";
 import { useTranslation } from "react-i18next";
@@ -19,11 +18,11 @@ import Separator from "../components/Separator";
 import BrowserSessionsOverview from "../components/UserSessionsOverview/BrowserSessionsOverview";
 import { graphql } from "../gql";
 import { graphqlRequest } from "../graphql";
-import { usePages } from "../pagination";
 import {
   type AnyPagination,
   anyPaginationSchema,
   normalizePagination,
+  usePages,
 } from "../pagination";
 import { getNinetyDaysAgo } from "../utils/dates";
 
diff --git a/frontend/src/routes/_account.tsx b/frontend/src/routes/_account.tsx
index 9d804d52b..a23d761fb 100644
--- a/frontend/src/routes/_account.tsx
+++ b/frontend/src/routes/_account.tsx
@@ -5,7 +5,7 @@
 // Please see LICENSE files in the repository root for full details.
 
 import { queryOptions, useSuspenseQuery } from "@tanstack/react-query";
-import { Outlet, notFound } from "@tanstack/react-router";
+import { notFound, Outlet } from "@tanstack/react-router";
 import { Heading } from "@vector-im/compound-web";
 import { useTranslation } from "react-i18next";
 import Layout from "../components/Layout";
diff --git a/frontend/src/routes/clients.$id.tsx b/frontend/src/routes/clients.$id.tsx
index 361385a32..510c4e9f3 100644
--- a/frontend/src/routes/clients.$id.tsx
+++ b/frontend/src/routes/clients.$id.tsx
@@ -4,8 +4,7 @@
 // SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 // Please see LICENSE files in the repository root for full details.
 
-import { useSuspenseQuery } from "@tanstack/react-query";
-import { queryOptions } from "@tanstack/react-query";
+import { queryOptions, useSuspenseQuery } from "@tanstack/react-query";
 import { notFound } from "@tanstack/react-router";
 import OAuth2ClientDetail from "../components/Client/OAuth2ClientDetail";
 import Layout from "../components/Layout";
diff --git a/frontend/src/routes/devices.$.tsx b/frontend/src/routes/devices.$.tsx
index 57b0e1962..79859d806 100644
--- a/frontend/src/routes/devices.$.tsx
+++ b/frontend/src/routes/devices.$.tsx
@@ -4,11 +4,10 @@
 // SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 // Please see LICENSE files in the repository root for full details.
 
+import { queryOptions } from "@tanstack/react-query";
 import { notFound, redirect } from "@tanstack/react-router";
 import { Alert } from "@vector-im/compound-web";
 import { useTranslation } from "react-i18next";
-
-import { queryOptions } from "@tanstack/react-query";
 import Layout from "../components/Layout";
 import { Link } from "../components/Link";
 import { graphql } from "../gql";
diff --git a/frontend/src/routes/password.recovery.index.tsx b/frontend/src/routes/password.recovery.index.tsx
index a16c294c8..9a8beb920 100644
--- a/frontend/src/routes/password.recovery.index.tsx
+++ b/frontend/src/routes/password.recovery.index.tsx
@@ -4,10 +4,12 @@
 // SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 // Please see LICENSE files in the repository root for full details.
 
-import { useMutation, useSuspenseQuery } from "@tanstack/react-query";
-import { queryOptions } from "@tanstack/react-query";
-import { useNavigate, useSearch } from "@tanstack/react-router";
-import { notFound } from "@tanstack/react-router";
+import {
+  queryOptions,
+  useMutation,
+  useSuspenseQuery,
+} from "@tanstack/react-query";
+import { notFound, useNavigate, useSearch } from "@tanstack/react-router";
 import IconErrorSolid from "@vector-im/compound-design-tokens/assets/web/icons/error-solid";
 import IconLockSolid from "@vector-im/compound-design-tokens/assets/web/icons/lock-solid";
 import { Alert, Button, Form } from "@vector-im/compound-web";
@@ -19,8 +21,7 @@ import Layout from "../components/Layout";
 import LoadingSpinner from "../components/LoadingSpinner";
 import PageHeading from "../components/PageHeading";
 import PasswordCreationDoubleInput from "../components/PasswordCreationDoubleInput";
-import { type FragmentType, useFragment } from "../gql";
-import { graphql } from "../gql";
+import { type FragmentType, graphql, useFragment } from "../gql";
 import { graphqlRequest } from "../graphql";
 import { translateSetPasswordError } from "../i18n/password_changes";
 
diff --git a/frontend/src/routes/reset-cross-signing.tsx b/frontend/src/routes/reset-cross-signing.tsx
index 5f840d066..9ac0ed956 100644
--- a/frontend/src/routes/reset-cross-signing.tsx
+++ b/frontend/src/routes/reset-cross-signing.tsx
@@ -6,9 +6,8 @@
 import { type ErrorComponentProps, Outlet } from "@tanstack/react-router";
 import IconErrorSolid from "@vector-im/compound-design-tokens/assets/web/icons/error-solid";
 import { Button, Text } from "@vector-im/compound-web";
-import * as v from "valibot";
-
 import { useTranslation } from "react-i18next";
+import * as v from "valibot";
 import Layout from "../components/Layout";
 import PageHeading from "../components/PageHeading";
 
diff --git a/frontend/src/test-utils/router.tsx b/frontend/src/test-utils/router.tsx
index e8019c761..0a312899a 100644
--- a/frontend/src/test-utils/router.tsx
+++ b/frontend/src/test-utils/router.tsx
@@ -5,12 +5,12 @@
 // Please see LICENSE files in the repository root for full details.
 
 import {
-  RouterContextProvider,
   createMemoryHistory,
   createRootRoute,
   createRoute,
   createRouter,
   matchContext,
+  RouterContextProvider,
   useRouterState,
 } from "@tanstack/react-router";
 
diff --git a/frontend/stories/routes/app.tsx b/frontend/stories/routes/app.tsx
index 6965594dd..cc2bdd685 100644
--- a/frontend/stories/routes/app.tsx
+++ b/frontend/stories/routes/app.tsx
@@ -5,9 +5,9 @@
 
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import {
-  RouterProvider,
   createHashHistory,
   createRouter,
+  RouterProvider,
 } from "@tanstack/react-router";
 import { TooltipProvider } from "@vector-im/compound-web";
 import i18n from "i18next";
diff --git a/frontend/stories/routes/reset-cross-signing.stories.tsx b/frontend/stories/routes/reset-cross-signing.stories.tsx
index 47dfe1f56..e928a0f8d 100644
--- a/frontend/stories/routes/reset-cross-signing.stories.tsx
+++ b/frontend/stories/routes/reset-cross-signing.stories.tsx
@@ -4,7 +4,7 @@
 // Please see LICENSE files in the repository root for full details.
 
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { HttpResponse, delay } from "msw";
+import { delay, HttpResponse } from "msw";
 import {
   mockAllowCrossSigningResetMutation,
   mockCurrentViewerQuery,
diff --git a/frontend/tests/routes/render.tsx b/frontend/tests/routes/render.tsx
index f9457d39a..03d59d447 100644
--- a/frontend/tests/routes/render.tsx
+++ b/frontend/tests/routes/render.tsx
@@ -4,8 +4,11 @@
 // Please see LICENSE files in the repository root for full details.
 
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { RouterProvider, createMemoryHistory } from "@tanstack/react-router";
-import { createRouter } from "@tanstack/react-router";
+import {
+  createMemoryHistory,
+  createRouter,
+  RouterProvider,
+} from "@tanstack/react-router";
 import { type RenderResult, render } from "@testing-library/react";
 import { TooltipProvider } from "@vector-im/compound-web";
 import i18n from "i18next";