From 10bed01358ccd05b137c650ab3b75ed5e0c77929 Mon Sep 17 00:00:00 2001
From: weishu <twsxtd@gmail.com>
Date: Fri, 19 Dec 2025 17:06:23 +0800
Subject: [PATCH] fix(web): align SessionHeader content with centered layout

Wrap SessionHeader content in a centered container using the same
mx-auto w-full max-w-[720px] pattern as HappyThread to ensure the
back button and session info align with the main content area instead
of appearing at the top-left corner.
---
 web/src/components/SessionHeader.tsx | 56 ++++++++++++++--------------
 1 file changed, 29 insertions(+), 27 deletions(-)

diff --git a/web/src/components/SessionHeader.tsx b/web/src/components/SessionHeader.tsx
index 1bb6c2aa..3913a9d1 100644
--- a/web/src/components/SessionHeader.tsx
+++ b/web/src/components/SessionHeader.tsx
@@ -28,35 +28,37 @@ export function SessionHeader(props: {
     }
 
     return (
-        <div className="flex items-center gap-2 bg-[var(--app-bg)] p-3">
-            {/* Back button */}
-            <button
-                type="button"
-                onClick={props.onBack}
-                className="flex h-8 w-8 items-center justify-center rounded-full text-[var(--app-hint)] transition-colors hover:bg-[var(--app-secondary-bg)] hover:text-[var(--app-fg)]"
-            >
-                <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="20"
-                    height="20"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    strokeWidth="2"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
+        <div className="bg-[var(--app-bg)]">
+            <div className="mx-auto w-full max-w-[720px] flex items-center gap-2 p-3">
+                {/* Back button */}
+                <button
+                    type="button"
+                    onClick={props.onBack}
+                    className="flex h-8 w-8 items-center justify-center rounded-full text-[var(--app-hint)] transition-colors hover:bg-[var(--app-secondary-bg)] hover:text-[var(--app-fg)]"
                 >
-                    <polyline points="15 18 9 12 15 6" />
-                </svg>
-            </button>
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="20"
+                        height="20"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                    >
+                        <polyline points="15 18 9 12 15 6" />
+                    </svg>
+                </button>
 
-            {/* Session info - two lines: title and path */}
-            <div className="min-w-0 flex-1">
-                <div className="truncate font-semibold">
-                    {title}
-                </div>
-                <div className="text-xs text-[var(--app-hint)] truncate">
-                    {props.session.metadata?.path ?? props.session.id}
+                {/* Session info - two lines: title and path */}
+                <div className="min-w-0 flex-1">
+                    <div className="truncate font-semibold">
+                        {title}
+                    </div>
+                    <div className="text-xs text-[var(--app-hint)] truncate">
+                        {props.session.metadata?.path ?? props.session.id}
+                    </div>
                 </div>
             </div>
         </div>