make mojang status card the whole width of the screen on mobile

src/app/(pages)/mojang/status/page.tsx

@@ -63,41 +63,39 @@ export default async function Page(): Promise<JSX.Element> {
   const endpointsSize = Object.entries(endpoints).length;
 
   return (
-    <div className="flex justify-center text-center">
+    <Card className="w-full xs:w-fit text-center">
-      <Card className="w-max xs:w-fit">
+      <h1 className="text-xl">Mojang Status</h1>
-        <h1 className="text-xl">Mojang Status</h1>
+      <p>The current status of Mojang Services</p>
-        <p>The current status of Mojang Services</p>
 
-        <div>
+      <div>
-          {endpointsSize === 0 && <p>Unable to fetch endpoint statuses</p>}
+        {endpointsSize === 0 && <p>Unable to fetch endpoint statuses</p>}
-          {endpointsSize > 0 && (
+        {endpointsSize > 0 && (
-            <Table className="mt-4 md:w-[500px] text-start">
+          <Table className="mt-4 md:w-[500px] text-start">
-              <TableHeader>
+            <TableHeader>
-                <TableRow>
+              <TableRow>
-                  <TableHead className="pl-1">Service</TableHead>
+                <TableHead className="pl-1">Service</TableHead>
-                  <TableHead className="pl-1 text-center">Status</TableHead>
+                <TableHead className="pl-1 text-center">Status</TableHead>
-                </TableRow>
+              </TableRow>
-              </TableHeader>
+            </TableHeader>
-              <TableBody>
+            <TableBody>
-                {Object.entries(endpoints).map(([url, status]) => {
+              {Object.entries(endpoints).map(([url, status]) => {
-                  return (
+                return (
-                    <TableRow key={url}>
+                  <TableRow key={url}>
-                      <TableCell className="p-[0.3rem]">
+                    <TableCell className="p-[0.3rem]">
-                        <Link className="hover:text-primary transition-all" href={url} target="_blank">
+                      <Link className="hover:text-primary transition-all" href={url} target="_blank">
-                          {url}
+                        {url}
-                        </Link>
+                      </Link>
-                      </TableCell>
+                    </TableCell>
-                      <TableCell className={cn(getColor(status), "p-[0.3rem] text-center")}>
+                    <TableCell className={cn(getColor(status), "p-[0.3rem] text-center")}>
-                        {formatStatus(status)}
+                      {formatStatus(status)}
-                      </TableCell>
+                    </TableCell>
-                    </TableRow>
+                  </TableRow>
-                  );
+                );
-                })}
+              })}
-              </TableBody>
+            </TableBody>
-            </Table>
+          </Table>
-          )}
+        )}
-        </div>
+      </div>
-      </Card>
+    </Card>
-    </div>
   );
 }

src/app/(pages)/page.tsx

@@ -37,7 +37,7 @@ export default function Home(): JSX.Element {
         {buttons.map((button, index) => {
           return (
             <Tooltip key={index}>
-              <TooltipTrigger>
+              <TooltipTrigger asChild>
                 <Button key={index}>
                   <Link href={button.url} target={button.openInNewTab ? "_blank" : ""}>
                     <p>{button.title}</p>

src/app/(pages)/server/[platform]/[[...hostname]]/page.tsx

@@ -51,7 +51,7 @@ function checkPlatform(platform: ServerPlatform): boolean {
 
 export async function generateMetadata({ params: { platform, hostname } }: Params): Promise<Metadata> {
   try {
-    if (checkPlatform(platform) === false) {
+    if (!checkPlatform(platform)) {
       // Invalid platform
       return generateEmbed({
         title: "Server Not Found",

src/app/components/container.tsx

@@ -6,9 +6,9 @@ export default function Container({
   children: React.ReactNode;
 }>): JSX.Element {
   return (
-    <div className="z-[9999] m-auto flex h-screen min-h-full flex-col items-center opacity-90 xs:max-w-[1200px]">
+    <div className="z-[9999] m-auto flex h-screen min-h-full flex-col items-center opacity-90 w-full xs:max-w-[1200px]">
       <NavBar />
-      <div className="w-full flex-1 p-4">{children}</div>
+      <div className="w-full flex m-4 justify-center">{children}</div>
     </div>
   );
 }

src/app/components/navbar.tsx

@@ -11,7 +11,7 @@ type Page = {
 const pages: Page[] = [
   { title: "Player", url: "/player" },
   { title: "Server", url: "/server/java" },
-  { title: "Mojang Status", url: "/mojang/status" },
+  { title: "Mojang", url: "/mojang/status" },
 ];
 
 export default function NavBar(): JSX.Element {

src/app/components/player/lookup-player.tsx

@@ -40,6 +40,8 @@ export function LookupPlayer(): JSX.Element {
     <form className="flex gap-2 justify-center mt-2" action="" onSubmit={(event) => event.preventDefault()}>
       <Input
         className="w-fit"
+        type="search"
+        name="query"
         placeholder="Name / UUID"
         value={id}
         onChange={(event) => {

src/app/components/server/lookup-server.tsx

@@ -70,7 +70,15 @@ export function LookupServer(): JSX.Element {
       action=""
       onSubmit={(event) => event.preventDefault()}
     >
-      <Input className="w-fit" placeholder="Hostname" value={hostname} onChange={setHostnameValue} maxLength={128} />
+      <Input
+        className="w-fit"
+        type="search"
+        name="query"
+        placeholder="Hostname"
+        value={hostname}
+        onChange={setHostnameValue}
+        maxLength={128}
+      />
       <div className="flex gap-2 justify-center">
         <LookupButton platform={ServerPlatform.Java} />
         <LookupButton platform={ServerPlatform.Bedrock} />