feat : use same size as admin for nav bar

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",