From 8738326182af43cbda63ab91fe8b207864d5eaa3 Mon Sep 17 00:00:00 2001
From: Bladesheng <keadr23@gmail.com>
Date: Sat, 22 Feb 2025 13:07:47 +0100
Subject: [PATCH] make edit buttons smaller and more compact

---
 frontend/src/components/Screenshot.vue | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/Screenshot.vue b/frontend/src/components/Screenshot.vue
index a99d138..c398838 100644
--- a/frontend/src/components/Screenshot.vue
+++ b/frontend/src/components/Screenshot.vue
@@ -61,13 +61,21 @@ function onDeleteClick(event: MouseEvent) {
 
 		<div
 			v-if="userStore.isLoggedIn"
-			class="absolute inset-0 flex flex-col items-center justify-center gap-2 opacity-0 transition-opacity duration-200 group-hover:opacity-100"
+			class="absolute inset-0 z-1 flex flex-col items-center justify-center gap-1 opacity-0 transition-opacity duration-200 group-hover:opacity-100"
 		>
-			<div class="rounded bg-gray-600 px-1 text-center capitalize">{{ screenshot.wow_name }}</div>
+			<div class="rounded bg-gray-700 px-1 text-center text-sm capitalize">
+				{{ screenshot.wow_name }}
+			</div>
 
-			<div class="flex gap-2">
-				<Button icon="pi pi-trash" severity="danger" rounded @click="onDeleteClick" />
-				<Button icon="pi pi-pencil" rounded @click="isModalOpen = true" />
+			<div class="flex gap-1">
+				<Button
+					icon="pi pi-trash"
+					severity="danger"
+					@click="onDeleteClick"
+					size="small"
+					class="h-8 w-8"
+				/>
+				<Button icon="pi pi-pencil" @click="isModalOpen = true" size="small" class="h-8 w-8" />
 			</div>
 		</div>
 	</div>