diff --git a/frontend/app/p/[treeId]/page.tsx b/frontend/app/p/[treeId]/page.tsx
index aa95744..6373be7 100644
--- a/frontend/app/p/[treeId]/page.tsx
+++ b/frontend/app/p/[treeId]/page.tsx
@@ -102,7 +102,7 @@ export default function PublicTreePage() {
 
   return (
     <div className="space-y-6">
-      <div>
+      <div className="mx-auto w-full max-w-5xl">
         <h1 className="font-serif text-3xl font-semibold">{tree?.name}</h1>
         {tree?.description && <p className="mt-1 text-[var(--muted)]">{tree.description}</p>}
         <p className="mt-1 text-sm text-[var(--muted)]">
@@ -110,6 +110,7 @@ export default function PublicTreePage() {
         </p>
       </div>
 
+      {/* Chart spans the full canvas (the layout removes max-width for /p/<id>). */}
       {focusId && people.length > 0 && (
         <PublicTreeChart
           people={people}
@@ -121,7 +122,7 @@ export default function PublicTreePage() {
         />
       )}
 
-      <div className="space-y-3">
+      <div className="mx-auto w-full max-w-5xl space-y-3">
         <h2 className="font-serif text-base font-semibold">All people</h2>
         <Input
           className="w-72"
@@ -131,7 +132,7 @@ export default function PublicTreePage() {
         />
       </div>
 
-      <Card className="overflow-hidden">
+      <Card className="mx-auto w-full max-w-5xl overflow-hidden">
         <CardContent className="p-0">
           {shown.length === 0 ? (
             <div className="px-4 py-6 text-sm text-[var(--muted)]">No matches.</div>
diff --git a/frontend/app/p/layout.tsx b/frontend/app/p/layout.tsx
index e03a460..0db3017 100644
--- a/frontend/app/p/layout.tsx
+++ b/frontend/app/p/layout.tsx
@@ -1,11 +1,21 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+
 import { PublicHeader } from "@/components/public-header";
 
-// Public viewing surface — no auth, no app sidebar. A slim header only.
+// Public viewing surface — no auth, no app sidebar. The tree page (/p/<id>)
+// wants the whole canvas like the member tree view; the person detail page
+// reads better in a centered column.
 export default function PublicLayout({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname();
+  const fullWidth = /^\/p\/[^/]+$/.test(pathname);
   return (
     <div className="min-h-screen">
       <PublicHeader />
-      <main className="mx-auto max-w-5xl px-4 py-8">{children}</main>
+      <main className={fullWidth ? "w-full px-4 py-6 md:px-6" : "mx-auto max-w-5xl px-4 py-8"}>
+        {children}
+      </main>
     </div>
   );
 }
diff --git a/frontend/components/public-tree-chart.tsx b/frontend/components/public-tree-chart.tsx
index 26c380f..3ee121d 100644
--- a/frontend/components/public-tree-chart.tsx
+++ b/frontend/components/public-tree-chart.tsx
@@ -160,7 +160,7 @@ export function PublicTreeChart({
       <div
         ref={containerRef}
         className="f3 rounded-xl border border-[var(--border)]"
-        style={{ width: "100%", height: "70vh", background: "var(--surface)" }}
+        style={{ width: "100%", height: "74vh", background: "var(--surface)" }}
       />
       <div className="flex flex-wrap items-center justify-between gap-2">
         <p className="text-sm text-[var(--muted)]">