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>
This commit is contained in:
thibaud-leclere
2026-03-31 21:49:46 +02:00
parent 2e65b2805a
commit ded3d063c6

View File

@@ -1,5 +1,5 @@
import React, { useState } from 'react'; 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 = { const HINT_ICONS = {
film: 'fa-solid fa-film', film: 'fa-solid fa-film',
@@ -46,6 +46,7 @@ export default function ActorPopover({ hintType, hintText }) {
<i className={iconClass}></i> <i className={iconClass}></i>
</button> </button>
{isOpen && ( {isOpen && (
<FloatingPortal>
<div <div
ref={refs.setFloating} ref={refs.setFloating}
style={floatingStyles} style={floatingStyles}
@@ -54,6 +55,7 @@ export default function ActorPopover({ hintType, hintText }) {
> >
{hintText} {hintText}
</div> </div>
</FloatingPortal>
)} )}
</> </>
); );