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,20 +16,9 @@ type PlayerViewProps = {
 
 export function PlayerView({ player }: PlayerViewProps): ReactElement {
   return (
+    <div className="flex flex-col gap-2">
       <Card className="w-max xs:w-fit">
         <div className="flex gap-4 flex-col xs:flex-row relative">
-        <div className="absolute 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 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>
@@ -54,5 +44,15 @@ export function PlayerView({ player }: PlayerViewProps): ReactElement {
           </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>
+    </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,6 +20,7 @@ type ServerViewProps = {
 
 export function ServerView({ server, favicon }: ServerViewProps): ReactElement {
   return (
+    <div className="flex flex-col gap-2">
       <Card className="w-max xs:w-fit relative">
         <div className="flex gap-2 flex-col">
           <div className="flex gap-4 flex-col xs:flex-row">
@@ -51,5 +54,15 @@ export function ServerView({ server, favicon }: ServerViewProps): ReactElement {
           </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>
+    </div>
   );
 }