diff --git a/src/app/components/event-readers/EventReaders.tsx b/src/app/components/event-readers/EventReaders.tsx index 75fdf0da..c7900237 100644 --- 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 156f4f63..9940a751 100644 --- 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 0e7ca833..6c686bc5 100644 --- 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 f4c3f719..e467bc58 100644 --- 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, +});