From e6bed8c471b91c98a8e6c9e6c5ae486c48748476 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Fri, 27 Sep 2024 23:31:19 +0200
Subject: [PATCH] pl-fe: improve floating-ui behavior
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 packages/pl-fe/src/components/profile-hover-card.tsx | 10 ++++++++--
 packages/pl-fe/src/components/status-hover-card.tsx  | 12 ++++++++----
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/packages/pl-fe/src/components/profile-hover-card.tsx b/packages/pl-fe/src/components/profile-hover-card.tsx
index da61aa61d..7434a4455 100644
--- a/packages/pl-fe/src/components/profile-hover-card.tsx
+++ b/packages/pl-fe/src/components/profile-hover-card.tsx
@@ -1,4 +1,4 @@
-import { useFloating, useTransitionStyles } from '@floating-ui/react';
+import { shift, useFloating, useTransitionStyles } from '@floating-ui/react';
 import clsx from 'clsx';
 import React, { useEffect } from 'react';
 import { useIntl, FormattedMessage } from 'react-intl';
@@ -73,17 +73,23 @@ const ProfileHoverCard: React.FC<IProfileHoverCard> = ({ visible = true }) => {
     };
   }, []);
 
-  const { x, y, strategy, refs, context } = useFloating({
+  const { x, y, strategy, refs, context, placement } = useFloating({
     open: !!account,
     elements: {
       reference: targetRef,
     },
+    middleware: [
+      shift({
+        padding: 8,
+      }),
+    ],
   });
 
   const { styles } = useTransitionStyles(context, {
     initial: {
       opacity: 0,
       transform: 'scale(0.8)',
+      transformOrigin: placement === 'bottom' ? 'top' : 'bottom',
     },
     duration: {
       open: 100,
diff --git a/packages/pl-fe/src/components/status-hover-card.tsx b/packages/pl-fe/src/components/status-hover-card.tsx
index 75b8fe179..b767ffde0 100644
--- a/packages/pl-fe/src/components/status-hover-card.tsx
+++ b/packages/pl-fe/src/components/status-hover-card.tsx
@@ -1,4 +1,4 @@
-import { useFloating, useTransitionStyles } from '@floating-ui/react';
+import { shift, useFloating, useTransitionStyles } from '@floating-ui/react';
 import clsx from 'clsx';
 import React, { useEffect, useCallback } from 'react';
 import { useIntl } from 'react-intl';
@@ -43,19 +43,23 @@ const StatusHoverCard: React.FC<IStatusHoverCard> = ({ visible = true }) => {
     };
   }, []);
 
-  const { x, y, strategy, refs, context } = useFloating({
+  const { x, y, strategy, refs, context, placement } = useFloating({
     open: !!statusId,
     elements: {
       reference: targetRef,
     },
-    placement: 'top',
+    middleware: [
+      shift({
+        padding: 8,
+      }),
+    ],
   });
 
   const { styles } = useTransitionStyles(context, {
     initial: {
       opacity: 0,
       transform: 'scale(0.8)',
-      transformOrigin: 'bottom',
+      transformOrigin: placement === 'bottom' ? 'top' : 'bottom',
     },
     duration: {
       open: 100,