fix: TypeError: can't access property "emitsOptions", r is null

app/javascript/dashboard/components-next/Inbox/InboxCard.vue

@@ -148,7 +148,12 @@ const contextMenuActions = {
   },
 };
 
-onBeforeMount(contextMenuActions.close);
+// Reset context menu state on mount without emitting events
+// to prevent event storm when multiple cards mount simultaneously
+onBeforeMount(() => {
+  isContextMenuOpen.value = false;
+  contextMenuPosition.value = { x: null, y: null };
+});
 </script>
 
 <template>

app/javascript/dashboard/components/ui/ContextMenu.vue

@@ -7,7 +7,12 @@ import {
   useTemplateRef,
   inject,
 } from 'vue';
-import { useWindowSize, useElementBounding, useScrollLock } from '@vueuse/core';
+import {
+  useWindowSize,
+  useElementBounding,
+  useScrollLock,
+  onClickOutside,
+} from '@vueuse/core';
 
 import TeleportWithDirection from 'dashboard/components-next/TeleportWithDirection.vue';
 
@@ -77,6 +82,9 @@ const handleClose = () => {
   emit('close');
 };
 
+// Close menu when clicking outside
+onClickOutside(menuRef, handleClose);
+
 onUnmounted(() => {
   isLocked.value = false;
 });

app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue

@@ -234,7 +234,8 @@ onMounted(() => {
       />
       <div
         ref="notificationList"
-        class="flex flex-col gap-0.5 w-full h-[calc(100%-56px)] pb-4 overflow-x-hidden px-2 overflow-y-auto divide-y divide-n-weak [&>*:hover]:!border-y-transparent [&>*.active]:!border-y-transparent [&>*:hover+*]:!border-t-transparent [&>*.active+*]:!border-t-transparent"
+        class="flex flex-col gap-0.5 w-full h-[calc(100%-56px)] pb-4 overflow-x-hidden px-2 divide-y divide-n-weak [&>*:hover]:!border-y-transparent [&>*.active]:!border-y-transparent [&>*:hover+*]:!border-t-transparent [&>*.active+*]:!border-t-transparent"
+        :class="isInboxContextMenuOpen ? 'overflow-hidden' : 'overflow-y-auto'"
       >
         <InboxCard
           v-for="notificationItem in notifications"