fix: force popover to left placement with soft wrap when space is limited
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -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',
|
||||
});
|
||||
|
||||
|
||||
@@ -130,6 +130,8 @@ body {
|
||||
z-index: 100;
|
||||
font-size: 13px;
|
||||
color: var(--text);
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
/* ── Auth pages ── */
|
||||
|
||||
Reference in New Issue
Block a user