From 150d69e5aca96a5d39ef81a3b6d87234d956a47a Mon Sep 17 00:00:00 2001
From: Justin Paul <justin@jpaul.me>
Date: Tue, 9 Jun 2026 10:29:18 -0400
Subject: [PATCH] Public tree view: full-width canvas like the member view

The public layout forced max-w-5xl on every /p page, so the tree chart was
cramped. Mirror the member shell: the public layout now drops the max-width for
the tree page (/p/<id>) only, giving the chart the full canvas (74vh to match
the member view), while the page keeps its heading and people list in a
centered max-w-5xl column. Person detail (/p/<id>/persons/<pid>) and /explore
stay narrow.

tsc clean; next build passes.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Signed-off-by: Justin Paul <justin@jpaul.me>
---
 frontend/app/p/[treeId]/page.tsx          |  7 ++++---
 frontend/app/p/layout.tsx                 | 14 ++++++++++++--
 frontend/components/public-tree-chart.tsx |  2 +-
 3 files changed, 17 insertions(+), 6 deletions(-)

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)]">