fix(admin): repair layout and character artwork

components/admin/admin-header.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname, useRouter } from "next/navigation";
+import {
+  BookOpenIcon,
+  ExternalLinkIcon,
+  LayoutDashboardIcon,
+  LogOutIcon,
+  PlusIcon,
+} from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { authClient } from "@/lib/auth/client";
+
+export function AdminHeader() {
+  const pathname = usePathname();
+  const router = useRouter();
+
+  return (
+    <header className="border-b bg-background/95 supports-backdrop-filter:backdrop-blur">
+      <div className="mx-auto flex min-h-16 w-full max-w-7xl flex-wrap items-center gap-2 px-4 py-2 sm:px-6">
+        <Link
+          href="/admin"
+          className="mr-auto flex min-h-11 items-center gap-3 rounded-lg font-heading font-semibold focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          <span className="grid size-9 place-items-center rounded-lg bg-primary text-primary-foreground">
+            <BookOpenIcon aria-hidden="true" />
+          </span>
+          <span className="hidden sm:inline">Buzz Sheet Admin</span>
+        </Link>
+        <nav aria-label="Admin navigation" className="flex items-center gap-1">
+          <Button
+            variant={pathname === "/admin" ? "secondary" : "ghost"}
+            size="sm"
+            nativeButton={false}
+            render={<Link href="/admin" />}
+          >
+            <LayoutDashboardIcon data-icon="inline-start" />
+            <span className="hidden sm:inline">Dashboard</span>
+          </Button>
+          <Button
+            variant={pathname === "/admin/create" ? "secondary" : "ghost"}
+            size="sm"
+            nativeButton={false}
+            render={<Link href="/admin/create" />}
+          >
+            <PlusIcon data-icon="inline-start" />
+            <span className="hidden sm:inline">New Guide</span>
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon-sm"
+            nativeButton={false}
+            render={<Link href="/" target="_blank" />}
+            aria-label="เปิดหน้าเว็บไซต์"
+          >
+            <ExternalLinkIcon />
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon-sm"
+            aria-label="ออกจากระบบ"
+            onClick={() =>
+              authClient.signOut({
+                fetchOptions: {
+                  onSuccess: () => {
+                    router.push("/admin/login");
+                    router.refresh();
+                  },
+                },
+              })
+            }
+          >
+            <LogOutIcon />
+          </Button>
+        </nav>
+      </div>
+    </header>
+  );
+}

components/admin/guide-section-editor.tsx

@@ -87,7 +87,7 @@ export function GuideSectionEditor(props: GuideSectionEditorProps) {
       {props.section === "constellations" ? <ConstellationEditor {...props} version={version} pending={pending} save={save} /> : null}
       {props.section === "team" ? <TeamEditor {...props} version={version} pending={pending} save={save} /> : null}
       {props.section === "extra" ? <ExtraEditor {...props} version={version} pending={pending} save={save} /> : null}
-      <Pagination><PaginationContent><PaginationItem>{index > 0 ? <PaginationPrevious href={`/admin/${props.guide.characterKey}/${SECTION_ORDER[index - 1]}`} text={SECTION_LABELS[SECTION_ORDER[index - 1]]} /> : <PaginationLink href={`/admin/${props.guide.characterKey}`}>Overview</PaginationLink>}</PaginationItem><PaginationItem><PaginationLink href="#" isActive>{SECTION_LABELS[props.section]}</PaginationLink></PaginationItem>{index < SECTION_ORDER.length - 1 ? <PaginationItem><PaginationNext href={`/admin/${props.guide.characterKey}/${SECTION_ORDER[index + 1]}`} text={SECTION_LABELS[SECTION_ORDER[index + 1]]} /></PaginationItem> : null}</PaginationContent></Pagination>
+      <Pagination><PaginationContent className="flex-wrap"><PaginationItem>{index > 0 ? <PaginationPrevious href={`/admin/${props.guide.characterKey}/${SECTION_ORDER[index - 1]}`} text={SECTION_LABELS[SECTION_ORDER[index - 1]]} /> : <PaginationLink href={`/admin/${props.guide.characterKey}`} size="default">Overview</PaginationLink>}</PaginationItem><PaginationItem><PaginationLink href={`/admin/${props.guide.characterKey}/${props.section}`} size="default" isActive>{SECTION_LABELS[props.section]}</PaginationLink></PaginationItem>{index < SECTION_ORDER.length - 1 ? <PaginationItem><PaginationNext href={`/admin/${props.guide.characterKey}/${SECTION_ORDER[index + 1]}`} text={SECTION_LABELS[SECTION_ORDER[index + 1]]} /></PaginationItem> : null}</PaginationContent></Pagination>
     </div>
   );
 }

components/admin/media-uploader.tsx

@@ -74,6 +74,7 @@ export function MediaUploader({
         className="w-full"
         disabled={busy}
         render={<label htmlFor={inputId} />}
+        nativeButton={false}
       >
         {busy ? <Spinner /> : <ImagePlusIcon />}
         {state === "uploading" && "กำลังอัปโหลด…"}