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 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 = {
|
const HINT_ICONS = {
|
||||||
film: 'fa-solid fa-film',
|
film: 'fa-solid fa-film',
|
||||||
@@ -13,7 +13,17 @@ export default function ActorPopover({ hintType, hintText }) {
|
|||||||
const { refs, floatingStyles, context } = useFloating({
|
const { refs, floatingStyles, context } = useFloating({
|
||||||
open: isOpen,
|
open: isOpen,
|
||||||
onOpenChange: setIsOpen,
|
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',
|
placement: 'left',
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -130,6 +130,8 @@ body {
|
|||||||
z-index: 100;
|
z-index: 100;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
|
overflow-wrap: break-word;
|
||||||
|
word-wrap: break-word;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── Auth pages ── */
|
/* ── Auth pages ── */
|
||||||
|
|||||||
Reference in New Issue
Block a user