From 33f33f952150704c9766262504a3d52806a9cea8 Mon Sep 17 00:00:00 2001
From: Mahdi <mahdi.banilohi@gmail.com>
Date: Sun, 8 Nov 2026 14:19:35 +0330
Subject: [PATCH] fix(notes): keep the card menu above the grid

The menu was clipped by the card, so the lower actions disappeared under the next row.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 apps/web/src/views/NotesView.vue | 64 +++++++++++---------------------
 1 file changed, 21 insertions(+), 43 deletions(-)

diff --git a/apps/web/src/views/NotesView.vue b/apps/web/src/views/NotesView.vue
index 82a81bd..c30baac 100644
--- a/apps/web/src/views/NotesView.vue
+++ b/apps/web/src/views/NotesView.vue
@@ -10,6 +10,7 @@ import NoteCategoriesManager from '@/components/notes/NoteCategoriesManager.vue'
 import JalaliDateInput from '@/components/JalaliDateInput.vue';
 import VoiceToTextButton from '@/components/VoiceToTextButton.vue';
 import UiIcon from '@/components/UiIcon.vue';
+import { UiDropdownMenu } from '@/components/ui';
 import { appendSpokenText } from '@/lib/spoken-text';
 import { canManageSettings } from '@/lib/roles';
 import { useAuthStore } from '@/stores/auth';
@@ -721,7 +722,7 @@ function syncMobileFlag() {
 
 function onDocClick(ev: MouseEvent) {
   const t = ev.target as HTMLElement | null;
-  if (!t?.closest?.('.card-menu')) menuOpenId.value = null;
+  if (!t?.closest?.('.card-menu, .ui-dd-panel')) menuOpenId.value = null;
 }
 
 watch(typeFilter, () => {
@@ -962,27 +963,34 @@ onBeforeUnmount(() => {
             </svg>
           </span>
           <div class="card-menu" @click.stop>
-            <button
-              type="button"
-              class="icon-btn menu-btn"
-              @click="menuOpenId = menuOpenId === note.id ? null : note.id"
+            <UiDropdownMenu
+              :open="menuOpenId === note.id"
+              align="end"
+              @update:open="(v) => (menuOpenId = v ? note.id : null)"
             >
-              <UiIcon name="dots-v" :size="18" />
-            </button>
-            <div v-if="menuOpenId === note.id" class="menu-pop">
-              <button type="button" @click="openEditor('default', note)">ویرایش</button>
-              <button type="button" @click="togglePin(note.id)">
+              <template #trigger="{ toggle }">
+                <button
+                  type="button"
+                  class="icon-btn menu-btn"
+                  aria-label="عملیات"
+                  @click.stop="toggle"
+                >
+                  <UiIcon name="dots-v" :size="18" />
+                </button>
+              </template>
+              <button type="button" @click.stop="openEditor('default', note)">ویرایش</button>
+              <button type="button" @click.stop="togglePin(note.id)">
                 {{ note.pinned ? 'برداشتن سنجاق' : 'سنجاق کردن' }}
               </button>
               <button
                 v-if="(note.revisionCount ?? 0) > 0"
                 type="button"
-                @click="openHistory(note)"
+                @click.stop="openHistory(note)"
               >
                 تاریخچه ویرایش
               </button>
-              <button type="button" class="danger" @click="removeNote(note.id)">حذف</button>
-            </div>
+              <button type="button" class="danger" @click.stop="removeNote(note.id)">حذف</button>
+            </UiDropdownMenu>
           </div>
         </div>
 
@@ -1893,36 +1901,6 @@ onBeforeUnmount(() => {
   position: relative;
   margin-inline-start: auto;
 }
-.menu-pop {
-  position: absolute;
-  inset-inline-end: 0;
-  top: 100%;
-  z-index: 5;
-  background: #fff;
-  border: 1px solid #e2e8f0;
-  border-radius: var(--radius);
-  box-shadow: var(--shadow);
-  min-width: 140px;
-  padding: 0.25rem;
-  display: flex;
-  flex-direction: column;
-}
-.menu-pop button {
-  border: 0;
-  background: transparent;
-  text-align: start;
-  padding: 0.45rem 0.65rem;
-  border-radius: var(--radius);
-  cursor: pointer;
-  font-size: 0.85rem;
-  color: #334155;
-}
-.menu-pop button:hover {
-  background: #f8fafc;
-}
-.menu-pop .danger {
-  color: #dc2626;
-}
 
 .card-title {
   margin: 0 0 0.35rem;