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

@@ -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(() => {

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)
       },
     },
   },