From c3edf9b399d13b3e67aed7691a38e85442060642 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Mon, 9 Mar 2026 10:06:27 +0100
Subject: [PATCH] refactor: allow AnimatedModal to be placed anywhere (@fehmer)

---
 .../components/common/AnimatedModal.spec.tsx  |  9 ++--
 .../ts/components/common/AnimatedModal.tsx    | 53 ++++++++++---------
 2 files changed, 34 insertions(+), 28 deletions(-)

diff --git a/frontend/__tests__/components/common/AnimatedModal.spec.tsx b/frontend/__tests__/components/common/AnimatedModal.spec.tsx
index b57934428ace..209e5af446f5 100644
--- a/frontend/__tests__/components/common/AnimatedModal.spec.tsx
+++ b/frontend/__tests__/components/common/AnimatedModal.spec.tsx
@@ -28,9 +28,12 @@ describe("AnimatedModal", () => {
     modalDiv: HTMLDivElement;
   } {
     const { container } = render(() => (
-      <AnimatedModal id="Support" {...props}>
-        <div data-testid="modal-content">Test Content</div>
-      </AnimatedModal>
+      <>
+        <div id="solidmodals"></div>
+        <AnimatedModal id="Support" {...props}>
+          <div data-testid="modal-content">Test Content</div>
+        </AnimatedModal>
+      </>
     ));
 
     return {
diff --git a/frontend/src/ts/components/common/AnimatedModal.tsx b/frontend/src/ts/components/common/AnimatedModal.tsx
index d9a72973981f..e6032ed8315d 100644
--- a/frontend/src/ts/components/common/AnimatedModal.tsx
+++ b/frontend/src/ts/components/common/AnimatedModal.tsx
@@ -5,6 +5,7 @@ import {
   ParentProps,
   Show,
 } from "solid-js";
+import { Portal } from "solid-js/web";
 
 import { useRefWithUtils } from "../../hooks/useRefWithUtils";
 import {
@@ -305,31 +306,33 @@ export function AnimatedModal(props: AnimatedModalProps): JSXElement {
   });
 
   return (
-    <dialog
-      id={`${props.id as string}Modal`}
-      ref={dialogRef}
-      class={cn(
-        "fixed top-0 left-0 z-1000 m-0 hidden h-screen max-h-screen w-screen max-w-screen border-none bg-[rgba(0,0,0,0.5)] p-8 backdrop:bg-transparent",
-        props.wrapperClass,
-      )}
-      onKeyDown={handleKeyDown}
-      onMouseDown={handleBackdropClick}
-    >
-      <div class="pointer-events-none flex h-full w-full items-center justify-center">
-        <div
-          class={cn(
-            "modal pointer-events-auto grid h-max max-h-full w-full max-w-md gap-4 overflow-auto rounded-double bg-bg p-4 text-text ring-4 ring-sub-alt sm:p-8",
-            props.modalClass,
-          )}
-          ref={modalRef}
-          onScroll={(e) => props.onScroll?.(e)}
-        >
-          <Show when={props.title !== undefined && props.title !== ""}>
-            <div class="text-2xl text-sub">{props.title}</div>
-          </Show>
-          {props.children}
+    <Portal mount={document.getElementById("solidmodals") as HTMLElement}>
+      <dialog
+        id={`${props.id as string}Modal`}
+        ref={dialogRef}
+        class={cn(
+          "fixed top-0 left-0 z-1000 m-0 hidden h-screen max-h-screen w-screen max-w-screen border-none bg-[rgba(0,0,0,0.5)] p-8 backdrop:bg-transparent",
+          props.wrapperClass,
+        )}
+        onKeyDown={handleKeyDown}
+        onMouseDown={handleBackdropClick}
+      >
+        <div class="pointer-events-none flex h-full w-full items-center justify-center">
+          <div
+            class={cn(
+              "modal pointer-events-auto grid h-max max-h-full w-full max-w-md gap-4 overflow-auto rounded-double bg-bg p-4 text-text ring-4 ring-sub-alt sm:p-8",
+              props.modalClass,
+            )}
+            ref={modalRef}
+            onScroll={(e) => props.onScroll?.(e)}
+          >
+            <Show when={props.title !== undefined && props.title !== ""}>
+              <div class="text-2xl text-sub">{props.title}</div>
+            </Show>
+            {props.children}
+          </div>
         </div>
-      </div>
-    </dialog>
+      </dialog>
+    </Portal>
   );
 }