From 587c1bca82acd68053291528b0a402334f294f84 Mon Sep 17 00:00:00 2001
From: Liam <liam@fascinated.cc>
Date: Thu, 18 Apr 2024 08:26:02 +0100
Subject: [PATCH] fix mobile support on player page

---
 src/app/components/player/player-view.tsx     | 2 +-
 src/app/components/player/skin-part-image.tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/components/player/player-view.tsx b/src/app/components/player/player-view.tsx
index da7c7d3..0cd64b0 100644
--- a/src/app/components/player/player-view.tsx
+++ b/src/app/components/player/player-view.tsx
@@ -29,7 +29,7 @@ export function PlayerView({ player }: PlayerViewProps): ReactElement {
           </CodeDialog>
         </div>
 
-        <div>
+        <div className="flex items-center flex-col">
           <SkinPartImage playerName={player.username} part={SkinPart.HEAD} url={player.skin.parts.head} size={96} />
         </div>
 
diff --git a/src/app/components/player/skin-part-image.tsx b/src/app/components/player/skin-part-image.tsx
index 103d48f..7b771fd 100644
--- a/src/app/components/player/skin-part-image.tsx
+++ b/src/app/components/player/skin-part-image.tsx
@@ -86,10 +86,10 @@ export function SkinPartImage({ playerName, part, url, size = 64 }: SkinPartImag
             <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 items-center font-semibold flex flex-col gap-2">
+                  <div key={index} className="p-2 w-max text-center items-center font-semibold flex flex-col gap-2">
                     <p>{overlay.title}</p>
                     <img
-                      className="h-[200px] md:h-[256px]"
+                      className="h-[200px] md:h-[256px] w-max"
                       src={url + (overlay.overlays ? "?overlays=true" : "")}
                       alt={`The ${playerName}'s ${partName}`}
                       loading="lazy"