Open user profile at around mouse anchor (#2440)

src/app/components/event-readers/EventReaders.tsx

@@ -23,6 +23,7 @@ import { UserAvatar } from '../user-avatar';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { useOpenUserRoomProfile } from '../../state/hooks/userRoomProfile';
 import { useSpaceOptionally } from '../../hooks/useSpace';
+import { getMouseEventCords } from '../../utils/dom';
 
 export type EventReadersProps = {
   room: Room;
@@ -83,7 +84,7 @@ export const EventReaders = as<'div', EventReadersProps>(
                         room.roomId,
                         space?.roomId,
                         readerId,
-                        event.currentTarget.getBoundingClientRect(),
+                        getMouseEventCords(event.nativeEvent),
                         'Bottom'
                       );
                     }}

src/app/features/common-settings/members/Members.tsx

@@ -55,6 +55,7 @@ import {
 import { useSpaceOptionally } from '../../../hooks/useSpace';
 import { useFlattenPowerTagMembers, useGetMemberPowerTag } from '../../../hooks/useMemberPowerTag';
 import { useRoomCreators } from '../../../hooks/useRoomCreators';
+import { getMouseEventCords } from '../../../utils/dom';
 
 const SEARCH_OPTIONS: UseAsyncSearchOptions = {
   limit: 1000,
@@ -145,7 +146,7 @@ export function Members({ requestClose }: MembersProps) {
     const btn = evt.currentTarget as HTMLButtonElement;
     const userId = btn.getAttribute('data-user-id');
     if (userId) {
-      openProfile(room.roomId, space?.roomId, userId, btn.getBoundingClientRect());
+      openProfile(room.roomId, space?.roomId, userId, getMouseEventCords(evt.nativeEvent));
     }
   };
 

src/app/features/room/reaction-viewer/ReactionViewer.tsx

@@ -27,6 +27,7 @@ import { UserAvatar } from '../../../components/user-avatar';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 import { useOpenUserRoomProfile } from '../../../state/hooks/userRoomProfile';
 import { useSpaceOptionally } from '../../../hooks/useSpace';
+import { getMouseEventCords } from '../../../utils/dom';
 
 export type ReactionViewerProps = {
   room: Room;
@@ -136,7 +137,7 @@ export const ReactionViewer = as<'div', ReactionViewerProps>(
                           room.roomId,
                           space?.roomId,
                           senderId,
-                          event.currentTarget.getBoundingClientRect(),
+                          getMouseEventCords(event.nativeEvent),
                           'Bottom'
                         );
                       }}

src/app/utils/dom.ts

@@ -224,3 +224,10 @@ export const notificationPermission = (permission: NotificationPermission) => {
   }
   return false;
 };
+
+export const getMouseEventCords = (event: MouseEvent) => ({
+  x: event.clientX,
+  y: event.clientY,
+  width: 0,
+  height: 0,
+});