diff --git a/assets/react/controllers/ActorPopover.jsx b/assets/react/controllers/ActorPopover.jsx index 5d0d485..bf3d2d5 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, flip, shift } from '@floating-ui/react'; +import { useFloating, useClick, useDismiss, useInteractions, offset, shift, size } from '@floating-ui/react'; const HINT_ICONS = { film: 'fa-solid fa-film', @@ -13,7 +13,17 @@ export default function ActorPopover({ hintType, hintText }) { const { refs, floatingStyles, context } = useFloating({ open: isOpen, onOpenChange: setIsOpen, - middleware: [offset(8), flip(), shift()], + middleware: [ + offset(8), + size({ + apply({ availableWidth, elements }) { + Object.assign(elements.floating.style, { + maxWidth: `${availableWidth}px`, + }); + }, + }), + shift({ padding: 8 }), + ], placement: 'left', }); diff --git a/assets/styles/app.css b/assets/styles/app.css index 26fefe7..5410bb6 100644 --- a/assets/styles/app.css +++ b/assets/styles/app.css @@ -130,6 +130,8 @@ body { z-index: 100; font-size: 13px; color: var(--text); + overflow-wrap: break-word; + word-wrap: break-word; } /* ── Auth pages ── */