fix(gift-cards): follow standard header pattern across all routes

app/components/page.tsx

@@ -166,7 +166,7 @@ export function PageHeader({ children, className, ...props }: PageHeaderProps) {
   return (
     <header
       className={cn(
-        'mb-4 grid w-full grid-cols-[1fr_auto_1fr] items-center',
+        'mb-4 grid h-7 w-full grid-cols-[1fr_auto_1fr] items-center',
         className,
       )}
       {...props}

app/features/gift-cards/add-gift-card.tsx

@@ -1,4 +1,3 @@
-import { X } from 'lucide-react';
 import { useState } from 'react';
 import {
   Link,
@@ -7,11 +6,11 @@ import {
   useViewTransitionState,
 } from 'react-router';
 import {
+  ClosePageButton,
   Page,
   PageContent,
   PageFooter,
   PageHeader,
-  PageHeaderItem,
 } from '~/components/page';
 import { Button } from '~/components/ui/button';
 import {
@@ -64,13 +63,6 @@ export function AddGiftCard({ giftCard }: AddGiftCardProps) {
   const acceptTerms = useAcceptTerms();
   const isTransitioning = useViewTransitionState('/gift-cards');
 
-  const handleBack = () => {
-    navigate('/gift-cards', {
-      viewTransition: true,
-      state: location.state,
-    });
-  };
-
   const runAdd = async () => {
     setIsAdding(true);
     try {
@@ -138,13 +130,9 @@ export function AddGiftCard({ giftCard }: AddGiftCardProps) {
   }
 
   return (
-    <Page className="relative">
-      <PageHeader className="z-10">
-        <PageHeaderItem position="left">
-          <button type="button" onClick={handleBack} aria-label="Close">
-            <X />
-          </button>
-        </PageHeaderItem>
+    <Page>
+      <PageHeader>
+        <ClosePageButton to="/gift-cards" state={location.state} />
       </PageHeader>
 
       <PageContent className="flex flex-col items-center justify-center gap-4">

app/features/gift-cards/gift-card-details.tsx

@@ -1,11 +1,10 @@
-import { X } from 'lucide-react';
 import { useNavigate, useViewTransitionState } from 'react-router';
 
 import {
+  ClosePageButton,
   Page,
   PageContent,
   PageHeader,
-  PageHeaderItem,
 } from '~/components/page';
 import { Button } from '~/components/ui/button';
 import { getAccountBalance } from '~/features/accounts/account';
@@ -53,16 +52,12 @@ export default function GiftCardDetails({ cardId }: GiftCardDetailsProps) {
   const balance = getAccountBalance(card);
 
   return (
-    <Page className="px-0 pb-0">
-      <PageHeader className="absolute inset-x-0 top-0 z-[60] mb-0 px-4 pt-4 pb-4">
-        <PageHeaderItem position="left">
-          <button type="button" onClick={handleBack} aria-label="Close">
-            <X />
-          </button>
-        </PageHeaderItem>
+    <Page>
+      <PageHeader>
+        <ClosePageButton to="/gift-cards" />
       </PageHeader>
 
-      <PageContent className="scrollbar-none relative min-h-0 gap-0 overflow-y-auto pt-16 pb-0">
+      <PageContent className="scrollbar-none relative min-h-0 gap-0 overflow-y-auto pb-0">
         {/* Card area - split-stack positioning */}
         <div className="w-full px-4">
           <div

app/features/gift-cards/gift-cards.tsx

@@ -45,8 +45,8 @@ export function GiftCards() {
   };
 
   return (
-    <Page className="px-0 pb-0">
-      <PageHeader className="px-4">
+    <Page>
+      <PageHeader>
         <ClosePageButton to="/" transition="slideLeft" applyTo="oldView" />
         <PageHeaderTitle>Gift Cards</PageHeaderTitle>
       </PageHeader>

app/features/gift-cards/offer-details.tsx

@@ -1,11 +1,10 @@
-import { X } from 'lucide-react';
 import { useNavigate, useViewTransitionState } from 'react-router';
 
 import {
+  ClosePageButton,
   Page,
   PageContent,
   PageHeader,
-  PageHeaderItem,
 } from '~/components/page';
 import { Button } from '~/components/ui/button';
 import {
@@ -45,16 +44,12 @@ export default function OfferDetails({ offer }: OfferDetailsProps) {
   const balance = isExpired ? null : getAccountBalance(offer);
 
   return (
-    <Page className="px-0 pb-0">
-      <PageHeader className="absolute inset-x-0 top-0 z-[60] mb-0 px-4 pt-4 pb-4">
-        <PageHeaderItem position="left">
-          <button type="button" onClick={handleBack} aria-label="Close">
-            <X />
-          </button>
-        </PageHeaderItem>
+    <Page>
+      <PageHeader>
+        <ClosePageButton to="/gift-cards" />
       </PageHeader>
 
-      <PageContent className="scrollbar-none relative min-h-0 gap-0 overflow-y-auto pt-16 pb-0">
+      <PageContent className="scrollbar-none relative min-h-0 gap-0 overflow-y-auto pb-0">
         <div className="w-full px-4">
           <div
             className="relative mx-auto w-full"

app/lib/transitions/view-transition.tsx

@@ -274,7 +274,7 @@ export function useViewTransitionEffect() {
 }
 
 type ViewTransitionCommonProps = {
-  transition: Transition;
+  transition?: Transition;
   applyTo?: ApplyTo;
 };
 
@@ -295,10 +295,9 @@ type ViewTransitionNavLinkProps = ViewTransitionCommonProps & {
 export function LinkWithViewTransition<
   T extends ViewTransitionLinkProps | ViewTransitionNavLinkProps,
 >({ transition, applyTo = 'bothViews', as = Link, ...props }: T) {
-  const linkState: ViewTransitionState = {
-    transition,
-    applyTo,
-  };
+  const linkState: ViewTransitionState | null = transition
+    ? { transition, applyTo }
+    : null;
 
   const commonProps = {
     ...props,
@@ -309,11 +308,13 @@ export function LinkWithViewTransition<
       // "loading" state entirely, so our useEffect never gets a chance to apply styles.
       // Browser back/forward (popstate) navigations still go through loading state and
       // will be handled by useViewTransitionEffect.
-      applyTransitionStyles(transition, applyTo);
+      if (transition) {
+        applyTransitionStyles(transition, applyTo);
+      }
       props.onClick?.(event);
     },
     viewTransition: true,
-    state: { ...props.state, ...linkState },
+    state: linkState ? { ...props.state, ...linkState } : props.state,
   };
 
   if (as === NavLink) {