fix: exhaustive edit pencils with click stop

src/components/admin/OrderCard.vue

@@ -29,7 +29,7 @@
           <div class="flex flex-col">
             <div class="flex items-center gap-2">
               <h3 class="font-bold leading-none">{{ order.first_name }} {{ order.last_name }}</h3>
-              <button @click="$emit('edit-order', order)" class="opacity-0 group-hover:opacity-100 transition-opacity p-1 hover:bg-primary/10 rounded text-primary">
+              <button @click.stop="$emit('edit-order', order)" class="p-1.5 bg-primary/5 hover:bg-primary/20 rounded-md text-primary transition-colors">
                 <Edit2 class="w-3 h-3" />
               </button>
             </div>
@@ -44,30 +44,39 @@
 
         <div class="mt-8 grid grid-cols-2 gap-x-8 gap-y-4 border-t border-border/10 pt-6">
           <div v-if="order.phone" class="space-y-1">
-            <span class="text-[9px] font-bold uppercase text-muted-foreground tracking-widest">{{ t("admin.fields.phone") }}</span>
+            <div class="flex items-center justify-between">
+              <span class="text-[9px] font-bold uppercase text-muted-foreground tracking-widest">{{ t("admin.fields.phone") }}</span>
+              <button @click.stop="$emit('edit-order', order)" class="p-1 text-primary hover:bg-primary/5 rounded"><Edit2 class="w-2.5 h-2.5" /></button>
+            </div>
             <p class="text-xs font-medium">{{ order.phone }}</p>
           </div>
           <div class="space-y-1">
-            <span class="text-[9px] font-bold uppercase text-muted-foreground tracking-widest">{{ t("admin.labels.registered") }}</span>
+            <div class="flex items-center justify-between">
+              <span class="text-[9px] font-bold uppercase text-muted-foreground tracking-widest">{{ t("admin.labels.registered") }}</span>
+              <button @click.stop="$emit('edit-order', order)" class="p-1 text-primary hover:bg-primary/5 rounded"><Edit2 class="w-2.5 h-2.5" /></button>
+            </div>
             <p class="text-xs font-medium">{{ formatDate(order.created_at) }}</p>
           </div>
-          <div class="space-y-1 relative group/edit">
+          <div class="space-y-1">
             <div class="flex items-center justify-between">
               <span class="text-[9px] font-bold uppercase text-muted-foreground tracking-widest">{{ t("admin.fields.address") }}</span>
-              <button @click="$emit('edit-order', order)" class="opacity-0 group-hover/edit:opacity-100 p-1 text-primary"><Edit2 class="w-2.5 h-2.5" /></button>
+              <button @click.stop="$emit('edit-order', order)" class="p-1 text-primary hover:bg-primary/5 rounded"><Edit2 class="w-2.5 h-2.5" /></button>
             </div>
             <p class="text-xs font-medium leading-relaxed">{{ order.shipping_address || '—' }}</p>
           </div>
           <div class="space-y-1">
-             <span class="text-[9px] font-bold uppercase text-muted-foreground tracking-widest">{{ t("admin.fields.deliveryType") }}</span>
+             <div class="flex items-center justify-between">
+               <span class="text-[9px] font-bold uppercase text-muted-foreground tracking-widest">{{ t("admin.fields.deliveryType") }}</span>
+               <button @click.stop="$emit('edit-order', order)" class="p-1 text-primary hover:bg-primary/5 rounded"><Edit2 class="w-2.5 h-2.5" /></button>
+             </div>
              <p class="text-xs font-medium">{{ order.delivery_type === 'cargo' ? t("admin.fields.cargo") : t("admin.fields.pickup") }}</p>
           </div>
         </div>
 
-          <div v-if="order.notes" class="mt-8 p-4 bg-primary/5 border border-primary/10 rounded-2xl italic relative group/edit">
+          <div v-if="order.notes" class="mt-8 p-4 bg-primary/5 border border-primary/10 rounded-2xl italic">
             <div class="flex items-center justify-between mb-2">
               <span class="text-[9px] font-bold uppercase text-primary/60 tracking-widest">{{ t("admin.fields.projectNotes") }}</span>
-              <button @click="$emit('edit-order', order)" class="opacity-0 group-hover/edit:opacity-100 p-1 text-primary"><Edit2 class="w-2.5 h-2.5" /></button>
+              <button @click.stop="$emit('edit-order', order)" class="p-1 text-primary hover:bg-primary/5 rounded"><Edit2 class="w-2.5 h-2.5" /></button>
             </div>
             <p class="text-[11px] leading-relaxed">"{{ order.notes }}"</p>
           </div>
@@ -171,7 +180,7 @@
              <span class="text-[10px] font-bold uppercase text-muted-foreground">{{ t("admin.fields.totalPrice") }}</span>
              <div class="flex items-center gap-2">
                <p class="text-2xl font-black font-display text-primary">{{ order.invoice_amount || 0 }} EUR</p>
-               <button @click="$emit('edit-order', order)" class="opacity-0 group-hover/edit:opacity-100 p-1 text-primary"><Edit2 class="w-3.5 h-3.5" /></button>
+               <button @click.stop="$emit('edit-order', order)" class="opacity-0 group-hover/edit:opacity-100 p-1 text-primary"><Edit2 class="w-3.5 h-3.5" /></button>
              </div>
            </div>