fix(web): context menu overlap + outclick types (#2506)

web/src/lib/components/shared-components/context-menu/context-menu.svelte

@@ -1,41 +1,33 @@
 <script lang="ts">
 	import { clickOutside } from '$lib/utils/click-outside';
-	import { createEventDispatcher } from 'svelte';
 	import { quintOut } from 'svelte/easing';
 	import { slide } from 'svelte/transition';
 
-	/**
-	 * x coordiante of the context menu.
-	 */
+	export let direction: 'left' | 'right' = 'right';
 	export let x = 0;
-
-	/**
-	 * x coordiante of the context menu.
-	 */
 	export let y = 0;
 
-	const dispatch = createEventDispatcher();
+	let menuElement: HTMLDivElement;
+	let left: number;
+	let top: number;
 
-	let menuEl: HTMLElement;
+	$: if (menuElement) {
+		const rect = menuElement.getBoundingClientRect();
+		const directionWidth = direction === 'left' ? rect.width : 0;
 
-	$: (() => {
-		if (!menuEl) return;
-
-		const rect = menuEl.getBoundingClientRect();
-		x = Math.min(window.innerWidth - rect.width, x);
-		if (y > window.innerHeight - rect.height) {
-			y -= rect.height;
-		}
-	})();
+		left = Math.min(window.innerWidth - rect.width, x - directionWidth);
+		top = Math.min(window.innerHeight - rect.height, y);
+	}
 </script>
 
 <div
 	transition:slide={{ duration: 200, easing: quintOut }}
-	bind:this={menuEl}
+	bind:this={menuElement}
 	class="absolute w-[200px] z-[99999] rounded-lg overflow-hidden shadow-lg"
-	style={`top: ${y}px; left: ${x}px;`}
+	style="left: {left}px; top: {top}px;"
+	role="menu"
 	use:clickOutside
-	on:outclick={() => dispatch('clickoutside')}
+	on:outclick
 >
 	<slot />
 </div>