From f1447ebb9d5b371ee7aa8c3988f28f56b6e8d2a9 Mon Sep 17 00:00:00 2001
From: Liam <liam@fascinated.cc>
Date: Thu, 18 Apr 2024 05:24:21 +0100
Subject: [PATCH] update mojang status page

---
 src/app/(pages)/mojang/status/page.tsx | 69 ++++++++++++++------------
 1 file changed, 36 insertions(+), 33 deletions(-)

diff --git a/src/app/(pages)/mojang/status/page.tsx b/src/app/(pages)/mojang/status/page.tsx
index 08ac819..40988b0 100644
--- a/src/app/(pages)/mojang/status/page.tsx
+++ b/src/app/(pages)/mojang/status/page.tsx
@@ -64,39 +64,42 @@ export default async function Page(): Promise<ReactElement> {
   const endpointsSize = Object.entries(endpoints).length;
 
   return (
-    <Card className="w-full xs:w-fit text-center">
-      <h1 className="text-xl">Mojang Status</h1>
-      <p>The current status of Mojang Services</p>
-
-      <div>
-        {endpointsSize === 0 && <p>Unable to fetch endpoint statuses</p>}
-        {endpointsSize > 0 && (
-          <Table className="mt-4 md:w-[500px] text-start">
-            <TableHeader>
-              <TableRow>
-                <TableHead className="pl-1">Service</TableHead>
-                <TableHead className="pl-1 text-center">Status</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {Object.entries(endpoints).map(([url, status]) => {
-                return (
-                  <TableRow key={url}>
-                    <TableCell className="p-[0.3rem]">
-                      <Link className="hover:text-primary transition-all" href={url} target="_blank">
-                        {url}
-                      </Link>
-                    </TableCell>
-                    <TableCell className={cn(getColor(status), "p-[0.3rem] text-center")}>
-                      {formatStatus(status)}
-                    </TableCell>
-                  </TableRow>
-                );
-              })}
-            </TableBody>
-          </Table>
-        )}
+    <div>
+      <div className="text-center mb-4">
+        <h1 className="text-xl">Mojang Status</h1>
+        <p>The current status of Mojang Services</p>
       </div>
-    </Card>
+      <Card className="w-full xs:w-fit text-center">
+        <div>
+          {endpointsSize === 0 && <p>Unable to fetch endpoint statuses</p>}
+          {endpointsSize > 0 && (
+            <Table className="md:w-[500px] text-start">
+              <TableHeader>
+                <TableRow>
+                  <TableHead className="pl-1 h-8">Service</TableHead>
+                  <TableHead className="pl-1 h-8 text-center">Status</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {Object.entries(endpoints).map(([url, status]) => {
+                  return (
+                    <TableRow key={url}>
+                      <TableCell className="p-[0.3rem]">
+                        <Link className="hover:text-primary transition-all" href={url} target="_blank">
+                          {url}
+                        </Link>
+                      </TableCell>
+                      <TableCell className={cn(getColor(status), "p-[0.3rem] text-center")}>
+                        {formatStatus(status)}
+                      </TableCell>
+                    </TableRow>
+                  );
+                })}
+              </TableBody>
+            </Table>
+          )}
+        </div>
+      </Card>
+    </div>
   );
 }