From b3bc3a873123c2c6d4155d860251c9d094cc4d05 Mon Sep 17 00:00:00 2001
From: "Calum H." <hendersoncal117@gmail.com>
Date: Thu, 22 May 2025 23:17:54 +0100
Subject: [PATCH] polish: button positioning in SkinButton

---
 apps/app-frontend/src/pages/Skins.vue          | 5 +----
 packages/ui/src/components/skin/SkinButton.vue | 2 +-
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/apps/app-frontend/src/pages/Skins.vue b/apps/app-frontend/src/pages/Skins.vue
index ad5917bf0..93a123ef8 100644
--- a/apps/app-frontend/src/pages/Skins.vue
+++ b/apps/app-frontend/src/pages/Skins.vue
@@ -296,7 +296,6 @@ await Promise.all([loadCapes(), loadSkins(), loadCurrentUser()])
             @select="changeSkin(skin)"
           >
             <template #overlay-buttons>
-              <div class="flex gap-2" style="pointer-events: auto;">
                   <Button
                     color="green"
                     aria-label="Edit skin"
@@ -315,8 +314,6 @@ await Promise.all([loadCapes(), loadSkins(), loadCurrentUser()])
                   >
                     <TrashIcon class="w-5 h-5" />
                   </Button>
-                
-              </div>
             </template>
           </SkinButton>
         </div>
@@ -404,7 +401,7 @@ $skin-card-gap: 4px;
 
 .skin-card-grid {
   display: grid;
-  grid-template-columns: repeat(6, 1fr);
+  grid-template-columns: repeat(4, 1fr);
   gap: $skin-card-gap;
   width: 100%;
 
diff --git a/packages/ui/src/components/skin/SkinButton.vue b/packages/ui/src/components/skin/SkinButton.vue
index 8843a7088..634c26ed9 100644
--- a/packages/ui/src/components/skin/SkinButton.vue
+++ b/packages/ui/src/components/skin/SkinButton.vue
@@ -67,7 +67,7 @@ function onImageLoad(type: 'forward' | 'backward') {
 
     <span
       v-if="$slots['overlay-buttons']"
-      class="absolute inset-0 flex items-end justify-start p-2 translate-y-4 scale-75 opacity-0 transition-all group-hover:opacity-100 group-hover:scale-100 group-hover:translate-y-0 group-hover:translate-x-0"
+      class="absolute inset-0 flex items-end justify-start p-1 gap-1 translate-y-4 scale-75 opacity-0 transition-all group-hover:opacity-100 group-hover:scale-100 group-hover:translate-y-0 group-hover:translate-x-0"
       style="pointer-events: none;"
     >
       <slot name="overlay-buttons" />