From 681e59f7c76eb5b984aa968782a81d08fd271cc3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20Marseault?=
 <22910497+Larsluph@users.noreply.github.com>
Date: Sun, 5 Nov 2023 18:00:42 +0100
Subject: [PATCH] perf(TorrentCard): Only process drag on handle (#1253)

---
 src/components/Settings/VueTorrent/DashboardItem.vue | 5 ++---
 src/components/Settings/VueTorrent/TorrentCard.vue   | 2 +-
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/Settings/VueTorrent/DashboardItem.vue b/src/components/Settings/VueTorrent/DashboardItem.vue
index e3004245..d06eb18c 100644
--- a/src/components/Settings/VueTorrent/DashboardItem.vue
+++ b/src/components/Settings/VueTorrent/DashboardItem.vue
@@ -6,15 +6,14 @@ defineEmits<{ update: [value: void] }>()
 
 <template>
   <tr class="table-row">
-    <td><v-icon icon="mdi-drag-vertical" /></td>
+    <td><v-icon icon="mdi-drag-vertical" class="dnd-handle" /></td>
     <td><v-btn density="compact" :icon="property.active ? 'mdi-checkbox-marked' : 'mdi-checkbox-blank-outline'" variant="flat" @click="$emit('update')" /></td>
     <td>{{ $t(`torrent.properties.${property.name}`) }}</td>
   </tr>
 </template>
 
 <style scoped>
-tr.table-row {
+td .dnd-handle {
   cursor: move;
-  margin-bottom: 12px !important;
 }
 </style>
diff --git a/src/components/Settings/VueTorrent/TorrentCard.vue b/src/components/Settings/VueTorrent/TorrentCard.vue
index 3770714d..7448f950 100644
--- a/src/components/Settings/VueTorrent/TorrentCard.vue
+++ b/src/components/Settings/VueTorrent/TorrentCard.vue
@@ -32,7 +32,7 @@ function toggleActive(isBusy: boolean, property: TorrentProperty) {
         <v-list-subheader>{{ $t('settings.vuetorrent.torrentCard.busyTorrentTip') }}</v-list-subheader>
 
         <v-table>
-          <draggable v-model="busyTorrentProperties" item-key="name" tag="tbody">
+          <draggable v-model="busyTorrentProperties" item-key="name" tag="tbody" handle=".dnd-handle">
             <template v-slot:item="{ element }">
               <DashboardItem :property="element" @update="toggleActive(true, element)" />
             </template>