From ded3d063c6ef2478a0ac8d8d8c2e84cf96e9ba42 Mon Sep 17 00:00:00 2001
From: thibaud-leclere <thibaud.leclere@gmail.com>
Date: Tue, 31 Mar 2026 21:49:46 +0200
Subject: [PATCH] fix: render hint popover via FloatingPortal to prevent
 overflow clipping

The popover was invisible because it rendered inside the table's
overflow-x:auto scroll container. FloatingPortal moves it to document.body.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 assets/react/controllers/ActorPopover.jsx | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/assets/react/controllers/ActorPopover.jsx b/assets/react/controllers/ActorPopover.jsx
index 57dcc0c..5f276b3 100644
--- a/assets/react/controllers/ActorPopover.jsx
+++ b/assets/react/controllers/ActorPopover.jsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { useFloating, useClick, useDismiss, useInteractions, offset, shift, size } from '@floating-ui/react';
+import { useFloating, useClick, useDismiss, useInteractions, offset, shift, size, FloatingPortal } from '@floating-ui/react';
 
 const HINT_ICONS = {
     film: 'fa-solid fa-film',
@@ -46,14 +46,16 @@ export default function ActorPopover({ hintType, hintText }) {
                 <i className={iconClass}></i>
             </button>
             {isOpen && (
-                <div
-                    ref={refs.setFloating}
-                    style={floatingStyles}
-                    {...getFloatingProps()}
-                    className="actor-popover"
-                >
-                    {hintText}
-                </div>
+                <FloatingPortal>
+                    <div
+                        ref={refs.setFloating}
+                        style={floatingStyles}
+                        {...getFloatingProps()}
+                        className="actor-popover"
+                    >
+                        {hintText}
+                    </div>
+                </FloatingPortal>
             )}
         </>
     );