make pages more consistent on mobile

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")]',
         )}
       >