Account menu + Settings (change password); per-tree home person; full-width tree

- Sidebar bottom-left now shows the signed-in user; clicking opens a menu with
  Settings and Sign out. New /settings page: account info + change password
  (POST /auth/change-password, re-verifies current password). Export/restore/
  delete are stubbed there for the next pass.
- Per-tree default/home person: tree.home_person_id (migration) + TreeUpdate/
  Read; the tree and family views open focused on it; the person page gets a
  "Set as default" control and "Default person" badge. Cleared if that person
  is deleted. Complements the account-level "this is me" link.
- Tree visualization now fills the content area (AppShell drops the max-width
  column on the /tree route); other pages stay centered.
- Audit records are coerced JSON-safe (UUIDs/enums), so PATCHing UUID fields
  like home_person_id audits cleanly.

50 backend tests pass; migration up/down verified; frontend builds.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

frontend/components/app-shell.tsx

@@ -2,6 +2,7 @@
 
 import { Menu } from "lucide-react";
 import Link from "next/link";
+import { usePathname } from "next/navigation";
 import { useState } from "react";
 
 import { AppSidebar } from "@/components/app-sidebar";
@@ -12,6 +13,10 @@ import { AppSidebar } from "@/components/app-sidebar";
  */
 export function AppShell({ children }: { children: React.ReactNode }) {
   const [open, setOpen] = useState(false);
+  const pathname = usePathname();
+  // The tree visualization wants the whole canvas; everything else reads better
+  // in a centered, max-width column.
+  const fullWidth = /^\/trees\/[^/]+\/tree$/.test(pathname);
 
   return (
     <div className="flex min-h-screen">
@@ -49,7 +54,15 @@ export function AppShell({ children }: { children: React.ReactNode }) {
           </div>
         )}
 
-        <div className="mx-auto w-full max-w-4xl px-6 py-10 md:px-10">{children}</div>
+        <div
+          className={
+            fullWidth
+              ? "w-full px-4 py-6 md:px-6"
+              : "mx-auto w-full max-w-4xl px-6 py-10 md:px-10"
+          }
+        >
+          {children}
+        </div>
       </div>
     </div>
   );