thibaud-lclr/ltbxd-actorle
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: render hint popover via FloatingPortal to prevent overflow clipping

Browse Source 
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
1 changed files with 11 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
assets/react/controllers/ActorPopover.jsx
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,14 +46,16 @@ export default function ActorPopover({ hintType, hintText }) {
<i className={iconClass}></i> <i className={iconClass}></i>
</button> </button>
{isOpen && ( {isOpen && (
<div <FloatingPortal>
ref={refs.setFloating} <div
style={floatingStyles} ref={refs.setFloating}
{...getFloatingProps()} style={floatingStyles}
className="actor-popover" {...getFloatingProps()}
> className="actor-popover"
{hintText} >
</div> {hintText}
</div>
</FloatingPortal>
)} )}
</> </>
); );