feat(web): better context menu position (#4271)

* feat(web): better context menu position

* fix: album context menu

* fix: add middle variant

* fix: rest of context menus

* fix: linting error

web/src/lib/components/album-page/album-card.svelte

@@ -6,6 +6,7 @@
   import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
   import IconButton from '../elements/buttons/icon-button.svelte';
   import type { OnClick, OnShowContextMenu } from './album-card';
+  import { getContextMenuPosition } from '../../utils/context-menu';
 
   export let album: AlbumResponseDto;
   export let isSharingView = false;
@@ -41,12 +42,8 @@
     }
   };
 
-  const showAlbumContextMenu = (e: MouseEvent) => {
-    dispatchShowContextMenu('showalbumcontextmenu', {
-      x: e.clientX,
-      y: e.clientY,
-    });
-  };
+  const showAlbumContextMenu = (e: MouseEvent) =>
+    dispatchShowContextMenu('showalbumcontextmenu', getContextMenuPosition(e));
 
   onMount(async () => {
     imageData = (await loadHighQualityThumbnail(album.albumThumbnailAssetId)) || noThumbnailUrl;

web/src/lib/components/album-page/share-info-modal.svelte

@@ -10,6 +10,7 @@
   import { notificationController, NotificationType } from '../shared-components/notification/notification';
   import { handleError } from '../../utils/handle-error';
   import ConfirmDialogue from '../shared-components/confirm-dialogue.svelte';
+  import { getContextMenuPosition } from '../../utils/context-menu';
 
   export let album: AlbumResponseDto;
 
@@ -34,16 +35,8 @@
     }
   });
 
-  const showContextMenu = (user: UserResponseDto) => {
-    const iconButton = document.getElementById('icon-' + user.id);
-
-    if (iconButton) {
-      position = {
-        x: iconButton.getBoundingClientRect().left,
-        y: iconButton.getBoundingClientRect().bottom,
-      };
-    }
-
+  const showContextMenu = (event: MouseEvent, user: UserResponseDto) => {
+    position = getContextMenuPosition(event);
     selectedMenuUser = user;
     selectedRemoveUser = null;
   };
@@ -105,7 +98,7 @@
             {#if isOwned}
               <div>
                 <CircleIconButton
-                  on:click={() => showContextMenu(user)}
+                  on:click={(event) => showContextMenu(event, user)}
                   logo={DotsVertical}
                   backgroundColor="transparent"
                   hoverColor="#e2e7e9"