From 7f68e1de0f8b5e58a4eb3b22f9e5789c86da9b1e Mon Sep 17 00:00:00 2001 From: gudnuf Date: Fri, 15 May 2026 10:30:56 -0700 Subject: [PATCH 1/2] fix(page-header): X icon stays put across gift card pages Two structural inconsistencies were drifting the X icon between /gift-cards and its child routes: 1. Detail/offer pages used `absolute inset-x-0` headers (which escape Page's horizontal padding); list page used in-flow. On desktop Page has sm:px-6/lg:px-8, so the absolute header's X landed 24-32px left of the in-flow header's. Switch detail/offer/add to the same in-flow px-4 pattern as the list. 2. Detail/offer/add used a raw ` - + + + diff --git a/app/features/gift-cards/gift-card-details.tsx b/app/features/gift-cards/gift-card-details.tsx index e9033fec0..1d9bfe893 100644 --- a/app/features/gift-cards/gift-card-details.tsx +++ b/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'; @@ -54,15 +53,11 @@ export default function GiftCardDetails({ cardId }: GiftCardDetailsProps) { return ( - - - - + + - + {/* Card area - split-stack positioning */}
- - - - + + - +
({ 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) { From 5c06fb4254101bc9128e89bf68b266fcd0a42db6 Mon Sep 17 00:00:00 2001 From: gudnuf Date: Fri, 15 May 2026 11:19:12 -0700 Subject: [PATCH 2/2] refactor(gift-cards): use default Page and PageHeader (no overrides) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Drop the `Page className="px-0 pb-0"` + `PageHeader className="px-4"` overrides on all four gift card pages. They were originally introduced to let the list page's DiscoverGiftCards horizontal scroll extend edge-to-edge on mobile, with the header re-adding its own padding to keep the X icon visually offset. But this approach split horizontal padding responsibility between Page and Header asymmetrically — and on desktop, Page's sm:px-6/lg:px-8 still applied on top of the header's px-4, so the X icon sat 16-32px right of where it does on every other page in the app. With default Page and PageHeader, the gift card pages match the standard pattern used everywhere else. X icon position is consistent across all routes without any responsive-padding hacks. Tradeoff: DiscoverGiftCards and OffersSection (3+ mode) no longer extend edge-to-edge on mobile — they sit inside Page's px-4. Inner content sections that had their own `px-4` will also indent more (Page padding stacks on top of theirs). Evaluating visual; may revert. --- app/features/gift-cards/add-gift-card.tsx | 4 ++-- app/features/gift-cards/gift-card-details.tsx | 4 ++-- app/features/gift-cards/gift-cards.tsx | 4 ++-- app/features/gift-cards/offer-details.tsx | 4 ++-- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/app/features/gift-cards/add-gift-card.tsx b/app/features/gift-cards/add-gift-card.tsx index fbb1eed75..58df27467 100644 --- a/app/features/gift-cards/add-gift-card.tsx +++ b/app/features/gift-cards/add-gift-card.tsx @@ -130,8 +130,8 @@ export function AddGiftCard({ giftCard }: AddGiftCardProps) { } return ( - - + + diff --git a/app/features/gift-cards/gift-card-details.tsx b/app/features/gift-cards/gift-card-details.tsx index 1d9bfe893..d0ab08dd7 100644 --- a/app/features/gift-cards/gift-card-details.tsx +++ b/app/features/gift-cards/gift-card-details.tsx @@ -52,8 +52,8 @@ export default function GiftCardDetails({ cardId }: GiftCardDetailsProps) { const balance = getAccountBalance(card); return ( - - + + diff --git a/app/features/gift-cards/gift-cards.tsx b/app/features/gift-cards/gift-cards.tsx index 3c0892919..2f8881ed2 100644 --- a/app/features/gift-cards/gift-cards.tsx +++ b/app/features/gift-cards/gift-cards.tsx @@ -45,8 +45,8 @@ export function GiftCards() { }; return ( - - + + Gift Cards diff --git a/app/features/gift-cards/offer-details.tsx b/app/features/gift-cards/offer-details.tsx index b495ad4a1..b970721f3 100644 --- a/app/features/gift-cards/offer-details.tsx +++ b/app/features/gift-cards/offer-details.tsx @@ -44,8 +44,8 @@ export default function OfferDetails({ offer }: OfferDetailsProps) { const balance = isExpired ? null : getAccountBalance(offer); return ( - - + +