From 132b3e031546bcba4c63e1103ec1c150a809360a Mon Sep 17 00:00:00 2001
From: Rainnny7 <braydonrainnny@gmail.com>
Date: Wed, 17 Apr 2024 10:55:10 -0400
Subject: [PATCH] Make the /player page responsive

---
 .../app/(pages)/player/[[...slug]]/page.tsx   | 23 +++++++++++--------
 .../app/components/player/player-result.tsx   |  5 ++--
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/Frontend/src/app/(pages)/player/[[...slug]]/page.tsx b/Frontend/src/app/(pages)/player/[[...slug]]/page.tsx
index e7e7787..3032867 100644
--- a/Frontend/src/app/(pages)/player/[[...slug]]/page.tsx
+++ b/Frontend/src/app/(pages)/player/[[...slug]]/page.tsx
@@ -27,32 +27,35 @@ const PlayerPage = async ({ params }: PageProps): Promise<JSX.Element> => {
 
 	// Render the page
 	return (
-		<main className="h-screen flex flex-col justify-center items-center">
-			<div className="flex gap-32">
-				{/* Header */}
+		<main className="px-3 h-screen flex justify-center items-center">
+			<div className="mt-0 sm:mt-[45rem] xl:mt-0 flex flex-col xl:flex-row xl:gap-24 2xl:gap-48 transition-all transform-gpu">
+				{/* Banner */}
 				<Image
-					className="my-auto h-[28rem] pointer-events-none"
+					className="hidden sm:flex xl:my-auto h-[28rem] pointer-events-none"
 					src="/media/players.webp"
 					alt="Minecraft Players"
 					width={632}
 					height={632}
 				/>
 
-				<div className="flex flex-col gap-7">
+				{/* Search */}
+				<div className="pb-16 xl:pb-0 flex flex-col gap-7">
 					<h1
 						className={cn(
-							"mt-20 text-6xl text-minecraft-green-3 pointer-events-none",
+							"mt-20 text-6xl text-minecraft-green-3 text-center pointer-events-none",
 							minecrafter.className
 						)}
 					>
 						Player Lookup
 					</h1>
 
-					{/* Error */}
-					{error && <p className="text-red-500">{error}</p>}
+					<div className="flex flex-col gap-5 px-10 xs:px-0">
+						{/* Error */}
+						{error && <p className="text-red-500">{error}</p>}
 
-					{/* Search */}
-					<PlayerSearch query={query} />
+						{/* Search */}
+						<PlayerSearch query={query} />
+					</div>
 
 					{/* Player Result */}
 					{result && <PlayerResult player={result} />}
diff --git a/Frontend/src/app/components/player/player-result.tsx b/Frontend/src/app/components/player/player-result.tsx
index c156a6b..57500ae 100644
--- a/Frontend/src/app/components/player/player-result.tsx
+++ b/Frontend/src/app/components/player/player-result.tsx
@@ -24,6 +24,7 @@ const PlayerResult = ({
 		<div className="flex gap-5 items-center">
 			{/* Player Head */}
 			<Image
+				className="w-24 h-24 sm:w-28 sm:h-28 md:w-32 md:h-32"
 				src={parts.HEAD}
 				alt={`${username}'s Head`}
 				width={128}
@@ -33,7 +34,7 @@ const PlayerResult = ({
 			{/* Name, Unique ID, and Badges */}
 			<div className="flex flex-col gap-1.5">
 				<h1 className="text-xl font-bold text-minecraft-green-3">{username}</h1>
-				<code className="text-zinc-300">{uniqueId}</code>
+				<code className="text-xs xs:text-sm text-zinc-300">{uniqueId}</code>
 
 				{/* Legacy Badge */}
 				{legacy && <p className="text-sm font-semibold uppercase">Legacy</p>}
@@ -57,7 +58,7 @@ const PlayerResult = ({
 					.map(([part, url], index) => (
 						<Link key={index} href={url} target="_blank">
 							<img
-								className="h-28 hover:scale-[1.02] transition-all transform-gpu"
+								className="h-20 sm:h-24 md:h-28 hover:scale-[1.02] transition-all transform-gpu"
 								src={url}
 								alt={`${username}'s ${part}`}
 							/>