From 4739297ba50742fd70ae24fbe57e70222b9794d0 Mon Sep 17 00:00:00 2001
From: Liam <liam@fascinated.cc>
Date: Thu, 18 Apr 2024 08:21:03 +0100
Subject: [PATCH] make the skin part dialog imags slightly smaller on mobile

---
 src/app/components/player/skin-part-image.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/app/components/player/skin-part-image.tsx b/src/app/components/player/skin-part-image.tsx
index 85cbe09..a20aa36 100644
--- a/src/app/components/player/skin-part-image.tsx
+++ b/src/app/components/player/skin-part-image.tsx
@@ -76,20 +76,20 @@ export function SkinPartImage({ playerName, part, url, size = 64 }: SkinPartImag
               }}
             />
           </DialogTrigger>
-          <DialogContent className="w-fit min-w-72 h-fit">
+          <DialogContent className="w-fit h-fit">
             <DialogHeader>
               <DialogTitle>
                 {playerName}&apos;s {partName}
               </DialogTitle>
               <DialogDescription>See the skin part below.</DialogDescription>
             </DialogHeader>
-            <div className="flex items-center w-max flex-col divide-y md:flex-row md:divide-x md:divide-y-0 text-muted-foreground">
+            <div className="flex items-center w-full flex-col divide-y md:flex-row md:divide-x md:divide-y-0 text-muted-foreground">
               {skinPartOverlay.map((overlay, index) => {
                 return (
-                  <div key={index} className="p-2 text-center font-semibold flex flex-col gap-2">
+                  <div key={index} className="p-2 text-center items-center font-semibold flex flex-col gap-2">
                     <p>{overlay.title}</p>
                     <img
-                      className="h-[256px] w-max"
+                      className="h-[200px] md:h-[256px]"
                       src={url + (overlay.overlays ? "?overlays=true" : "")}
                       alt={`The player's ${partName}`}
                       loading="lazy"