make pages more consistent on mobile

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

@@ -83,8 +83,10 @@ 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">
-        <div className="flex flex-col divide-y gap-2">
+      <Card
+        classNameCard="py-0 pb-2 w-screen xs:w-[28rem] md:w-[35rem]"
+        classNameContent="text-left flex flex-col divide-y gap-2"
+      >
         {endpoints.length == 0 && <p>Unable to fetch endpoint statuses</p>}
         {endpoints.length > 0 &&
           endpoints.map((endpoint: CachedEndpointStatus) => {
@@ -109,7 +111,6 @@ export default async function Page(): Promise<ReactElement> {
               </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")]',
         )}
       >