Improve responsive layouts and streamline page loading

app/servers/[id]/page.tsx

@@ -7,10 +7,11 @@ import { StartGame } from "@/components/StartGame";
 import { getMap } from "@/lib/catalog";
 import { ContributionInstructions } from "@/components/ContributionInstructions";
 import { ReportContent } from "@/components/ReportContent";
-import { user } from "@/lib/supabase";
-import { accountProfile } from "@/lib/profile";
+import { user, admin, required } from "@/lib/supabase";
 import { ExportMap } from "@/components/MapTransfer";
 import { MapCommunity } from "@/components/MapCommunity";
+import Link from "next/link";
+import { ArrowLeft } from "lucide-react";
 export default async function ServerPage({
   params,
 }: {
@@ -18,29 +19,42 @@ export default async function ServerPage({
 }) {
   const { t } = await getI18n();
   const { id } = await params;
-  const map = await getMap(id);
+  const [map, account] = await Promise.all([getMap(id), user()]);
   if (!map) notFound();
-  const account = await user();
-  const profile = account ? await accountProfile(account) : null;
+  const profileResult = account
+    ? await admin()
+        .from("profiles")
+        .select("display_name")
+        .eq("id", account.id)
+        .maybeSingle()
+    : null;
+  if (profileResult?.error) required(profileResult);
+  const profile = profileResult?.data;
   return (
     <>
       <Header />
-      <main className="section page-content">
+      <main className="section page-content map-detail-page">
+        <Link className="map-back-link" href="/servers">
+          <ArrowLeft size={16} aria-hidden="true" />
+          {t("All worlds")}
+        </Link>
         <span className="eyebrow">
           {map.source === "plugin"
             ? t("SERVER EXPORT")
             : t("PLAYER CONTRIBUTION")}{" "}
           {t("· MINECRAFT 1.21.11")}
         </span>
-        <h1>{map.name}</h1>
+        <h1 className="map-detail-title">{map.name}</h1>
         <p className="lead">{map.description}</p>
         <p className="map-credit">
           {t("Created by")}{" "}
           <Username name={map.credit} appearance={map.creditAppearance} />
         </p>
-        <ReportContent datasetId={id} />
-        {account?.id === map.owner_id && <ExportMap id={id} />}
-        <p className="muted">
+        <div className="map-detail-actions">
+          <ReportContent datasetId={id} />
+          {account?.id === map.owner_id && <ExportMap id={id} />}
+        </div>
+        <p className="muted map-detail-id">
           {t("Map ID:")} <code>{map.id}</code>
         </p>
         <div className="detail-grid">
@@ -66,7 +80,10 @@ export default async function ServerPage({
               </span>
             </div>
           </div>
-          <StartGame datasetId={id} hostName={profile?.display_name ?? null} />
+          <StartGame
+            datasetId={id}
+            hostName={account ? (profile?.display_name ?? "Explorer") : null}
+          />
         </div>
         {map.allow_contributions && (
           <ContributionInstructions