Fix app shell layout with stable top bar and dynamic nav offset.

Unified chrome keeps the home logo top-left, measures bottom nav height
for scroll clearance, and adds responsive content widths for mobile/desktop.

components/avatar/avatar-customize-layout.tsx

@@ -1,4 +1,5 @@
 import { AppPageHeader } from "@/components/layout/app-page-header";
+import { AppTopBar } from "@/components/layout/app-top-bar";
 
 type AvatarCustomizeLayoutProps = {
   eyebrow?: string;
@@ -14,14 +15,17 @@ export function AvatarCustomizeLayout({
   children,
 }: AvatarCustomizeLayoutProps) {
   return (
-    <div className="relative bg-background bg-[radial-gradient(circle_at_20%_0%,hsl(var(--primary)/0.12)_0%,transparent_45%),radial-gradient(circle_at_80%_100%,hsl(var(--secondary)/0.1)_0%,transparent_40%)]">
-      <AppPageHeader
-        eyebrow={eyebrow}
-        title={title}
-        description={description}
-      />
+    <div className="relative min-h-dvh bg-background bg-[radial-gradient(circle_at_20%_0%,hsl(var(--primary)/0.12)_0%,transparent_45%),radial-gradient(circle_at_80%_100%,hsl(var(--secondary)/0.1)_0%,transparent_40%)] pt-topbar">
+      <AppTopBar />
 
-      <main className="mx-auto max-w-6xl px-5 py-6">{children}</main>
+      <main className="mx-auto max-w-lg px-4 py-6 md:max-w-3xl md:px-5 lg:max-w-6xl">
+        <AppPageHeader
+          eyebrow={eyebrow}
+          title={title}
+          description={description}
+        />
+        {children}
+      </main>
     </div>
   );
 }