polish: button positioning in SkinButton

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%;
 

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" />