feat(mobile): make PageHeader mobile-aware (stack below sm, hide description when actions present)

src/components/shared/page-header.tsx

@@ -19,6 +19,10 @@ interface PageHeaderProps {
  * eyebrow, and an action slot. Use `variant="gradient"` for hero strips on
  * 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
+ * actions) instead of side-by-side, and the description hides when actions
+ * are present (to preserve scroll real estate). Title font scales down too.
  */
 export function PageHeader({
   title,
@@ -33,27 +37,35 @@ export function PageHeader({
   return (
     <div
       className={cn(
-        'mb-6 flex items-start justify-between gap-4',
+        'mb-4 flex flex-col gap-3 sm:mb-6 sm:flex-row sm:items-start sm:justify-between sm:gap-4',
         isGradient &&
           'rounded-xl border border-slate-200 bg-gradient-brand-soft px-5 py-4 shadow-xs',
         className,
       )}
     >
-      <div className="min-w-0">
+      <div className="min-w-0 flex-1">
         {eyebrow ? (
           <div className="mb-1 text-xs font-semibold uppercase tracking-wide text-brand">
             {eyebrow}
           </div>
         ) : null}
-        <h1 className="truncate text-2xl font-bold tracking-tight text-foreground">{title}</h1>
-        {description && <p className="mt-1 text-sm text-muted-foreground">{description}</p>}
+        <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', actions && 'hidden sm:block')}>
+            {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 items-center gap-2">{actions}</div>}
+      {actions ? (
+        <div className="flex shrink-0 flex-wrap items-center gap-2 sm:flex-nowrap">{actions}</div>
+      ) : null}
     </div>
   );
 }