make pages more consistent on mobile

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

@@ -83,33 +83,34 @@ export default async function Page(): Promise<ReactElement> {
         <h1 className="text-xl">Mojang Status</h1>
         <p>The current status of Mojang Services</p>
       </div>
-      <Card classNameCard="py-0 pb-2" classNameContent="w-[23rem] md:w-[35rem] text-left">
+      <Card
-        <div className="flex flex-col divide-y gap-2">
+        classNameCard="py-0 pb-2 w-screen xs:w-[28rem] md:w-[35rem]"
-          {endpoints.length == 0 && <p>Unable to fetch endpoint statuses</p>}
+        classNameContent="text-left flex flex-col divide-y gap-2"
-          {endpoints.length > 0 &&
+      >
-            endpoints.map((endpoint: CachedEndpointStatus) => {
+        {endpoints.length == 0 && <p>Unable to fetch endpoint statuses</p>}
-              const { name, hostname, status } = endpoint;
+        {endpoints.length > 0 &&
+          endpoints.map((endpoint: CachedEndpointStatus) => {
+            const { name, hostname, status } = endpoint;
 
-              const url = `https://${hostname}`;
+            const url = `https://${hostname}`;
-              return (
+            return (
-                <div key={name} className="flex flex-row justify-between pt-2">
+              <div key={name} className="flex flex-row justify-between pt-2">
-                  <div className="flex flex-col leading-[1.5rem]">
+                <div className="flex flex-col leading-[1.5rem]">
-                    <p className="font-semibold">{name}</p>
+                  <p className="font-semibold">{name}</p>
-                    <Link
+                  <Link
-                      href={url}
+                    href={url}
-                      className="text-sm text-primary hover:opacity-75 transition-all transform-gpu"
+                    className="text-sm text-primary hover:opacity-75 transition-all transform-gpu"
-                      target="_blank"
+                    target="_blank"
-                    >
+                  >
-                      <p>{url}</p>
+                    <p>{url}</p>
-                    </Link>
+                  </Link>
-                  </div>
-                  <div className={cn("flex items-center font-semibold", getColor(status))}>
-                    <p>{formatStatus(status)}</p>
-                  </div>
                 </div>
-              );
+                <div className={cn("flex items-center font-semibold", getColor(status))}>
-            })}
+                  <p>{formatStatus(status)}</p>
-        </div>
+                </div>
+              </div>
+            );
+          })}
       </Card>
     </div>
   );

src/app/components/navbar.tsx

@@ -7,6 +7,7 @@ import { HrefButton } from "./href-button";
 import Logo from "./logo";
 import { ToggleThemeButton } from "./theme-toggle-button";
 import { GithubStar } from "@/app/components/github-star";
+import { Card } from "@/app/components/card";
 
 type Page = {
   /**
@@ -37,7 +38,10 @@ export default function NavBar(): ReactElement {
   const path = usePathname();
 
   return (
-    <div className="bg-secondary relative w-full rounded-lg flex justify-between items-center gap-3 mt-2 px-3 bg-opacity-85 h-12">
+    <Card
+      classNameCard="w-full p-0 mt-2 border-none"
+      classNameContent="p-0 relative rounded-lg flex justify-between items-center gap-3 px-3 bg-opacity-85 h-12"
+    >
       {/* Left */}
       <div className="z-50">
         <Link href="/" className="flex items-center gap-2">
@@ -70,6 +74,6 @@ export default function NavBar(): ReactElement {
         <ToggleThemeButton />
         <GithubStar />
       </div>
-    </div>
+    </Card>
   );
 }

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

@@ -18,7 +18,7 @@ type PlayerViewProps = {
 export function PlayerView({ player }: PlayerViewProps): ReactElement {
   return (
     <div className="flex flex-col gap-2 items-center">
-      <Card classNameContent="w-max xs:w-fit">
+      <Card classNameCard="w-screen xs:w-fit">
         <div className="flex gap-4 flex-col xs:flex-row relative">
           <div className="flex items-center flex-col">
             <SkinPartImage playerName={player.username} part={SkinPart.HEAD} url={player.skin.parts.head} size={96} />

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

@@ -24,10 +24,10 @@ type ServerViewProps = {
 
 export function ServerView({ server, favicon }: ServerViewProps): ReactElement {
   return (
-    <div className="flex relative flex-col gap-2 items-center scale-75 xs:scale-100 w-screen">
+    <div className="flex relative flex-col gap-2 items-center w-screen">
       <div
         className={cn(
-          "w-[29rem] relative p-2 flex gap-2 rounded-lg pointer-events-none",
+          "w-[29rem] relative p-2 flex gap-2 rounded-lg pointer-events-none scale-75 xs:scale-100",
           'bg-[url("/media/server-background.png")]',
         )}
       >