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/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"