wushenghua/hapi
1
0
Fork 0
mirror of https://github.com/wu736139669/hapi.git synced 2026-08-05 06:24:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(web): align SessionHeader content with centered layout

Browse Source 
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.
This commit is contained in:
weishu
2025-12-19 17:06:23 +08:00
parent 21de6282b5
commit 10bed01358
1 changed files with 29 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/components/SessionHeader.tsx
+29 -27
View File
@@ -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>