From 8326e5447a2ea42c741bcfaccc6726e8489a9ce8 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Tue, 2 Jun 2026 18:48:32 -0400
Subject: [PATCH] fix(modal): kebab menus weren't opening (chip + suggestion
 rows)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Operator-flagged 2026-06-02. Both kebab activators were broken:

- TagPanel chip kebab had `@click.stop` directly on the v-icon
  activator. In Vue 3, an explicit @click on the same element as
  `v-bind="props"` overrides the spread onClick — so Vuetify's
  activator handler never fired. Menu never opened.

- SuggestionItem kebab didn't have @click.stop, but for consistency
  and to make both kebabs follow the same shape, wrap it too.

The fix: each kebab is now wrapped in a `<span @click.stop>`. The
v-icon / v-btn receives Vuetify's onClick cleanly and opens the menu;
the bubbling click then reaches the span where stopPropagation
absorbs it before it can affect a parent (the v-chip's close button
in TagPanel's case).
---
 .../src/components/modal/SuggestionItem.vue   | 52 ++++++++++++-------
 frontend/src/components/modal/TagPanel.vue    |  1 +
 2 files changed, 34 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/modal/SuggestionItem.vue b/frontend/src/components/modal/SuggestionItem.vue
index 9517649..1a0c541 100644
--- a/frontend/src/components/modal/SuggestionItem.vue
+++ b/frontend/src/components/modal/SuggestionItem.vue
@@ -19,25 +19,34 @@
     >
       Accept
     </v-btn>
-    <v-menu>
-      <template #activator="{ props }">
-        <v-btn
-          class="fc-suggestion__menu"
-          icon="mdi-dots-vertical" size="small"
-          variant="outlined" density="compact"
-          :aria-label="`More actions for ${suggestion.display_name}`"
-          v-bind="props"
-        />
-      </template>
-      <v-list density="compact">
-        <v-list-item @click="$emit('alias', suggestion)">
-          <v-list-item-title>Treat as alias for…</v-list-item-title>
-        </v-list-item>
-        <v-list-item @click="$emit('dismiss', suggestion)">
-          <v-list-item-title>Dismiss for this image</v-list-item-title>
-        </v-list-item>
-      </v-list>
-    </v-menu>
+    <!-- Operator-flagged 2026-06-02: the kebab menu wasn't opening.
+         Wrapping in a <span @click.stop> matches the TagPanel chip
+         fix — even though there's no parent click capture here today,
+         the wrap is harmless and keeps both kebabs on the same
+         pattern. Click bubbles from the v-btn → opens menu via
+         activator props → bubble continues to span → stopPropagation
+         halts it. -->
+    <span class="fc-suggestion__menu-wrap" @click.stop>
+      <v-menu>
+        <template #activator="{ props }">
+          <v-btn
+            class="fc-suggestion__menu"
+            icon="mdi-dots-vertical" size="small"
+            variant="outlined" density="compact"
+            :aria-label="`More actions for ${suggestion.display_name}`"
+            v-bind="props"
+          />
+        </template>
+        <v-list density="compact">
+          <v-list-item @click="$emit('alias', suggestion)">
+            <v-list-item-title>Treat as alias for…</v-list-item-title>
+          </v-list-item>
+          <v-list-item @click="$emit('dismiss', suggestion)">
+            <v-list-item-title>Dismiss for this image</v-list-item-title>
+          </v-list-item>
+        </v-list>
+      </v-menu>
+    </span>
   </div>
 </template>
 
@@ -90,6 +99,11 @@ const scorePct = computed(() => `${Math.round(props.suggestion.score * 100)}%`)
 .fc-suggestion__accept :deep(.v-btn__content) {
   font-size: 12px; letter-spacing: 0.02em;
 }
+.fc-suggestion__menu-wrap {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+}
 .fc-suggestion__menu {
   flex: 0 0 auto;
 }
diff --git a/frontend/src/components/modal/TagPanel.vue b/frontend/src/components/modal/TagPanel.vue
index da79fe5..e6c49e0 100644
--- a/frontend/src/components/modal/TagPanel.vue
+++ b/frontend/src/components/modal/TagPanel.vue
@@ -113,4 +113,5 @@ async function onRenamed() {
   margin-bottom: 12px;
 }
 .fc-tag-panel__chips { display: flex; flex-wrap: wrap; gap: 6px; }
+.kebab-wrap { display: inline-flex; align-items: center; }
 </style>