move json button and add json button to the server page

src/app/components/code-highlighter.tsx

@@ -23,7 +23,6 @@ export function CodeHighlighter({ code, rounded = true }: CodeHighlighterProps):
       customStyle={{
         maxHeight: "600px",
         backgroundColor: "hsl(var(--popover))",
-        overflow: "hidden",
         wordBreak: "break-all",
         borderRadius: rounded ? "0.75rem" : undefined,
       }}

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

@@ -3,6 +3,7 @@ import { CachedPlayer, SkinPart } from "mcutils-library";
 import { ReactElement } from "react";
 import { Card } from "../card";
 import { CodeDialog } from "../code-dialog";
+import { Button } from "../ui/button";
 import { Separator } from "../ui/separator";
 import { SkinPartImage } from "./skin-part-image";
 
@@ -15,44 +16,43 @@ type PlayerViewProps = {
 
 export function PlayerView({ player }: PlayerViewProps): ReactElement {
   return (
-    <Card className="w-max xs:w-fit">
+    <div className="flex flex-col gap-2">
-      <div className="flex gap-4 flex-col xs:flex-row relative">
+      <Card className="w-max xs:w-fit">
-        <div className="absolute 8xl:top-0 xs:bottom-0">
+        <div className="flex gap-4 flex-col xs:flex-row relative">
-          <CodeDialog
+          <div className="flex items-center flex-col">
-            title="Player Data"
+            <SkinPartImage playerName={player.username} part={SkinPart.HEAD} url={player.skin.parts.head} size={96} />
-            description="The player's data from the API"
-            code={JSON.stringify(player, undefined, 2)}
-          >
-            <button className="bg-background rounded-lg">
-              <p className="p-1">JSON</p>
-            </button>
-          </CodeDialog>
-        </div>
-
-        <div className="flex items-center flex-col">
-          <SkinPartImage playerName={player.username} part={SkinPart.HEAD} url={player.skin.parts.head} size={96} />
-        </div>
-
-        <div className="flex flex-col gap-2">
-          <div>
-            <h2 className="text-xl text-primary font-semibold">{player.username}</h2>
-            <p>{player.uniqueId}</p>
           </div>
 
-          <Separator />
-
           <div className="flex flex-col gap-2">
-            <p className="text-lg">Skin Parts</p>
+            <div>
-            <div className="flex gap-2">
+              <h2 className="text-xl text-primary font-semibold">{player.username}</h2>
-              {Object.entries(player.skin.parts)
+              <p>{player.uniqueId}</p>
-                .filter(([part]) => part !== SkinPart.HEAD) // Don't show the head part again
+            </div>
-                .map(([part, url]) => {
+
-                  return <SkinPartImage key={part} playerName={player.username} part={part as SkinPart} url={url} />;
+            <Separator />
-                })}
+
+            <div className="flex flex-col gap-2">
+              <p className="text-lg">Skin Parts</p>
+              <div className="flex gap-2">
+                {Object.entries(player.skin.parts)
+                  .filter(([part]) => part !== SkinPart.HEAD) // Don't show the head part again
+                  .map(([part, url]) => {
+                    return <SkinPartImage key={part} playerName={player.username} part={part as SkinPart} url={url} />;
+                  })}
+              </div>
             </div>
           </div>
         </div>
+      </Card>
+      <div className="8xl:top-0 xs:bottom-0">
+        <CodeDialog
+          title="Player Data"
+          description="The player's data from the API"
+          code={JSON.stringify(player, undefined, 2)}
+        >
+          <Button>View as JSON</Button>
+        </CodeDialog>
       </div>
-    </Card>
+    </div>
   );
 }

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

@@ -3,6 +3,8 @@ import { CachedBedrockMinecraftServer, CachedJavaMinecraftServer } from "mcutils
 import Image from "next/image";
 import { ReactElement } from "react";
 import { Card } from "../card";
+import { CodeDialog } from "../code-dialog";
+import { Button } from "../ui/button";
 
 type ServerViewProps = {
   /**
@@ -18,38 +20,49 @@ type ServerViewProps = {
 
 export function ServerView({ server, favicon }: ServerViewProps): ReactElement {
   return (
-    <Card className="w-max xs:w-fit relative">
+    <div className="flex flex-col gap-2">
-      <div className="flex gap-2 flex-col">
+      <Card className="w-max xs:w-fit relative">
-        <div className="flex gap-4 flex-col xs:flex-row">
+        <div className="flex gap-2 flex-col">
-          {favicon && (
+          <div className="flex gap-4 flex-col xs:flex-row">
-            <div className="flex justify-center xs:justify-start">
+            {favicon && (
-              <Image
+              <div className="flex justify-center xs:justify-start">
-                className="w-[64px] h-[64px]"
+                <Image
-                src={favicon}
+                  className="w-[64px] h-[64px]"
-                width={64}
+                  src={favicon}
-                height={64}
+                  width={64}
-                quality={100}
+                  height={64}
-                alt="The server's favicon"
+                  quality={100}
-              />
+                  alt="The server's favicon"
-            </div>
+                />
-          )}
+              </div>
+            )}
 
-          <div className="flex flex-col">
+            <div className="flex flex-col">
-            <h2 className="text-xl text-primary font-semibold">{server.hostname}</h2>
+              <h2 className="text-xl text-primary font-semibold">{server.hostname}</h2>
-            <div>
+              <div>
-              <p>
+                <p>
-                Players online: {formatNumber(server.players.online)}/{formatNumber(server.players.max)}
+                  Players online: {formatNumber(server.players.online)}/{formatNumber(server.players.max)}
-              </p>
+                </p>
+              </div>
             </div>
           </div>
-        </div>
 
-        <div className="bg-background rounded-lg p-2 text-sm xs:text-lg">
+          <div className="bg-background rounded-lg p-2 text-sm xs:text-lg">
-          {server.motd.html.map((line, index) => {
+            {server.motd.html.map((line, index) => {
-            return <p key={index} dangerouslySetInnerHTML={{ __html: line }}></p>;
+              return <p key={index} dangerouslySetInnerHTML={{ __html: line }}></p>;
-          })}
+            })}
+          </div>
         </div>
+      </Card>
+      <div className="8xl:top-0 xs:bottom-0">
+        <CodeDialog
+          title="Server Data"
+          description="The server's data from the API"
+          code={JSON.stringify(server, undefined, 2)}
+        >
+          <Button>View as JSON</Button>
+        </CodeDialog>
       </div>
-    </Card>
+    </div>
   );
 }