matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pl-fe: improve floating elements position

Browse Source 
Signed-off-by: mkljczk <git@mkljczk.pl>
This commit is contained in:
mkljczk
2025-02-02 13:09:39 +01:00
parent 911ee0bdc0
commit 88480c332c
3 changed files with 6 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/pl-fe/src/components/account-hover-card.tsx
View File

@ -1,4 +1,4 @@
import { autoUpdate, shift, useFloating, useTransitionStyles } from '@floating-ui/react';
import { autoUpdate, flip, shift, useFloating, useTransitionStyles } from '@floating-ui/react';
import clsx from 'clsx';
import React, { useEffect } from 'react';
import { useIntl, FormattedMessage } from 'react-intl';
@ -76,6 +76,7 @@ const AccountHoverCard: React.FC<IAccountHoverCard> = ({ visible = true }) => {
reference: ref?.current,
},
middleware: [
flip(),
shift({
padding: 8,
}),

3
packages/pl-fe/src/components/status-hover-card.tsx
View File

@ -1,4 +1,4 @@
import { autoUpdate, shift, useFloating, useTransitionStyles } from '@floating-ui/react';
import { autoUpdate, flip, shift, useFloating, useTransitionStyles } from '@floating-ui/react';
import clsx from 'clsx';
import React, { useEffect } from 'react';
import { useIntl } from 'react-intl';
@ -50,6 +50,7 @@ const StatusHoverCard: React.FC<IStatusHoverCard> = ({ visible = true }) => {
},
placement: 'top',
middleware: [
flip(),
shift({
padding: 8,
}),

4
packages/pl-fe/src/features/ui/components/modals/edit-bookmark-folder-modal.tsx
View File

@ -1,4 +1,4 @@
import { useFloating, shift, autoUpdate } from '@floating-ui/react';
import { useFloating, shift, autoUpdate, flip } from '@floating-ui/react';
import React, { useState } from 'react';
import { createPortal } from 'react-dom';
import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
@ -36,7 +36,7 @@ const EmojiPicker: React.FC<IEmojiPicker> = ({ emoji, emojiUrl, ...props }) => {
const [visible, setVisible] = useState(false);
const { x, y, strategy, refs, update } = useFloating<HTMLButtonElement>({
middleware: [shift()],
middleware: [flip(), shift()],
whileElementsMounted: autoUpdate,
});