From ba75f4025421d8ceee990c34678896dd4875e540 Mon Sep 17 00:00:00 2001
From: BetaHuhn <schiller@mxis.ch>
Date: Wed, 10 Nov 2021 14:22:57 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BF=EF=B8=8F=20Increase=20clickable=20ari?=
 =?UTF-8?q?a=20of=20external=20link=20icon?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/components/Link/Item.vue | 24 +++++++++++++++++-------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/client/components/Link/Item.vue b/client/components/Link/Item.vue
index 16d4b27..518b2b4 100644
--- a/client/components/Link/Item.vue
+++ b/client/components/Link/Item.vue
@@ -1,11 +1,11 @@
 <template>
   <div
     :draggable="draggable"
-    title="Click to open link details"
+    title="Open link details"
     @[dragStartEvent].stop="startDrag($event)"
     @[dragStopEvent].stop="stopDrag($event)"
     @click.stop="openLinkDetails"
-    @click.middle="openLinkPage"
+    @click.middle.stop="openLinkPage"
   >
     <div class="link-item" @mouseover="hover = true" @mouseleave="hover = false">
       <Img v-if="showImage && link.meta && link.meta.image" :src="imageUrl" class="image" @loaded="imageLoaded" />
@@ -15,8 +15,17 @@
         <p>{{ domain }}</p>
       </div>
       <span>{{ new Date(link.addedAt).toLocaleString() }}</span>
-      <a :href="link.url" target="_blank" rel="noopener" @click.stop>
-        <Icon v-if="hover" name="externalLink" class="delete-icon" />
+      <a
+        v-if="hover"
+        class="external"
+        :href="link.url"
+        target="_blank"
+        rel="noopener"
+        title="Open URL in new tab"
+        @click.stop
+        @click.middle.stop
+      >
+        <Icon name="externalLink" size="21px" />
       </a>
     </div>
   </div>
@@ -162,10 +171,11 @@ export default {
 		}
 	}
 
-	.delete-icon {
+	.external {
 		position: absolute;
-		right: 1rem;
-		bottom: 1rem;
+		right: 0.2rem;
+		bottom: 0.2rem;
 		color: var(--text-light);
+		padding: 0.8rem;
 	}
 </style>
\ No newline at end of file