@tuturuuu/ui 0.16.0 → 0.18.0

package/src/components/ui/storefront/cart-popover.tsx

@@ -49,7 +49,7 @@ export function StorefrontCartPopover({
       <PopoverContent
         align="end"
         className={cn(
-          'w-[min(calc(100vw-2rem),24rem)] border-border/70 p-4 shadow-xl',
+          'w-[min(calc(100vw-2rem),24rem)] border-border p-4 shadow-sm',
           radius
         )}
         sideOffset={10}

package/src/components/ui/storefront/hero-panel.tsx

@@ -24,13 +24,40 @@ export function StorefrontHeroPanel({
   return (
     <section
       className={cn(
-        'relative isolate overflow-hidden',
+        'grid overflow-hidden md:grid-cols-[minmax(0,1.08fr)_minmax(18rem,0.92fr)]',
         storefrontSurfaceClasses[storefront.surfaceStyle],
         radius
       )}
     >
-      {/* Full-width featured banner backdrop. */}
-      <div className="relative h-40 w-full sm:h-52 md:h-60">
+      <div className="flex min-h-80 flex-col justify-between gap-10 p-6 sm:p-8 lg:p-10">
+        <div className="flex items-center gap-2 font-mono text-muted-foreground text-xs uppercase tracking-[0.16em]">
+          <Store className="size-4" />
+          <span>{labels.browse}</span>
+        </div>
+        <div className="max-w-2xl">
+          <h2 className="text-balance font-semibold text-4xl tracking-[-0.035em] sm:text-5xl lg:text-6xl">
+            {storefront.name}
+          </h2>
+          <p className="mt-4 max-w-xl text-pretty text-muted-foreground leading-7">
+            {storefront.description ?? labels.fallbackDescription}
+          </p>
+          <div className="mt-6 flex flex-wrap gap-2">
+            <Badge className="border-border bg-background" variant="outline">
+              {listingsCount} {labels.product}
+            </Badge>
+            <Badge className="border-border bg-background" variant="outline">
+              {currency}
+            </Badge>
+            <Badge className="border-border bg-background" variant="outline">
+              {storefront.visibility === 'public'
+                ? labels.publicStore
+                : labels.privateStore}
+            </Badge>
+          </div>
+        </div>
+      </div>
+
+      <div className="relative min-h-64 border-border border-t md:min-h-full md:border-t-0 md:border-l">
         {heroImage ? (
           <StorefrontImagePanel
             className="absolute inset-0 h-full w-full"
@@ -39,34 +66,12 @@ export function StorefrontHeroPanel({
             priority
           />
         ) : (
-          <div className="absolute inset-0 bg-gradient-to-br from-muted via-muted/60 to-background" />
-        )}
-        {/* Scrim that fades the banner into the page so overlaid text stays legible. */}
-        <div className="absolute inset-0 bg-gradient-to-t from-background via-background/55 to-transparent" />
-      </div>
-
-      {/* Overlaid title block — pulled up onto the lower, faded part of the banner. */}
-      <div className="relative -mt-20 flex flex-col gap-4 p-5">
-        <div>
-          <div className="flex items-center gap-2 text-muted-foreground text-xs">
-            <Store className="h-4 w-4" />
-            <span>{labels.browse}</span>
+          <div className="absolute inset-0 grid place-items-center bg-muted/35">
+            <div className="grid size-24 place-items-center rounded-xl border border-border bg-background/80">
+              <Store className="size-8 text-muted-foreground" />
+            </div>
           </div>
-          <h2 className="mt-2 text-balance font-semibold text-3xl tracking-tight md:text-4xl">
-            {storefront.name}
-          </h2>
-          <p className="mt-2 max-w-2xl text-muted-foreground text-sm leading-6">
-            {storefront.description ?? labels.fallbackDescription}
-          </p>
-        </div>
-        <div className="flex flex-wrap gap-2">
-          <Badge className="border-border bg-background" variant="outline">
-            {listingsCount} {labels.product}
-          </Badge>
-          <Badge className="border-border bg-background" variant="outline">
-            {currency}
-          </Badge>
-        </div>
+        )}
       </div>
     </section>
   );

package/src/components/ui/storefront/listing-card.tsx

@@ -59,10 +59,10 @@ export function StorefrontListingCard({
       className={cn(
         surfaceClassName,
         radius,
-        'group relative overflow-hidden transition duration-200 hover:-translate-y-0.5 hover:shadow-foreground/10 hover:shadow-md',
+        'group relative overflow-hidden transition duration-200 hover:border-foreground/20 hover:shadow-foreground/5 hover:shadow-sm',
         isList
           ? 'grid gap-4 p-3 sm:grid-cols-[112px_minmax(0,1fr)_auto] sm:items-center'
-          : 'flex min-h-full flex-col gap-4 p-3'
+          : 'flex min-h-full flex-col'
       )}
     >
       <div className="relative">
@@ -80,7 +80,7 @@ export function StorefrontListingCard({
             className={cn(
               'overflow-hidden transition duration-300 group-hover:scale-[1.02]',
               radius,
-              isList ? 'aspect-square' : 'aspect-[4/3]'
+              isList ? 'aspect-square' : 'aspect-[5/4] rounded-b-none'
             )}
             imageUrl={listing.imageUrl}
             label={listing.title}
@@ -92,7 +92,7 @@ export function StorefrontListingCard({
           </span>
         ) : null}
       </div>
-      <div className="min-w-0">
+      <div className={cn('min-w-0', isList ? null : 'px-5 pt-5')}>
         <div className="flex flex-wrap items-center gap-2">
           <button
             className="min-w-0 truncate text-left font-semibold transition hover:text-[var(--storefront-accent-text,var(--primary))] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 disabled:cursor-default disabled:hover:text-foreground"
@@ -122,7 +122,12 @@ export function StorefrontListingCard({
         ) : null}
       </div>
 
-      <div className="mt-auto flex flex-wrap items-center justify-between gap-3">
+      <div
+        className={cn(
+          'mt-auto flex flex-wrap items-center justify-between gap-3',
+          isList ? null : 'px-5 pt-4 pb-5'
+        )}
+      >
         <div className="min-w-0">
           {hasVariants ? (
             <p className="truncate font-semibold tabular-nums">

package/src/components/ui/storefront/merch-sections.tsx

@@ -27,21 +27,23 @@ export function StorefrontMerchSections({
   if (visibleSections.length === 0) return null;
 
   return (
-    <div className="mt-4 grid gap-3">
+    <div className="mt-6 grid gap-4">
       {visibleSections.map((section) => {
         const sectionHref = getSafeStorefrontHttpUrl(section.href);
 
         return (
           <section
             className={cn(
-              'grid overflow-hidden border border-border bg-card md:grid-cols-[minmax(0,1fr)_280px]',
+              'grid overflow-hidden border border-border bg-card md:grid-cols-[minmax(0,1fr)_minmax(16rem,0.7fr)]',
               radius
             )}
             key={section.id}
           >
-            <div className="flex min-w-0 flex-col justify-center gap-2 p-4">
+            <div className="flex min-w-0 flex-col justify-center gap-3 p-6 sm:p-8">
               {section.title ? (
-                <h2 className="font-semibold text-lg">{section.title}</h2>
+                <h2 className="text-balance font-semibold text-2xl tracking-tight">
+                  {section.title}
+                </h2>
               ) : null}
               {section.description ? (
                 <p className="text-muted-foreground text-sm leading-6">
@@ -50,7 +52,7 @@ export function StorefrontMerchSections({
               ) : null}
               {sectionHref ? (
                 <a
-                  className="mt-1 w-fit font-medium text-sm underline-offset-4 hover:underline"
+                  className="mt-2 w-fit border-border border-b pb-1 font-medium text-sm transition hover:border-foreground"
                   href={sectionHref}
                 >
                   {sectionHref.replace(/^https?:\/\//u, '')}

package/src/components/ui/storefront/product-detail.tsx

@@ -1,8 +1,17 @@
 'use client';
 
-import { ArrowRight, Minus, Plus, ShoppingCart, Zap } from '@tuturuuu/icons';
+import {
+  ArrowRight,
+  Minus,
+  MonitorSmartphone,
+  Plus,
+  ShieldCheck,
+  ShoppingCart,
+  Zap,
+} from '@tuturuuu/icons';
 import type {
   InventoryListingVariant,
+  InventoryStorefront,
   InventoryStorefrontListing,
 } from '@tuturuuu/internal-api/inventory';
 import { cn } from '@tuturuuu/utils/format';
@@ -30,6 +39,7 @@ import {
 export function StorefrontProductDetail({
   cartHref,
   cartLines,
+  checkoutMode,
   currency,
   isSubmitting = false,
   labels,
@@ -39,11 +49,13 @@ export function StorefrontProductDetail({
   onIncrement,
   quantity,
   radius,
+  presentation = 'page',
   showInventoryBadges,
   surfaceClassName,
 }: {
   cartHref?: string;
   cartLines?: StorefrontCartLine[];
+  checkoutMode?: InventoryStorefront['checkoutMode'];
   currency: string;
   isSubmitting?: boolean;
   labels: StorefrontSurfaceLabels;
@@ -57,6 +69,7 @@ export function StorefrontProductDetail({
   ) => void;
   quantity: number;
   radius: string;
+  presentation?: 'dialog' | 'page';
   showInventoryBadges: boolean;
   surfaceClassName: string;
 }) {
@@ -114,19 +127,45 @@ export function StorefrontProductDetail({
     compareAtPrice && compareAtPrice > displayPrice
       ? Math.round((1 - displayPrice / compareAtPrice) * 100)
       : 0;
+  const isDialog = presentation === 'dialog';
+  const isSquareTerminal = checkoutMode === 'square_terminal';
+  const isPolar = checkoutMode === 'polar';
 
   return (
-    <div className="grid gap-6 lg:grid-cols-2">
-      <div className={cn('overflow-hidden', surfaceClassName, radius)}>
+    <div
+      className={cn(
+        'grid min-w-0',
+        isDialog
+          ? 'lg:grid-cols-[minmax(0,1.08fr)_minmax(22rem,0.92fr)]'
+          : 'gap-6 lg:grid-cols-2'
+      )}
+    >
+      <div
+        className={cn(
+          'overflow-hidden',
+          surfaceClassName,
+          isDialog ? 'border-border border-b lg:border-r lg:border-b-0' : radius
+        )}
+      >
         <StorefrontImagePanel
-          className="aspect-square"
+          className={cn(
+            isDialog
+              ? 'aspect-[4/3] min-h-72 lg:aspect-auto lg:h-full lg:min-h-[36rem]'
+              : 'aspect-square'
+          )}
           imageUrl={imageUrl}
           label={listing.title}
           priority
         />
       </div>
 
-      <div className="flex flex-col gap-5">
+      <div
+        className={cn(
+          'flex min-w-0 flex-col gap-5',
+          isDialog &&
+            'p-5 sm:p-7 lg:max-h-[min(44rem,90dvh)] lg:overflow-y-auto lg:p-9'
+        )}
+      >
         <div className="flex flex-wrap items-center gap-2">
           <Badge className="border-border bg-background" variant="outline">
             {listing.listingType === 'bundle' ? labels.bundle : labels.product}
@@ -141,7 +180,7 @@ export function StorefrontProductDetail({
           ) : null}
         </div>
 
-        <h2 className="text-balance font-semibold text-3xl tracking-tight md:text-4xl">
+        <h2 className="text-balance break-words font-semibold text-2xl tracking-tight sm:text-3xl lg:text-4xl">
           {listing.title}
         </h2>
 
@@ -218,6 +257,40 @@ export function StorefrontProductDetail({
           {listing.description ?? labels.fallbackDescription}
         </p>
 
+        {isSquareTerminal || isPolar ? (
+          <div
+            className={cn(
+              'flex items-start gap-3 border border-border bg-muted/25 p-3.5',
+              radius
+            )}
+          >
+            <span
+              className={cn(
+                'grid size-9 shrink-0 place-items-center border border-border bg-background',
+                radius
+              )}
+            >
+              {isSquareTerminal ? (
+                <MonitorSmartphone className="size-4" />
+              ) : (
+                <ShieldCheck className="size-4" />
+              )}
+            </span>
+            <div className="min-w-0">
+              <p className="font-medium text-sm">
+                {isSquareTerminal
+                  ? labels.squareTerminal
+                  : labels.onlineCheckout}
+              </p>
+              <p className="mt-0.5 text-muted-foreground text-xs leading-5">
+                {isSquareTerminal
+                  ? labels.squareTerminalDescription
+                  : labels.onlineCheckoutDescription}
+              </p>
+            </div>
+          </div>
+        ) : null}
+
         <div className="mt-auto flex flex-wrap items-center gap-3 border-border border-t pt-5">
           {canChange ? (
             needsSelection ? (

package/src/components/ui/storefront/product-dialog.tsx

@@ -13,6 +13,7 @@ import type { StorefrontCartLine, StorefrontSurfaceLabels } from './types';
 export function StorefrontProductDialog({
   cartHref,
   cartLines,
+  checkoutMode,
   currency,
   isSubmitting,
   labels,
@@ -27,6 +28,7 @@ export function StorefrontProductDialog({
 }: {
   cartHref?: string;
   cartLines?: StorefrontCartLine[];
+  checkoutMode?: Parameters<typeof StorefrontProductDetail>[0]['checkoutMode'];
   currency: string;
   isSubmitting?: boolean;
   labels: StorefrontSurfaceLabels;
@@ -45,13 +47,14 @@ export function StorefrontProductDialog({
 }) {
   return (
     <Dialog onOpenChange={onOpenChange} open={Boolean(listing)}>
-      <DialogContent className="max-h-[90vh] w-[calc(100%-1.5rem)] max-w-5xl overflow-y-auto sm:w-[calc(100%-2rem)]">
+      <DialogContent className="max-h-[92dvh] w-[calc(100%-1rem)] max-w-none overflow-hidden border-border p-0 shadow-2xl sm:w-[calc(100%-2rem)] sm:max-w-6xl">
         {listing ? (
           <>
             <DialogTitle className="sr-only">{listing.title}</DialogTitle>
             <StorefrontProductDetail
               cartHref={cartHref}
               cartLines={cartLines}
+              checkoutMode={checkoutMode}
               currency={currency}
               isSubmitting={isSubmitting}
               labels={labels}
@@ -61,6 +64,7 @@ export function StorefrontProductDialog({
               onIncrement={onIncrement}
               quantity={0}
               radius={radius}
+              presentation="dialog"
               showInventoryBadges={showInventoryBadges}
               surfaceClassName={surfaceClassName}
             />

package/src/components/ui/storefront/storefront-surface.test.tsx

@@ -213,6 +213,78 @@ describe('StorefrontSurface', () => {
     expect(screen.getAllByText('1M')).toHaveLength(1);
   });
 
+  it('filters and searches the buyer catalog without losing the store context', () => {
+    render(
+      <StorefrontSurface
+        bundles={[categoryBundle]}
+        listings={[listing, bundleListing]}
+        mode="store"
+        storefront={storefront}
+      />
+    );
+
+    expect(screen.getByText('1:1 Mentoring')).toBeInTheDocument();
+    expect(screen.getByText('Buy 2 Get 1 Keychains')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole('tab', { name: 'Bundles' }));
+    expect(screen.queryByText('1:1 Mentoring')).not.toBeInTheDocument();
+    expect(screen.getByText('Buy 2 Get 1 Keychains')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole('tab', { name: 'All' }));
+    fireEvent.change(
+      screen.getByRole('searchbox', { name: 'Search this store' }),
+      {
+        target: { value: '1:1' },
+      }
+    );
+    expect(screen.getByText('1:1 Mentoring')).toBeInTheDocument();
+    expect(screen.queryByText('Buy 2 Get 1 Keychains')).not.toBeInTheDocument();
+  });
+
+  it('opens a wide, readable Square Terminal product dialog', () => {
+    const longListing = {
+      ...listing,
+      title: 'Shikishi Board (8.8 x 10 inches, 253 mm x 225 mm)',
+    };
+
+    render(
+      <StorefrontSurface
+        detailListingId={longListing.id}
+        labels={{
+          buyNow: 'Pay at terminal',
+          squareTerminal: 'Square Terminal',
+          squareTerminalDescription: 'Finish payment on the counter device.',
+        }}
+        listings={[longListing]}
+        mode="store"
+        onBuyNow={() => undefined}
+        onDetailListingChange={() => undefined}
+        storefront={{ ...storefront, checkoutMode: 'square_terminal' }}
+      />
+    );
+
+    expect(screen.getByRole('dialog')).toHaveClass(
+      'sm:max-w-6xl',
+      'overflow-hidden',
+      'p-0'
+    );
+    const visibleHeading = screen
+      .getAllByRole('heading', { name: longListing.title })
+      .find((heading) => !heading.classList.contains('sr-only'));
+    expect(visibleHeading).toHaveClass(
+      'break-words',
+      'text-2xl',
+      'sm:text-3xl'
+    );
+    expect(screen.getByText('Square Terminal')).toBeInTheDocument();
+    expect(
+      screen.getByText('Finish payment on the counter device.')
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: 'Pay at terminal' })
+    ).toBeEnabled();
+  });
+
   it('keeps the compatibility cart page as a full cart review', () => {
     render(
       <StorefrontSurface

package/src/components/ui/storefront/storefront-surface.tsx

@@ -15,6 +15,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from '../dialog';
+import { StorefrontBrowsePanel } from './browse-panel';
 import { StorefrontBundleSelectionDialog } from './bundle-selection-dialog';
 import { StorefrontCartPopover } from './cart-popover';
 import { StorefrontCartSummary } from './cart-summary';
@@ -173,7 +174,6 @@ export function StorefrontSurface({
   const isCheckoutDialogOpen = checkoutOpen ?? isCheckout;
   const isPreview = mode === 'preview';
   const isCartPage = mode === 'cart';
-  const listingRows = visibleListings;
   const bundleSelectionListing = bundleSelectionListingId
     ? listings.find((listing) => listing.id === bundleSelectionListingId)
     : null;
@@ -256,27 +256,36 @@ export function StorefrontSurface({
         </div>
       ) : null}
 
-      <header className="sticky top-0 z-30 border-border border-b bg-background/80 backdrop-blur-md supports-[backdrop-filter]:bg-background/65">
-        <div className="mx-auto flex max-w-7xl flex-wrap items-center justify-between gap-3 px-4 py-3">
+      <header className="sticky top-0 z-30 border-border border-b bg-background/95 backdrop-blur-md supports-[backdrop-filter]:bg-background/85">
+        <div className="mx-auto flex max-w-7xl items-center justify-between gap-4 px-5 py-3 sm:px-6">
           <div className="min-w-0">
-            <h1 className="truncate font-semibold text-xl">
+            <h1 className="truncate font-semibold text-base tracking-tight">
               {storefrontHref ? (
                 <a
-                  className="block truncate rounded-sm transition hover:text-[var(--storefront-accent-text,var(--primary))] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40"
+                  className="flex min-w-0 items-center gap-3 rounded-sm transition hover:text-[var(--storefront-accent-text,var(--primary))] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40"
                   href={storefrontHref}
                   title={storefront.name}
                 >
-                  {storefront.name}
+                  <span
+                    aria-hidden
+                    className="grid size-8 shrink-0 place-items-center rounded-lg border border-border bg-muted/35 font-mono text-xs uppercase"
+                  >
+                    {storefront.name.slice(0, 1)}
+                  </span>
+                  <span className="truncate">{storefront.name}</span>
                 </a>
               ) : (
-                storefront.name
+                <span className="flex min-w-0 items-center gap-3">
+                  <span
+                    aria-hidden
+                    className="grid size-8 shrink-0 place-items-center rounded-lg border border-border bg-muted/35 font-mono text-xs uppercase"
+                  >
+                    {storefront.name.slice(0, 1)}
+                  </span>
+                  <span className="truncate">{storefront.name}</span>
+                </span>
               )}
             </h1>
-            {storefront.description ? (
-              <p className="mt-0.5 line-clamp-1 text-muted-foreground text-sm">
-                {storefront.description}
-              </p>
-            ) : null}
           </div>
           <div className="flex items-center gap-2">
             {headerActions}
@@ -295,7 +304,7 @@ export function StorefrontSurface({
 
       <section
         className={cn(
-          'mx-auto max-w-7xl px-4 py-5',
+          'mx-auto max-w-7xl px-5 py-8 sm:px-6 sm:py-10',
           compactLayout ? 'max-w-5xl' : null
         )}
       >
@@ -317,6 +326,7 @@ export function StorefrontSurface({
                 <StorefrontProductDetail
                   cartHref={cartHref}
                   cartLines={cartLines}
+                  checkoutMode={storefront.checkoutMode}
                   currency={currency}
                   isSubmitting={isSubmitting}
                   labels={labels}
@@ -351,61 +361,54 @@ export function StorefrontSurface({
                   sections={storefront.sections ?? []}
                 />
 
-                <div
-                  className={cn(
-                    'mt-4 grid gap-4',
-                    compactLayout
-                      ? 'sm:grid-cols-2'
-                      : 'sm:grid-cols-2 xl:grid-cols-3'
-                  )}
-                >
-                  {listingRows.length === 0 ? (
+                <StorefrontBrowsePanel
+                  compactLayout={compactLayout}
+                  emptyListings={
                     <StorefrontEmptyListings
                       action={emptyAction}
                       labels={labels}
                       radius={radius}
                     />
-                  ) : (
-                    listingRows.map((listing) => {
-                      const listingBundle = listing.bundleId
-                        ? bundles.find(
-                            (bundle) => bundle.id === listing.bundleId
-                          )
-                        : undefined;
-                      const quantity = cartLines
-                        .filter((item) => item.listingId === listing.id)
-                        .reduce((sum, item) => sum + item.quantity, 0);
+                  }
+                  labels={labels}
+                  listings={visibleListings}
+                  renderListing={(listing) => {
+                    const listingBundle = listing.bundleId
+                      ? bundles.find((bundle) => bundle.id === listing.bundleId)
+                      : undefined;
+                    const quantity = cartLines
+                      .filter((item) => item.listingId === listing.id)
+                      .reduce((sum, item) => sum + item.quantity, 0);
 
-                      return (
-                        <StorefrontListingCard
-                          currency={currency}
-                          isList={false}
-                          key={listing.id}
-                          labels={labels}
-                          listing={listing}
-                          onDecrement={onDecrement}
-                          onConfigureBundle={
-                            listingBundle?.categoryComponents.length
-                              ? () => setBundleSelectionListingId(listing.id)
-                              : undefined
-                          }
-                          onIncrement={onIncrement}
-                          onOpenDetail={
-                            onDetailListingChange
-                              ? (id) => onDetailListingChange(id)
-                              : undefined
-                          }
-                          quantity={quantity}
-                          radius={radius}
-                          showInventoryBadges={storefront.showInventoryBadges}
-                          surfaceClassName={
-                            storefrontSurfaceClasses[storefront.surfaceStyle]
-                          }
-                        />
-                      );
-                    })
-                  )}
-                </div>
+                    return (
+                      <StorefrontListingCard
+                        currency={currency}
+                        isList={false}
+                        key={listing.id}
+                        labels={labels}
+                        listing={listing}
+                        onDecrement={onDecrement}
+                        onConfigureBundle={
+                          listingBundle?.categoryComponents.length
+                            ? () => setBundleSelectionListingId(listing.id)
+                            : undefined
+                        }
+                        onIncrement={onIncrement}
+                        onOpenDetail={
+                          onDetailListingChange
+                            ? (id) => onDetailListingChange(id)
+                            : undefined
+                        }
+                        quantity={quantity}
+                        radius={radius}
+                        showInventoryBadges={storefront.showInventoryBadges}
+                        surfaceClassName={
+                          storefrontSurfaceClasses[storefront.surfaceStyle]
+                        }
+                      />
+                    );
+                  }}
+                />
               </>
             )}
           </div>
@@ -415,6 +418,7 @@ export function StorefrontSurface({
       <StorefrontProductDialog
         cartHref={cartHref}
         cartLines={cartLines}
+        checkoutMode={storefront.checkoutMode}
         currency={currency}
         isSubmitting={isSubmitting}
         labels={labels}
@@ -453,7 +457,7 @@ export function StorefrontSurface({
         onOpenChange={(open) => onCheckoutOpenChange?.(open)}
         open={isCheckoutDialogOpen}
       >
-        <DialogContent className="grid max-h-[92dvh] max-w-[min(42rem,calc(100vw-1rem))] grid-rows-[auto_minmax(0,1fr)] gap-0 overflow-hidden border-border/60 p-0 shadow-2xl sm:rounded-2xl">
+        <DialogContent className="grid max-h-[92dvh] max-w-[min(42rem,calc(100vw-1rem))] grid-rows-[auto_minmax(0,1fr)] gap-0 overflow-hidden border-border p-0 shadow-sm sm:rounded-xl">
           <DialogHeader className="px-5 pt-5 pb-2 text-left sm:px-6">
             <DialogTitle>{labels.checkout}</DialogTitle>
             <DialogDescription>{labels.reservedCopy}</DialogDescription>