fix(guide-layout) : align public and admin headers

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

@@ -63,7 +63,7 @@ export default async function StructuredEditorPage({
   return (
     <div className="min-h-svh">
       <AdminHeader />
-      <main className="mx-auto flex w-full max-w-6xl flex-col gap-6 p-4 sm:p-6 lg:p-8">
+      <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"

app/admin/[character]/page.tsx

@@ -38,7 +38,7 @@ export default async function GuideOverviewPage({ params }: { params: Promise<{
   return (
     <div className="min-h-svh">
       <AdminHeader />
-      <main className="mx-auto flex w-full max-w-6xl flex-col gap-8 p-4 sm:p-6 lg:p-8">
+      <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 />

components/public/structured-guide.tsx

@@ -1,9 +1,10 @@
 import Image from "next/image";
 import Link from "next/link";
-import { ArrowUpRightIcon, ChevronLeftIcon } from "lucide-react";
+import { ArrowLeftIcon, ArrowUpRightIcon } from "lucide-react";
 import type { ReactNode } from "react";
 
 import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   Card,
   CardAction,
@@ -108,20 +109,16 @@ export function StructuredGuideShell({
       <LiveRefresh endpoint={`/api/events/page/${guide.id}`} />
       <SiteHeader editHref={`/admin/${guide.characterKey}`} guideId={guide.id} />
       <div className="sticky top-0 z-40 bg-background/95 supports-backdrop-filter:backdrop-blur">
-        <div className="mx-auto flex min-h-16 w-full max-w-7xl items-center gap-3 px-4 sm:px-6">
+        <div className="mx-auto flex min-h-16 w-full max-w-7xl items-center gap-3 px-4 sm:px-6 lg:px-8">
-          <Link
+          <Button variant="ghost" size="icon" render={<Link href="/" />} nativeButton={false} aria-label="กลับหน้ารวม">
-            href="/"
+            <ArrowLeftIcon />
-            aria-label="กลับหน้ารวม"
+          </Button>
-            className="grid size-10 place-items-center rounded-lg hover:bg-muted"
+          <div className="relative size-16 overflow-hidden rounded-lg border">
-          >
-            <ChevronLeftIcon />
-          </Link>
-          <div className="relative size-11 overflow-hidden rounded-lg border">
             <Image
               src={guide.coverUrl}
               alt={guide.name}
               fill
-              sizes="44px"
+              sizes="64px"
               className="object-cover"
             />
           </div>
@@ -134,10 +131,11 @@ export function StructuredGuideShell({
             </p>
           </div>
         </div>
-        <ScrollableNav
+        <div className="mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8">
-          ariaLabel={`เมนูคู่มือ ${guide.name}`}
+          <ScrollableNav
-          className="mx-auto min-h-11 w-full max-w-7xl rounded-xl border bg-card p-2"
+            ariaLabel={`เมนูคู่มือ ${guide.name}`}
-        >
+            className="min-h-11 w-full rounded-xl border bg-card p-2"
+          >
           <Link
             href={`/${guide.slug}`}
             className={cn(
@@ -181,7 +179,8 @@ export function StructuredGuideShell({
               {item.title}
             </Link>
           ))}
-        </ScrollableNav>
+          </ScrollableNav>
+        </div>
       </div>
       <main className="mx-auto w-full max-w-7xl p-4 sm:p-6 lg:p-10">
         {section ? (