fix: 🐛 Fixed server member flyout sometimes going outside of the scre…

…en (I hope)
Nerimity · Jul 12, 2023 · f402cd2 · f402cd2
1 parent 576c2c3
commit f402cd2
Showing 1 changed file with 3 additions and 2 deletions.
diff --git a/src/components/right-drawer/RightDrawer.tsx b/src/components/right-drawer/RightDrawer.tsx
@@ -31,6 +31,7 @@ import { classNames, conditionalClass } from '@/common/classNames';
 import socketClient from '@/chat-api/socketClient';
 import { ServerEvents } from '@/chat-api/EventNames';
 import { Markup } from '../Markup';
+import { useResizeObserver } from '@/common/useResizeObserver';
 
 const MemberItem = (props: { member: ServerMember }) => {
   const params = useParams<{ serverId: string }>();
@@ -442,14 +443,14 @@ const ProfileFlyout = (props: { sidePane?: boolean; mobile?: boolean; close?():
 
 
   const [flyoutRef, setFlyoutRef] = createSignal<HTMLDivElement | undefined>(undefined);
+  const {height: flyoutHeight} = useResizeObserver(flyoutRef);
 
 
   createEffect(() => {
     if (!flyoutRef()) return;
     if (props.mobile) return;
-    const flyoutHeight = flyoutRef()!.getBoundingClientRect().height;
     let newTop = props.top!;
-    if ((flyoutHeight + props.top!) > height()) newTop = height() - flyoutHeight;
+    if ((flyoutHeight() + props.top!) > height()) newTop = height() - flyoutHeight();
     flyoutRef()!.style.top = newTop + "px";
   })