From fcffdce6d85f6e0944d7ed4fbb47860130fda8dc Mon Sep 17 00:00:00 2001
From: Catherine Renelle <32781029+catrenelle@users.noreply.github.com>
Date: Sun, 15 Feb 2026 21:10:17 -0500
Subject: [PATCH] Fix payee action buttons layout and chart tooltip hover
 highlight

Place edit and delete buttons side by side in payees table using flex.
Debounce chart highlight clear to persist during tooltip hover transitions.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/views/payees/PayeesView.vue   | 16 +++++++++-------
 frontend/src/views/reports/ReportsView.vue | 19 +++++++++++++++----
 2 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/frontend/src/views/payees/PayeesView.vue b/frontend/src/views/payees/PayeesView.vue
index a60a872..85663b4 100644
--- a/frontend/src/views/payees/PayeesView.vue
+++ b/frontend/src/views/payees/PayeesView.vue
@@ -51,12 +51,14 @@
           </v-chip>
         </template>
         <template #item.actions="{ item }">
-          <v-btn icon size="x-small" variant="text" @click="openEditDialog(item)">
-            <v-icon size="small">mdi-pencil</v-icon>
-          </v-btn>
-          <v-btn icon size="x-small" variant="text" color="error" @click="confirmDelete(item)">
-            <v-icon size="small">mdi-delete</v-icon>
-          </v-btn>
+          <div class="d-flex align-center ga-1">
+            <v-btn icon size="x-small" variant="text" @click="openEditDialog(item)">
+              <v-icon size="small">mdi-pencil</v-icon>
+            </v-btn>
+            <v-btn icon size="x-small" variant="text" color="error" @click="confirmDelete(item)">
+              <v-icon size="small">mdi-delete</v-icon>
+            </v-btn>
+          </div>
         </template>
       </v-data-table>
     </v-card>
@@ -176,7 +178,7 @@ const headers = [
   { title: 'Default Category', key: 'defaultCategoryName' },
   { title: 'Aliases', key: 'aliases', sortable: false },
   { title: 'Status', key: 'isActive', width: '90px' },
-  { title: 'Actions', key: 'actions', sortable: false, width: '90px' },
+  { title: 'Actions', key: 'actions', sortable: false, width: '100px' },
 ]
 
 const filteredPayees = computed(() => {
diff --git a/frontend/src/views/reports/ReportsView.vue b/frontend/src/views/reports/ReportsView.vue
index 8beee11..7a07c2a 100644
--- a/frontend/src/views/reports/ReportsView.vue
+++ b/frontend/src/views/reports/ReportsView.vue
@@ -336,23 +336,34 @@ const spendingChartSeries = computed(() =>
   spending.value?.categories.map(c => c.amount) ?? []
 )
 
+let chartLeaveTimer: ReturnType<typeof setTimeout> | null = null
+
+function setChartHighlight(categoryName: string | null) {
+  if (chartLeaveTimer) { clearTimeout(chartLeaveTimer); chartLeaveTimer = null }
+  if (categoryName) {
+    highlightedCategory.value = categoryName
+  } else {
+    chartLeaveTimer = setTimeout(() => { highlightedCategory.value = null }, 100)
+  }
+}
+
 const spendingChartOptions = computed(() => ({
   chart: {
     type: 'donut' as const,
     events: {
       dataPointMouseEnter: (_e: any, _ctx: any, config: any) => {
         const labels = spending.value?.categories.map(c => c.categoryName) ?? []
-        highlightedCategory.value = labels[config.dataPointIndex] ?? null
+        setChartHighlight(labels[config.dataPointIndex] ?? null)
       },
       dataPointMouseLeave: () => {
-        highlightedCategory.value = null
+        setChartHighlight(null)
       },
       legendMouseOver: (_ctx: any, _opts: any, config: any) => {
         const labels = spending.value?.categories.map(c => c.categoryName) ?? []
-        highlightedCategory.value = labels[config.seriesIndex] ?? null
+        setChartHighlight(labels[config.seriesIndex] ?? null)
       },
       legendMouseOut: () => {
-        highlightedCategory.value = null
+        setChartHighlight(null)
       },
     },
   },