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/layout/app-nav.tsx

@@ -2,6 +2,7 @@
 
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { forwardRef } from "react";
 import {
   Home,
   ListPlus,
@@ -36,7 +37,10 @@ type AppNavProps = {
   items?: readonly NavItem[];
 };
 
-export function AppNav({ items = appNavItems }: AppNavProps) {
+export const AppNav = forwardRef<HTMLElement, AppNavProps>(function AppNav(
+  { items = appNavItems },
+  ref,
+) {
   const pathname = usePathname();
   const columnCount = Math.min(
     items.length,
@@ -45,8 +49,8 @@ export function AppNav({ items = appNavItems }: AppNavProps) {
 
   return (
     <nav
+      ref={ref}
       className="bottom-nav fixed inset-x-0 bottom-0 z-50 border-t-2 border-border bg-background/95 shadow-[0_-4px_0_0_hsl(280_45%_28%/0.35)] backdrop-blur supports-[backdrop-filter]:bg-background/90"
-      style={{ height: "var(--bottom-nav-height)" }}
     >
       <div
         aria-hidden
@@ -54,7 +58,7 @@ export function AppNav({ items = appNavItems }: AppNavProps) {
       />
       <div
         className={cn(
-          "mx-auto grid h-full max-w-6xl gap-1 px-2 pb-[max(0.5rem,env(safe-area-inset-bottom))] pt-2",
+          "mx-auto grid max-w-6xl gap-1 px-2 pb-[max(0.5rem,env(safe-area-inset-bottom))] pt-2",
           gridColsClass[columnCount],
         )}
       >
@@ -71,10 +75,10 @@ export function AppNav({ items = appNavItems }: AppNavProps) {
               aria-label={item.label}
               title={item.label}
               className={cn(
-                "bottom-nav-item flex flex-col items-center justify-center gap-1.5 border-2 px-1 py-2 text-[9px] leading-none transition-all duration-75",
+                "bottom-nav-item flex flex-col items-center justify-center gap-1.5 overflow-hidden border-2 px-1 py-2 text-[9px] leading-none transition-colors duration-75",
                 isActive
-                  ? "border-secondary bg-primary text-primary-foreground shadow-[var(--retro-shadow-sm)] -translate-y-0.5"
-                  : "border-transparent text-muted-foreground hover:border-border hover:bg-muted hover:text-foreground hover:-translate-y-0.5",
+                  ? "border-secondary bg-primary text-primary-foreground shadow-[var(--retro-shadow-sm)]"
+                  : "border-transparent text-muted-foreground hover:border-border hover:bg-muted hover:text-foreground",
               )}
             >
               <Icon
@@ -90,4 +94,4 @@ export function AppNav({ items = appNavItems }: AppNavProps) {
       </div>
     </nav>
   );
-}
+});

components/layout/app-page-header.tsx

@@ -1,42 +1,27 @@
-import { HomeLogoLink } from "@/components/layout/home-logo-link";
-import { cn } from "@/lib/utils";
-
 type AppPageHeaderProps = {
   title: string;
   description?: string;
   eyebrow?: string;
-  wide?: boolean;
 };
 
 export function AppPageHeader({
   title,
   description,
   eyebrow,
-  wide = false,
 }: AppPageHeaderProps) {
   return (
-    <header className="border-b-2 border-border bg-card/60 shadow-[var(--retro-shadow-sm)]">
-      <div
-        className={cn(
-          "mx-auto flex items-start justify-between gap-4 px-5 py-5",
-          wide ? "max-w-6xl" : "max-w-lg",
-        )}
-      >
-        <div className="min-w-0 flex-1">
-          {eyebrow ? (
-            <p className="mb-2 text-xs uppercase tracking-[0.2em] text-muted-foreground">
-              {eyebrow}
-            </p>
-          ) : null}
-          <h1 className="text-sm">{title}</h1>
-          {description ? (
-            <p className="mt-2 text-xs leading-relaxed text-muted-foreground">
-              {description}
-            </p>
-          ) : null}
-        </div>
-        <HomeLogoLink className="mt-0.5" />
-      </div>
+    <header className="mb-6 border-b-2 border-border bg-card/60 px-1 pb-5 shadow-[var(--retro-shadow-sm)]">
+      {eyebrow ? (
+        <p className="mb-2 text-xs uppercase tracking-[0.2em] text-muted-foreground">
+          {eyebrow}
+        </p>
+      ) : null}
+      <h1 className="text-sm">{title}</h1>
+      {description ? (
+        <p className="mt-2 text-xs leading-relaxed text-muted-foreground">
+          {description}
+        </p>
+      ) : null}
     </header>
   );
 }

components/layout/app-shell.tsx

@@ -1,4 +1,5 @@
 import { AppPageHeader } from "@/components/layout/app-page-header";
+import { AppTopBar } from "@/components/layout/app-top-bar";
 import { cn } from "@/lib/utils";
 
 type AppShellProps = {
@@ -8,6 +9,11 @@ type AppShellProps = {
   wide?: boolean;
 };
 
+const contentWidthClass = {
+  default: "max-w-lg md:max-w-2xl lg:max-w-4xl",
+  wide: "max-w-lg md:max-w-3xl lg:max-w-6xl",
+} as const;
+
 export function AppShell({
   children,
   title,
@@ -15,16 +21,17 @@ export function AppShell({
   wide = false,
 }: AppShellProps) {
   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%)]">
-      {title ? (
-        <AppPageHeader title={title} description={description} wide={wide} />
-      ) : null}
+    <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={cn(
-          "mx-auto px-5 py-6",
-          wide ? "max-w-6xl" : "max-w-lg",
+          "mx-auto px-4 py-6 md:px-5",
+          wide ? contentWidthClass.wide : contentWidthClass.default,
         )}
       >
+        {title ? (
+          <AppPageHeader title={title} description={description} />
+        ) : null}
         {children}
       </main>
     </div>

components/layout/app-top-bar.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+
+import { HomeLogoLink } from "@/components/layout/home-logo-link";
+import { routes } from "@/lib/routes";
+import { cn } from "@/lib/utils";
+
+type AppTopBarProps = {
+  className?: string;
+};
+
+export function AppTopBar({ className }: AppTopBarProps) {
+  const pathname = usePathname();
+  const isHome = pathname === routes.avatar;
+
+  return (
+    <header
+      className={cn(
+        "app-top-bar fixed inset-x-0 top-0 z-40 border-b-2 border-border bg-background/95 shadow-[var(--retro-shadow-sm)] backdrop-blur supports-[backdrop-filter]:bg-background/90",
+        className,
+      )}
+      style={{
+        height: "var(--app-topbar-height)",
+        paddingTop: "env(safe-area-inset-top, 0px)",
+      }}
+    >
+      <div className="mx-auto flex h-full max-w-6xl items-center px-4">
+        <HomeLogoLink
+          className="mt-0"
+          aria-current={isHome ? "page" : undefined}
+        />
+      </div>
+    </header>
+  );
+}

components/layout/global-bottom-nav.tsx

@@ -3,10 +3,20 @@
 import { useEffect, useState } from "react";
 
 import { AppNav } from "@/components/layout/app-nav";
+import {
+  NavOffsetProvider,
+  useNavOffsetRef,
+} from "@/components/layout/nav-offset-provider";
 import { HABIT_PET_DATA_UPDATED_EVENT } from "@/lib/app-events";
 import { getOnboardingStatusClient } from "@/lib/onboarding-status";
 import { createClient } from "@/lib/supabase/client";
 
+function MeasuredAppNav() {
+  const navRef = useNavOffsetRef();
+
+  return <AppNav ref={navRef} />;
+}
+
 export function GlobalBottomNav() {
   const [showNav, setShowNav] = useState(false);
 
@@ -43,9 +53,9 @@ export function GlobalBottomNav() {
     };
   }, []);
 
-  if (!showNav) {
-    return null;
-  }
-
-  return <AppNav />;
+  return (
+    <NavOffsetProvider enabled={showNav}>
+      {showNav ? <MeasuredAppNav /> : null}
+    </NavOffsetProvider>
+  );
 }

components/layout/home-logo-link.tsx

@@ -5,13 +5,18 @@ import { cn } from "@/lib/utils";
 
 type HomeLogoLinkProps = {
   className?: string;
+  "aria-current"?: "page" | undefined;
 };
 
-export function HomeLogoLink({ className }: HomeLogoLinkProps) {
+export function HomeLogoLink({
+  className,
+  "aria-current": ariaCurrent,
+}: HomeLogoLinkProps) {
   return (
     <Link
       href={routes.avatar}
       aria-label="Go to home"
+      aria-current={ariaCurrent}
       className={cn(
         "group flex shrink-0 items-center justify-center border-2 border-border bg-card/80 p-2 shadow-[var(--retro-shadow-sm)] transition-transform hover:-translate-y-0.5 hover:border-primary/60",
         className,

components/layout/nav-offset-provider.tsx

@@ -0,0 +1,111 @@
+"use client";
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  type ReactNode,
+  type Ref,
+} from "react";
+
+type NavOffsetContextValue = {
+  setNavElement: (element: HTMLElement | null) => void;
+};
+
+const NavOffsetContext = createContext<NavOffsetContextValue | null>(null);
+
+export function useNavOffsetRef<T extends HTMLElement>() {
+  const context = useContext(NavOffsetContext);
+
+  if (!context) {
+    throw new Error("useNavOffsetRef must be used within NavOffsetProvider.");
+  }
+
+  const setNavElement = context.setNavElement;
+
+  return useCallback(
+    (node: T | null) => {
+      setNavElement(node);
+    },
+    [setNavElement],
+  ) as Ref<T>;
+}
+
+type NavOffsetProviderProps = {
+  children: ReactNode;
+  enabled?: boolean;
+};
+
+export function NavOffsetProvider({
+  children,
+  enabled = true,
+}: NavOffsetProviderProps) {
+  const navElementRef = useRef<HTMLElement | null>(null);
+  const observerRef = useRef<ResizeObserver | null>(null);
+
+  const syncOffset = useCallback(() => {
+    const root = document.documentElement;
+
+    if (!enabled || !navElementRef.current) {
+      root.style.setProperty("--app-nav-offset", "0px");
+      return;
+    }
+
+    root.style.setProperty(
+      "--app-nav-offset",
+      `${navElementRef.current.offsetHeight}px`,
+    );
+  }, [enabled]);
+
+  const setNavElement = useCallback(
+    (element: HTMLElement | null) => {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+        observerRef.current = null;
+      }
+
+      navElementRef.current = element;
+
+      if (!element || !enabled) {
+        syncOffset();
+        return;
+      }
+
+      const observer = new ResizeObserver(() => {
+        syncOffset();
+      });
+
+      observer.observe(element);
+      observerRef.current = observer;
+      syncOffset();
+    },
+    [enabled, syncOffset],
+  );
+
+  useEffect(() => {
+    syncOffset();
+    window.addEventListener("resize", syncOffset);
+
+    return () => {
+      window.removeEventListener("resize", syncOffset);
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+      }
+      document.documentElement.style.setProperty("--app-nav-offset", "0px");
+    };
+  }, [syncOffset]);
+
+  useEffect(() => {
+    if (!enabled) {
+      setNavElement(null);
+    }
+  }, [enabled, setNavElement]);
+
+  return (
+    <NavOffsetContext.Provider value={{ setNavElement }}>
+      {children}
+    </NavOffsetContext.Provider>
+  );
+}