feat(mobile): redesign topbar + collapse cumbersome page-header on mobile

Topbar (mobile-topbar.tsx):
  - Bumped to 56px to match standard mobile-app proportions.
  - Deep-navy gradient surface (#1e2844 -> #171f35) with white type —
    matches the desktop sidebar identity, gives the app a premium
    finish instead of generic white-with-text.
  - Brand "PN" wordmark mark on the left when no back affordance is
    needed (rounded brand-blue square, inset highlight + drop shadow).
  - Soft glow shadow underneath for elevation depth instead of a hard
    bottom border.
  - White-on-navy back arrow with active-state translucent fill.

PageHeader (page-header.tsx):
  - On mobile, the gradient hero strip + duplicate title + description
    block now collapses entirely — the topbar already shows the title,
    so duplicating it in the body wasted a third of the viewport.
  - The actions slot remains rendered as a flush right-aligned row so
    primary buttons (date-range pickers, "+ New X") stay accessible.
  - Desktop rendering is untouched.

Mobile shell (mobile-layout.tsx):
  - Top buffer 16px below the topbar so content doesn't ride flush.
  - Bottom buffer 32px above the tab bar so the last card breathes.

CSS (globals.css):
  - Hide the react-query-devtools floating button below lg: — it was
    overlapping the bottom-tab bar's "More" affordance.

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

src/app/globals.css

@@ -157,3 +157,15 @@ body[data-form-factor='mobile'] [data-shell='desktop'] {
 body[data-form-factor='mobile'] [data-shell='mobile'] {
   display: block;
 }
+
+/*
+ * React Query Devtools floating button collides with the bottom tab bar's
+ * "More" tab on mobile. The devtools panel itself remains accessible from
+ * desktop where the toggle is positioned out of the way of any UI.
+ */
+@media (max-width: 1023.98px) {
+  .tsqd-open-btn-container,
+  .tsqd-parent-container {
+    display: none !important;
+  }
+}

src/components/layout/mobile/mobile-layout.tsx

@@ -2,6 +2,7 @@
 
 import { useState, type ReactNode } from 'react';
 
+import { cn } from '@/lib/utils';
 import { MobileLayoutProvider } from './mobile-layout-provider';
 import { MobileTopbar } from './mobile-topbar';
 import { MobileBottomTabs } from './mobile-bottom-tabs';
@@ -21,7 +22,15 @@ export function MobileLayout({ children }: { children: ReactNode }) {
     <div data-shell="mobile" className="min-h-screen bg-background">
       <MobileLayoutProvider>
         <MobileTopbar />
-        <main className="px-4 pt-[calc(52px+env(safe-area-inset-top))] pb-[calc(56px+env(safe-area-inset-bottom))] min-h-screen">
+        <main
+          className={cn(
+            'px-4 min-h-screen',
+            // 56px topbar + safe-area + 16px breathing room
+            'pt-[calc(56px+env(safe-area-inset-top)+1rem)]',
+            // 56px tab bar + safe-area + 32px breathing room
+            'pb-[calc(56px+env(safe-area-inset-bottom)+2rem)]',
+          )}
+        >
           {children}
         </main>
         <MobileBottomTabs onMoreClick={() => setMoreOpen(true)} />

src/components/layout/mobile/mobile-topbar.tsx

@@ -7,16 +7,20 @@ import { cn } from '@/lib/utils';
 import { useMobileChrome } from './mobile-layout-provider';
 
 /**
- * Fixed compact topbar (52px + safe-area top inset). Renders the page title
+ * Fixed mobile topbar (56px + safe-area top inset). Marina-editorial premium:
- * (auto-truncating), an optional back button, and an optional primary action
+ * deep-navy gradient surface with white type, the brand "PN" mark on the
- * — all driven by `useMobileChrome()` from the active page.
+ * left when there's no back affordance, and a soft glow shadow underneath
+ * for depth instead of a hard divider line.
+ *
+ * Slots: title (auto-truncating), back arrow, primary action — all driven by
+ * `useMobileChrome()` from the active page. When no page has set a title the
+ * URL's last segment is title-cased as a fallback.
  */
 export function MobileTopbar() {
   const { title, primaryAction, showBackButton } = useMobileChrome();
   const router = useRouter();
   const pathname = usePathname();
 
-  // Fall back to the last path segment (Title Case) if no page-supplied title.
   const fallbackTitle =
     pathname
       .split('/')
@@ -28,8 +32,10 @@ export function MobileTopbar() {
   return (
     <header
       className={cn(
-        'fixed top-0 inset-x-0 z-40 bg-background border-b border-border',
+        'fixed top-0 inset-x-0 z-40',
-        'h-[calc(52px+env(safe-area-inset-top))] pt-safe-top',
+        'bg-gradient-to-b from-[#1e2844] to-[#171f35]',
+        'shadow-[0_4px_18px_-6px_rgba(15,23,42,0.45)]',
+        'h-[calc(56px+env(safe-area-inset-top))] pt-safe-top',
         'flex items-center gap-2 px-3',
       )}
     >
@@ -38,19 +44,37 @@ export function MobileTopbar() {
           type="button"
           onClick={() => router.back()}
           aria-label="Go back"
-          className="-ml-1 size-11 inline-flex items-center justify-center text-foreground"
+          className={cn(
+            'size-11 inline-flex items-center justify-center rounded-full -ml-1',
+            'text-white/95 active:bg-white/10 transition-colors',
+          )}
         >
-          <ChevronLeft className="size-5" />
+          <ChevronLeft className="size-[22px] stroke-[2.25]" />
         </button>
       ) : (
-        <div className="size-11" aria-hidden />
+        <div
+          aria-label="Port Nimara"
+          className={cn(
+            'size-9 shrink-0 rounded-lg flex items-center justify-center',
+            'bg-[#3a7bc8] shadow-[inset_0_1px_0_rgba(255,255,255,0.18),0_1px_2px_rgba(0,0,0,0.25)]',
+          )}
+        >
+          <span className="text-white font-bold text-[13px] tracking-tight">PN</span>
+        </div>
       )}
 
-      <h1 className="flex-1 text-base font-semibold truncate text-foreground">
+      <h1
+        className={cn(
+          'flex-1 min-w-0 truncate text-center',
+          'text-[17px] font-semibold tracking-tight text-white',
+        )}
+      >
         {title ?? fallbackTitle}
       </h1>
 
-      <div className="size-11 inline-flex items-center justify-end">{primaryAction}</div>
+      <div className="size-11 inline-flex items-center justify-center text-white/95">
+        {primaryAction}
+      </div>
     </header>
   );
 }

src/components/shared/page-header.tsx

@@ -20,9 +20,11 @@ interface PageHeaderProps {
  * landing pages and detail headers; the plain variant remains the default so
  * existing call-sites stay unchanged.
  *
- * Mobile-aware: below sm (640px) the header stacks vertically (title above
+ * Mobile-aware: below sm (640px) the title/eyebrow/description/gradient
- * actions) instead of side-by-side, and the description hides when actions
+ * frame all collapse — the page title is already shown by the mobile topbar,
- * are present (to preserve scroll real estate). Title font scales down too.
+ * so duplicating it in the body wastes scroll real estate. What remains is a
+ * flush right-aligned action row (or nothing if there are no actions). On sm+
+ * the full strip with title+description renders as before.
  */
 export function PageHeader({
   title,
@@ -35,37 +37,48 @@ export function PageHeader({
 }: PageHeaderProps) {
   const isGradient = variant === 'gradient';
   return (
-    <div
+    <>
-      className={cn(
+      {/* Mobile: actions only. Title/description are duplicated by the topbar. */}
-        'mb-4 flex flex-col gap-3 sm:mb-6 sm:flex-row sm:items-start sm:justify-between sm:gap-4',
+      {actions ? (
-        isGradient &&
+        <div className={cn('sm:hidden flex flex-wrap items-center justify-end gap-2', className)}>
-          'rounded-xl border border-slate-200 bg-gradient-brand-soft px-5 py-4 shadow-xs',
+          {actions}
-        className,
+        </div>
-      )}
+      ) : null}
-    >
+
-      <div className="min-w-0 flex-1">
+      {/* Desktop: full strip with title, eyebrow, description, kpi line, actions. */}
-        {eyebrow ? (
+      <div
-          <div className="mb-1 text-xs font-semibold uppercase tracking-wide text-brand">
+        className={cn(
-            {eyebrow}
+          'hidden sm:flex flex-col gap-3 sm:mb-6 sm:flex-row sm:items-start sm:justify-between sm:gap-4',
-          </div>
+          isGradient &&
-        ) : null}
+            'rounded-xl border border-slate-200 bg-gradient-brand-soft px-5 py-4 shadow-xs',
-        <h1 className="truncate text-xl font-bold tracking-tight text-foreground sm:text-2xl">
+          className,
-          {title}
+        )}
-        </h1>
+        // Render the title element as <h1> for accessibility / SEO so screen
-        {description ? (
+        // readers still get a heading on mobile from the topbar's <h1>.
-          <p className={cn('mt-1 text-sm text-muted-foreground', actions && 'hidden sm:block')}>
+        aria-hidden={undefined}
-            {description}
+      >
-          </p>
+        <div className="min-w-0 flex-1">
-        ) : null}
+          {eyebrow ? (
-        {kpiLine ? (
+            <div className="mb-1 text-xs font-semibold uppercase tracking-wide text-brand">
-          <div className="mt-2 flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-muted-foreground">
+              {eyebrow}
-            {kpiLine}
+            </div>
-          </div>
+          ) : null}
+          <h1 className="truncate text-xl font-bold tracking-tight text-foreground sm:text-2xl">
+            {title}
+          </h1>
+          {description ? (
+            <p className={cn('mt-1 text-sm text-muted-foreground')}>{description}</p>
+          ) : null}
+          {kpiLine ? (
+            <div className="mt-2 flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-muted-foreground">
+              {kpiLine}
+            </div>
+          ) : null}
+        </div>
+        {actions ? (
+          <div className="flex shrink-0 flex-wrap items-center gap-2 sm:flex-nowrap">{actions}</div>
         ) : null}
       </div>
-      {actions ? (
+    </>
-        <div className="flex shrink-0 flex-wrap items-center gap-2 sm:flex-nowrap">{actions}</div>
-      ) : null}
-    </div>
   );
 }