Open user profile at around mouse anchor (#2440)

diff --git a/src/app/components/event-readers/EventReaders.tsx b/src/app/components/event-readers/EventReaders.tsx
index 75fdf0da844d57c1070ea9725977d383a8fd3288..c7900237507e1f68d71453a4d8900d65f732ac81 100644 (file)
--- a/src/app/components/event-readers/EventReaders.tsx
+++ b/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'
                       );
                     }}

diff --git a/src/app/features/common-settings/members/Members.tsx b/src/app/features/common-settings/members/Members.tsx
index 156f4f63b08803f93014d186925a2834117ff7ff..9940a751425ee340324f1fb791736c6bb95f2dac 100644 (file)
--- a/src/app/features/common-settings/members/Members.tsx
+++ b/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));
     }
   };
 

diff --git a/src/app/features/room/reaction-viewer/ReactionViewer.tsx b/src/app/features/room/reaction-viewer/ReactionViewer.tsx
index 0e7ca833b824b63dcc8a329a9345fa92c5a47f5b..6c686bc5696abc5647dc31f5336520a70779ac73 100644 (file)
--- a/src/app/features/room/reaction-viewer/ReactionViewer.tsx
+++ b/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'
                         );
                       }}

diff --git a/src/app/utils/dom.ts b/src/app/utils/dom.ts
index f4c3f719be9c3171b83ff915591b67c6a788ea90..e467bc580a81922469ef4551b3fd3c5d84f3f5df 100644 (file)
--- a/src/app/utils/dom.ts
+++ b/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,
+});