From 95fef83dcf7cc65456dacee03742c1e58f82dbc3 Mon Sep 17 00:00:00 2001
From: Liam <liam@fascinated.cc>
Date: Fri, 19 Apr 2024 21:43:32 +0100
Subject: [PATCH] fix server page for mobile

---
 .../[platform]/[[...hostname]]/page.tsx       |  2 +-
 src/app/components/player/player-view.tsx     |  2 +-
 src/app/components/server/server-view.tsx     | 62 +++++++++----------
 3 files changed, 32 insertions(+), 34 deletions(-)

diff --git a/src/app/(pages)/server/[platform]/[[...hostname]]/page.tsx b/src/app/(pages)/server/[platform]/[[...hostname]]/page.tsx
index a0075d2..3a044bc 100644
--- a/src/app/(pages)/server/[platform]/[[...hostname]]/page.tsx
+++ b/src/app/(pages)/server/[platform]/[[...hostname]]/page.tsx
@@ -135,7 +135,7 @@ export default async function Page({ params: { platform, hostname } }: Params):
       {error && <ErrorCard message={error} />}
       {server != null && (
         <ContextMenu>
-          <ContextMenuTrigger>
+          <ContextMenuTrigger asChild>
             <ServerView server={server} favicon={favicon} />
           </ContextMenuTrigger>
           <ContextMenuContent className="flex flex-col">
diff --git a/src/app/components/player/player-view.tsx b/src/app/components/player/player-view.tsx
index a988098..b467541 100644
--- a/src/app/components/player/player-view.tsx
+++ b/src/app/components/player/player-view.tsx
@@ -45,7 +45,7 @@ export function PlayerView({ player }: PlayerViewProps): ReactElement {
           </div>
         </div>
       </Card>
-      <div className="flex gap-2">
+      <div className="flex gap-2 flex-wrap">
         <CodeDialog
           title="Player Data"
           description="The player's data from the API"
diff --git a/src/app/components/server/server-view.tsx b/src/app/components/server/server-view.tsx
index 4b556f3..6235c7a 100644
--- a/src/app/components/server/server-view.tsx
+++ b/src/app/components/server/server-view.tsx
@@ -24,40 +24,38 @@ type ServerViewProps = {
 
 export function ServerView({ server, favicon }: ServerViewProps): ReactElement {
   return (
-    <div className="flex flex-col gap-2 items-center scale-75 xs:scale-100">
-      <Card classNameContent="w-max xs:w-fit relative">
-        <div
-          className={cn(
-            "w-[31rem] relative p-2 flex gap-2 rounded-lg pointer-events-none",
-            'bg-[url("/media/server-background.png")]',
-          )}
-        >
-          {/* Favicon */}
-          <Image
-            src={favicon || `${config.apiUrl}/server/icon/fallback`}
-            alt={`${server.hostname}'s Favicon`}
-            width={64}
-            height={64}
-          />
+    <div className="flex relative flex-col gap-2 items-center scale-75 xs:scale-100 w-screen">
+      <div
+        className={cn(
+          "w-[29rem] relative p-2 flex gap-2 rounded-lg pointer-events-none",
+          'bg-[url("/media/server-background.png")]',
+        )}
+      >
+        {/* Favicon */}
+        <Image
+          src={favicon || `${config.apiUrl}/server/icon/fallback`}
+          alt={`${server.hostname}'s Favicon`}
+          width={64}
+          height={64}
+        />
 
-          {/* Name & MOTD */}
-          <div className={cn("flex flex-col leading-[1.3rem] w-full", minecraft.className)}>
-            <h1>{server.hostname}</h1>
-            {server.motd.html.map((line: string, index: number): ReactElement => {
-              return <p key={index} className="pointer-events-auto" dangerouslySetInnerHTML={{ __html: line }}></p>;
-            })}
-          </div>
-
-          {/* Ping */}
-          <div className={cn("absolute top-0.5 right-0.5 flex items-center", minecraft.className)}>
-            <p>
-              {server.players.online}/{server.players.max}
-            </p>
-            <Image src="/media/full-ping.png" alt="Ping!" width={28} height={28} />
-          </div>
+        {/* Name & MOTD */}
+        <div className={cn("flex flex-col leading-[1.3rem]", minecraft.className)}>
+          <h1>{server.hostname}</h1>
+          {server.motd.html.map((line: string, index: number): ReactElement => {
+            return <p key={index} className="pointer-events-auto" dangerouslySetInnerHTML={{ __html: line }}></p>;
+          })}
         </div>
-      </Card>
-      <div className="flex gap-2">
+
+        {/* Ping */}
+        <div className={cn("absolute top-0.5 right-0.5 flex items-center", minecraft.className)}>
+          <p>
+            {server.players.online}/{server.players.max}
+          </p>
+          <Image src="/media/full-ping.png" alt="Ping!" width={28} height={28} />
+        </div>
+      </div>
+      <div className="flex gap-2 flex-wrap">
         <CodeDialog
           title="Server Data"
           description="The servers's data from the API"