From d26b971a6d899fd43441cf7065f14a9f446034c4 Mon Sep 17 00:00:00 2001
From: gunshiz <spsshop1047@gmail.com>
Date: Thu, 17 Sep 2026 18:55:52 +0700
Subject: [PATCH] fix(guide-layout) : align public and admin headers

---
 app/admin/[character]/[page]/page.tsx  |  2 +-
 app/admin/[character]/page.tsx         |  2 +-
 components/public/structured-guide.tsx | 31 +++++++++++++-------------
 3 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/app/admin/[character]/[page]/page.tsx b/app/admin/[character]/[page]/page.tsx
index 9edf081..1f3ed5e 100644
--- a/app/admin/[character]/[page]/page.tsx
+++ b/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"
diff --git a/app/admin/[character]/page.tsx b/app/admin/[character]/page.tsx
index ee5d645..0e4ac7f 100644
--- a/app/admin/[character]/page.tsx
+++ b/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 />
diff --git a/components/public/structured-guide.tsx b/components/public/structured-guide.tsx
index 6254f81..3e1c8d4 100644
--- a/components/public/structured-guide.tsx
+++ b/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">
-          <Link
-            href="/"
-            aria-label="กลับหน้ารวม"
-            className="grid size-10 place-items-center rounded-lg hover:bg-muted"
-          >
-            <ChevronLeftIcon />
-          </Link>
-          <div className="relative size-11 overflow-hidden rounded-lg border">
+        <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">
+          <Button variant="ghost" size="icon" render={<Link href="/" />} nativeButton={false} aria-label="กลับหน้ารวม">
+            <ArrowLeftIcon />
+          </Button>
+          <div className="relative size-16 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
-          ariaLabel={`เมนูคู่มือ ${guide.name}`}
-          className="mx-auto min-h-11 w-full max-w-7xl rounded-xl border bg-card p-2"
-        >
+        <div className="mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8">
+          <ScrollableNav
+            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 ? (