From d25a1324951d7f0df819029174e62e182df64d51 Mon Sep 17 00:00:00 2001
From: npeter83 <npeter83+claude@gmail.com>
Date: Wed, 7 Oct 2026 23:16:25 +0200
Subject: [PATCH] fix(ui): a dialog whose own video goes fullscreen no longer
 crashes the app
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The portal host followed the fullscreen element into it. When that element is the dialog's own
content (the library player's <video>, by its f key or its own button), the move is into the host's
own descendant, which the DOM refuses: HierarchyRequestError in a layout effect, and the crash
screen replaced the app. The host now stays where it is then — the content already shows.
---
 .../ui/Modal.fullscreen.dom.test.tsx          | 21 +++++++++++++++++++
 frontend/src/lib/fullscreen.ts                |  5 ++++-
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/ui/Modal.fullscreen.dom.test.tsx b/frontend/src/components/ui/Modal.fullscreen.dom.test.tsx
index fa4c7163..ac0771fa 100644
--- a/frontend/src/components/ui/Modal.fullscreen.dom.test.tsx
+++ b/frontend/src/components/ui/Modal.fullscreen.dom.test.tsx
@@ -85,3 +85,24 @@ describe("a dialog with an autoFocus child", () => {
     stage.remove();
   });
 });
+
+describe("a dialog whose own content goes fullscreen", () => {
+  it("stays where it is and keeps that content", () => {
+    // The library player is a <video> inside a dialog, and its fullscreen (the `f` key, or the
+    // video's own button) makes that video the fullscreen element. Moving the dialog's host INTO
+    // its own descendant is not a move the DOM allows: it threw, and the whole app went to the
+    // crash screen.
+    render(
+      <Modal initialFocus="close" title="Player" onClose={() => {}}>
+        <video aria-label="film" />
+      </Modal>,
+    );
+    const video = screen.getByLabelText("film");
+    const host = video.closest("body > div");
+
+    setFullscreen(video);
+
+    expect(video.isConnected).toBe(true);
+    expect(video.closest("body > div")).toBe(host);
+  });
+});
diff --git a/frontend/src/lib/fullscreen.ts b/frontend/src/lib/fullscreen.ts
index 9874126a..482d2e11 100644
--- a/frontend/src/lib/fullscreen.ts
+++ b/frontend/src/lib/fullscreen.ts
@@ -95,7 +95,10 @@ export function useFullscreenPortalHost(): HTMLElement | null {
   }, [host]);
   useLayoutEffect(() => {
     if (!host) return;
-    const parent = fsRoot ?? document.body;
+    // When the fullscreen element is the overlay's OWN content (a <video> inside a dialog, put in
+    // fullscreen by its key or its own button), it already shows; moving the host into its own
+    // descendant is a move the DOM refuses (HierarchyRequestError, the whole app crashed).
+    const parent = fsRoot && !host.contains(fsRoot) ? fsRoot : document.body;
     if (host.parentNode === parent) return;
     const focused = host.contains(document.activeElement)
       ? (document.activeElement as HTMLElement)