feat : use same size as admin for nav bar

app/admin/[character]/[page]/page.tsx

@@ -63,36 +63,38 @@ export default async function StructuredEditorPage({
     <div className="min-h-svh">
       <AdminHeader />
       <main className="mx-auto flex w-full max-w-7xl flex-col gap-6 px-4 pb-4 sm:px-6 sm:pb-6 lg:px-8 lg:pb-8">
-        <header className="flex items-center gap-4">
-          <Button
-            variant="ghost"
-            size="icon"
-            render={<Link href="/admin" />}
-            nativeButton={false}
-            aria-label="กลับ Dashboard"
-          >
-            <ArrowLeftIcon />
-          </Button>
-          <div className="relative size-16 shrink-0 overflow-hidden rounded-lg border">
-            <Image src={guide.coverUrl} alt={guide.name} fill sizes="64px" className="object-cover" />
-          </div>
-          <div className="min-w-0">
-            <p className="text-sm text-muted-foreground">{guide.name}</p>
-            <h1 className="whitespace-nowrap font-heading text-3xl font-semibold">
-              {sectionTitle}
-            </h1>
-            <EditorPresence guideId={guide.id} section={sectionTitle} />
-          </div>
-          <Button className="ml-auto" variant="outline" render={<Link href={`/admin/${guide.characterKey}/preview/${page}`} target="_blank" />} nativeButton={false}>
-            Preview
-          </Button>
-        </header>
-        <GuideSectionNav
-          guideId={guide.id}
-          characterKey={guide.characterKey}
-          current={page}
-          extras={extraSections.map(({ id, slug, title }) => ({ id, slug, title }))}
-        />
+        <div className="flex flex-col">
+          <header className="flex items-center gap-4">
+            <Button
+              variant="ghost"
+              size="icon"
+              render={<Link href="/admin" />}
+              nativeButton={false}
+              aria-label="กลับ Dashboard"
+            >
+              <ArrowLeftIcon />
+            </Button>
+            <div className="relative size-16 shrink-0 overflow-hidden rounded-lg border">
+              <Image src={guide.coverUrl} alt={guide.name} fill sizes="64px" className="object-cover" />
+            </div>
+            <div className="min-w-0">
+              <p className="text-sm text-muted-foreground">{guide.name}</p>
+              <h1 className="whitespace-nowrap font-heading text-3xl font-semibold">
+                {sectionTitle}
+              </h1>
+              <EditorPresence guideId={guide.id} section={sectionTitle} />
+            </div>
+            <Button className="ml-auto" variant="outline" render={<Link href={`/admin/${guide.characterKey}/preview/${page}`} target="_blank" />} nativeButton={false}>
+              Preview
+            </Button>
+          </header>
+          <GuideSectionNav
+            guideId={guide.id}
+            characterKey={guide.characterKey}
+            current={page}
+            extras={extraSections.map(({ id, slug, title }) => ({ id, slug, title }))}
+          />
+        </div>
         <GuideSectionEditor
           key={`${editorSection}:${extraSection?.id ?? "fixed"}:${guide.version}`}
           section={editorSection}

app/admin/[character]/page.tsx

@@ -39,24 +39,26 @@ export default async function GuideOverviewPage({ params }: { params: Promise<{
     <div className="min-h-svh">
       <AdminHeader />
       <main className="mx-auto flex w-full max-w-7xl flex-col gap-8 px-4 pb-4 sm:px-6 sm:pb-6 lg:px-8 lg:pb-8">
-        <header className="flex flex-wrap items-center gap-4">
-          <Button variant="ghost" size="icon" render={<Link href="/admin" />} nativeButton={false} aria-label="กลับ Dashboard">
-            <ArrowLeftIcon />
-          </Button>
-          <div className="relative size-16 overflow-hidden rounded-lg border">
-            <Image src={guide.coverUrl} alt={guide.name} fill sizes="64px" className="object-cover" />
-          </div>
-          <div className="min-w-0 flex-1">
-            <p className="text-sm text-muted-foreground">เลือกส่วนที่ต้องการแก้ไข</p>
-            <h1 className="font-heading text-3xl font-semibold">{guide.name}</h1>
-            <EditorPresence guideId={guide.id} section="Overview" />
-          </div>
-          <GuideVisibilityControl guideId={guide.id} guideName={guide.name} isPublic={guide.isPublic} version={guide.version} />
-          <Button variant="outline" render={<Link href={`/admin/${guide.characterKey}/preview`} target="_blank" />} nativeButton={false}>
-            Preview
-          </Button>
-        </header>
-        <GuideSectionNav guideId={guide.id} characterKey={guide.characterKey} current="overview" extras={extras} />
+        <div className="flex flex-col">
+          <header className="flex flex-wrap items-center gap-4">
+            <Button variant="ghost" size="icon" render={<Link href="/admin" />} nativeButton={false} aria-label="กลับ Dashboard">
+              <ArrowLeftIcon />
+            </Button>
+            <div className="relative size-16 overflow-hidden rounded-lg border">
+              <Image src={guide.coverUrl} alt={guide.name} fill sizes="64px" className="object-cover" />
+            </div>
+            <div className="min-w-0 flex-1">
+              <p className="text-sm text-muted-foreground">เลือกส่วนที่ต้องการแก้ไข</p>
+              <h1 className="font-heading text-3xl font-semibold">{guide.name}</h1>
+              <EditorPresence guideId={guide.id} section="Overview" />
+            </div>
+            <GuideVisibilityControl guideId={guide.id} guideName={guide.name} isPublic={guide.isPublic} version={guide.version} />
+            <Button variant="outline" render={<Link href={`/admin/${guide.characterKey}/preview`} target="_blank" />} nativeButton={false}>
+              Preview
+            </Button>
+          </header>
+          <GuideSectionNav guideId={guide.id} characterKey={guide.characterKey} current="overview" extras={extras} />
+        </div>
         <GuideOverviewForm key={guide.version} guide={guide} />
         <div className="grid gap-4 md:grid-cols-2">
           {sections.map(({ slug, title, description }) => (

components/admin/editor-presence.tsx

@@ -10,7 +10,7 @@ export function EditorPresence({ guideId, section }: { guideId: string; section:
   const presence = useAdminPresence(guideId, section);
   const editors = presence?.editorsByGuide[guideId] ?? [];
   return (
-    <div className="flex flex-col items-end gap-1">
+    <div className="flex flex-col items-start gap-1">
     <div className="flex flex-wrap items-center gap-1" aria-live="polite">
       <Badge variant="secondary">
         <UsersIcon data-icon="inline-start" />

components/admin/guide-section-nav.tsx

@@ -10,10 +10,10 @@ import { navigationIconPath } from "@/lib/navigation";
 import { cn } from "@/lib/utils";
 
 const sections = [
-  { slug: "weapon", label: "อาวุธ" },
-  { slug: "artifact", label: "อาร์ติแฟกต์และค่าสถานะ" },
-  { slug: "constellations", label: "กลุ่มดาว" },
-  { slug: "team", label: "คำนวณทีม" },
+  { slug: "weapon", label: "Weapons" },
+  { slug: "artifact", label: "Artifacts & Stats" },
+  { slug: "constellations", label: "Constellations" },
+  { slug: "team", label: "Team Calc" },
 ] as const;
 
 export function GuideSectionNav({
@@ -36,7 +36,7 @@ export function GuideSectionNav({
   };
   return (
     <ScrollableNav
-      ariaLabel="เมนูแก้ไข Guide"
+      ariaLabel="Guide editor navigation"
       activeKey={current}
       className="w-full rounded-xl border bg-card p-2"
     >
@@ -46,12 +46,12 @@ export function GuideSectionNav({
         onClick={confirmNavigation}
         aria-current={current === "overview" ? "page" : undefined}
         className={cn(
-          "flex min-h-8 shrink-0 items-center gap-2 rounded-md px-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          "flex min-h-8 shrink-0 items-center gap-2 whitespace-nowrap rounded-md px-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring",
           current === "overview" ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted hover:text-foreground",
         )}
       >
         <Image src={navigationIconPath("overview")!} alt="" width={20} height={20} className="size-5 object-contain" />
-        ภาพรวม
+        Overview
       </Link>
       {sections.map((section) => {
         const iconPath = navigationIconPath(section.slug);
@@ -63,7 +63,7 @@ export function GuideSectionNav({
             onClick={confirmNavigation}
             aria-current={current === section.slug ? "page" : undefined}
             className={cn(
-              "flex min-h-8 shrink-0 items-center gap-2 rounded-md px-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              "flex min-h-8 shrink-0 items-center gap-2 whitespace-nowrap rounded-md px-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring",
               current === section.slug ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted hover:text-foreground",
             )}
           >
@@ -80,7 +80,7 @@ export function GuideSectionNav({
           onClick={confirmNavigation}
           aria-current={current === extra.slug ? "page" : undefined}
           className={cn(
-            "flex min-h-8 shrink-0 items-center gap-2 rounded-md px-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            "flex min-h-8 shrink-0 items-center gap-2 whitespace-nowrap rounded-md px-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring",
             current === extra.slug ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted hover:text-foreground",
           )}
         >

components/public/guide-page-shell.tsx

@@ -80,13 +80,13 @@ export function GuidePageShell({
           <ScrollableNav
             ariaLabel={`เมนูคู่มือ ${guide.name}`}
             activeKey={section ?? "overview"}
-            className="min-h-11 w-full rounded-xl border bg-card p-1 sm:p-2"
+            className="w-full rounded-xl border bg-card p-2"
           >
             <Link
               href={baseHref}
               aria-current={!section ? "page" : undefined}
               className={cn(
-                "flex min-h-11 shrink-0 items-center gap-2 whitespace-nowrap rounded-md px-3 text-sm transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                "flex min-h-8 shrink-0 items-center gap-2 whitespace-nowrap rounded-md px-3 text-sm transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring",
                 !section
                   ? "bg-primary/15 font-semibold text-primary"
                   : "text-muted-foreground hover:bg-muted hover:text-foreground",
@@ -108,7 +108,7 @@ export function GuidePageShell({
                 href={`${baseHref}/${item.slug}`}
                 aria-current={section === item.slug ? "page" : undefined}
                 className={cn(
-                  "flex min-h-11 shrink-0 items-center gap-2 whitespace-nowrap rounded-md px-3 text-sm transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                  "flex min-h-8 shrink-0 items-center gap-2 whitespace-nowrap rounded-md px-3 text-sm transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring",
                   section === item.slug
                     ? "bg-primary/15 font-semibold text-primary"
                     : "text-muted-foreground hover:bg-muted hover:text-foreground",

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev --turbopack",
+    "dev": "bun --bun next dev --turbopack",
     "build": "next build",
     "start": "next start",
     "lint": "eslint .",