@ticketboothapp/booking 1.2.188 → 1.2.190

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ticketboothapp/booking",
-  "version": "1.2.188",
+  "version": "1.2.190",
   "private": false,
   "sideEffects": [
     "**/*.css",

package/src/components/booking/AddOnsSection.module.css

@@ -39,3 +39,127 @@
   line-height: 1.5;
   color: var(--booking-stone-500, #78716c);
 }
+
+.optionRow {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto auto;
+  grid-template-rows: auto auto;
+  align-items: center;
+  gap: 0.25rem 0.75rem;
+  padding: 0.75rem;
+  background: var(--booking-stone-50, #fafaf9);
+  border-radius: 0.5rem;
+}
+
+.optionLabel {
+  grid-column: 1;
+  grid-row: 1;
+  min-width: 0;
+  font-size: 0.875rem;
+  color: var(--booking-stone-800, #292524);
+}
+
+.optionPrice {
+  grid-column: 2;
+  grid-row: 1 / 3;
+  align-self: center;
+  flex-shrink: 0;
+  font-size: 0.875rem;
+  color: var(--booking-stone-500, #78716c);
+  white-space: nowrap;
+}
+
+.optionControls {
+  grid-column: 3;
+  grid-row: 1 / 3;
+  align-self: center;
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.optionDescription {
+  grid-column: 1;
+  grid-row: 2;
+  min-width: 0;
+  font-size: 0.75rem;
+  font-weight: 400;
+  line-height: 1.375;
+  color: var(--booking-stone-500, #78716c);
+}
+
+.choiceRow {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-rows: auto auto;
+  align-items: center;
+  gap: 0.25rem 0.75rem;
+  width: 100%;
+  padding: 0.75rem;
+  border-width: 2px;
+  border-radius: 0.5rem;
+  text-align: left;
+  transition: border-color 0.2s, background-color 0.2s;
+}
+
+.choiceLabel {
+  grid-column: 1;
+  grid-row: 1;
+  min-width: 0;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--booking-stone-800, #292524);
+}
+
+.choicePrice {
+  grid-column: 2;
+  grid-row: 1 / 3;
+  align-self: center;
+  font-size: 0.875rem;
+  color: var(--booking-stone-500, #78716c);
+  white-space: nowrap;
+}
+
+.choiceDescription {
+  grid-column: 1;
+  grid-row: 2;
+  min-width: 0;
+  font-size: 0.75rem;
+  font-weight: 400;
+  line-height: 1.375;
+  color: var(--booking-stone-500, #78716c);
+}
+
+@media (max-width: 639px) {
+  .optionRow {
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-rows: auto auto auto;
+  }
+
+  .optionPrice {
+    grid-column: 1;
+    grid-row: 2;
+    justify-self: start;
+  }
+
+  .optionControls {
+    grid-column: 2;
+    grid-row: 1 / 3;
+  }
+
+  .optionDescription {
+    grid-column: 1 / -1;
+    grid-row: 3;
+    margin-top: 0.125rem;
+  }
+
+  .choiceDescription {
+    grid-column: 1 / -1;
+    margin-top: 0.125rem;
+  }
+
+  .choicePrice {
+    grid-row: 1;
+  }
+}

package/src/components/booking/AddOnsSection.tsx

@@ -159,19 +159,12 @@ export function AddOnsSection({
                     const canDecrement = qty > 0 && currentTotalForAddOn > minTotalForAddOn;
                     const price = (addOn.price ?? 0) + (variant.priceAdjustment ?? 0);
                     return (
-                      <div key={variant.id} className="flex flex-wrap items-center gap-3 p-3 bg-stone-50 rounded-lg">
-                        <span className="min-w-0 flex-1">
-                          <span className="block text-sm text-stone-800">{variant.label}</span>
-                          {variant.description?.trim() ? (
-                            <span className="mt-0.5 block text-xs leading-snug text-stone-500">
-                              {variant.description.trim()}
-                            </span>
-                          ) : null}
-                        </span>
-                        <span className="text-sm text-stone-500 shrink-0">
+                      <div key={variant.id} className={styles.optionRow}>
+                        <span className={styles.optionLabel}>{variant.label}</span>
+                        <span className={styles.optionPrice}>
                           {suppressPrices ? '—' : `${formatCurrencyAmount(price, currency, locale as 'en' | 'fr')} ea`}
                         </span>
-                        <div className="flex items-center gap-2 shrink-0">
+                        <div className={styles.optionControls}>
                           <button
                             type="button"
                             onClick={() => {
@@ -220,6 +213,11 @@ export function AddOnsSection({
                             +
                           </button>
                         </div>
+                        {variant.description?.trim() ? (
+                          <span className={styles.optionDescription}>
+                            {variant.description.trim()}
+                          </span>
+                        ) : null}
                       </div>
                     );
                   })}
@@ -261,23 +259,21 @@ export function AddOnsSection({
                             ];
                           });
                         }}
-                        className={`flex items-center justify-between w-full p-3 rounded-lg border-2 text-left transition-colors ${
+                        className={`${styles.choiceRow} ${
                           isSelected
                             ? 'border-emerald-500 bg-emerald-50'
                             : 'border-stone-200 bg-stone-50 hover:border-stone-300'
                         }`}
                       >
-                        <span className="min-w-0 flex-1">
-                          <span className="block text-sm font-medium text-stone-800">{variant.label}</span>
-                          {variant.description?.trim() ? (
-                            <span className="mt-0.5 block text-xs font-normal leading-snug text-stone-500">
-                              {variant.description.trim()}
-                            </span>
-                          ) : null}
-                        </span>
-                        <span className="text-sm text-stone-500">
+                        <span className={styles.choiceLabel}>{variant.label}</span>
+                        <span className={styles.choicePrice}>
                           {suppressPrices ? '—' : `+${formatCurrencyAmount(price, currency, locale as 'en' | 'fr')}`}
                         </span>
+                        {variant.description?.trim() ? (
+                          <span className={styles.choiceDescription}>
+                            {variant.description.trim()}
+                          </span>
+                        ) : null}
                       </button>
                     );
                   })}

package/src/components/booking/AdminChangeBookingContent.tsx

@@ -86,6 +86,7 @@ const calendarPropKeys = [
 ] as const;
 
 const itineraryPropKeys = [
+  'productId',
   'selectedDate',
   'hideItineraryBox',
   'activeOptions',

package/src/components/booking/AdminChangeBookingFlow.tsx

@@ -1238,6 +1238,7 @@ export function AdminChangeBookingFlow({
             ? getCalendarEffectiveOutboundVacancies
             : undefined,
         hideItineraryBox, activeOptions,
+        productId: product.productId,
         destinationsCount: product.destinations?.length ?? 0, pickupLocationsCount: product.pickupLocations?.length ?? 0,
         getItineraryItems: computeItineraryDisplay,
         ...{ isItinerarySticky, isMobile, showTooltip, selectedPickupLocation, itineraryRef },

package/src/components/booking/AdminChangeReceiptComparison.tsx

@@ -378,10 +378,10 @@ export function AdminChangeReceiptComparison({
               <button
                 type="button"
                 aria-pressed={preserveExistingReceipt}
-                className={`mt-3 inline-flex w-full items-center justify-center rounded-lg border px-3 py-2 text-sm font-semibold shadow-sm transition sm:w-auto ${
+                className={`mt-1.5 inline-flex text-sm font-semibold underline decoration-1 underline-offset-4 transition ${
                   preserveExistingReceipt
-                    ? 'border-sky-700 bg-sky-700 text-white hover:bg-sky-800'
-                    : 'border-sky-300 bg-white text-sky-800 hover:border-sky-500 hover:bg-sky-50'
+                    ? 'text-emerald-800 decoration-emerald-700 hover:text-emerald-950'
+                    : 'text-emerald-700 decoration-emerald-600 hover:text-emerald-900'
                 }`}
                 onClick={() => onPreserveExistingReceiptChange(!preserveExistingReceipt)}
               >

package/src/components/booking/Calendar.module.css

@@ -71,10 +71,11 @@
   --cal-soldout-selected-border: rgba(248, 113, 113, 0.5);
 
   /* Discount badge */
-  --cal-discount-bg: #fef2f2;
-  --cal-discount-text: #b91c1c;
-  --cal-discount-tag-bg: rgba(239, 68, 68, 0.9);
-  --cal-discount-tag-text: #fff;
+  --cal-discount-bg: #fff0e8;
+  --cal-discount-text: #a93600;
+  --cal-discount-tag-bg: #fff0e8;
+  --cal-discount-tag-text: #a93600;
+  --cal-discount-tag-border: var(--accent-orange, #ff4d00);
 
   /* Today marker */
   --cal-today-ring: var(--booking-orange-600, #ff4d00);
@@ -505,6 +506,19 @@
   padding: 0.5rem 0.5rem 0.125rem;
 }
 
+/* Minimum-passenger tours need a second line below the departure time on mobile. */
+.calendarDayCell.calendarDayCellMobilePax {
+  min-height: 4.75rem;
+  padding-right: 0.125rem;
+  padding-left: 0.125rem;
+}
+
+/* Status badges need the cell width; the standard mobile gutters are sized for dot/time lists. */
+.calendarDayCell.calendarDayCellMobileStatus {
+  padding-right: 0.125rem;
+  padding-left: 0.125rem;
+}
+
 .calendarDayCell:disabled {
   cursor: not-allowed;
 }
@@ -586,19 +600,55 @@
   right: 0.25rem;
   display: flex;
   align-items: center;
-  gap: 0.125rem;
   background-color: var(--cal-discount-tag-bg);
   color: var(--cal-discount-tag-text);
+  border: 1px solid var(--cal-discount-tag-border);
+  box-shadow: 0 1px 3px rgba(255, 77, 0, 0.18);
   font-size: 9px;
-  font-weight: 700;
-  padding: 0.125rem 0.25rem;
+  font-weight: 800;
+  line-height: 1.1;
+  padding: 0.25rem 0.375rem;
   border-radius: 0.25rem;
+  white-space: nowrap;
+}
+
+.calendarDiscountOff {
+  margin-left: 0.1875rem;
 }
+
 /* Mobile: position discount below day number (top-left) so it doesn't overlap */
 .calendarDiscountTagMobile {
   top: 1rem;
   left: 0.25rem;
-  right: auto;
+  right: 0.25rem;
+  flex-direction: column;
+  justify-content: center;
+  padding: 0.25rem;
+  font-size: 9px;
+  line-height: 1;
+  text-align: center;
+  white-space: normal;
+}
+
+.calendarDiscountTagMobile .calendarDiscountOff {
+  margin-left: 0;
+}
+
+@media (min-width: 640px) {
+  .calendarDiscountTag {
+    border-width: 1.5px;
+    font-size: 10px;
+  }
+}
+
+.calendarAvailabilityIndicators {
+  min-width: 0;
+}
+
+@media (min-width: 640px) {
+  .calendarAvailabilityIndicatorsWithDiscount {
+    padding-top: 1.625rem;
+  }
 }
 
 .calendarSoldOutBadge {
@@ -613,6 +663,14 @@
   color: var(--cal-soldout-text);
   border: 1px solid var(--cal-soldout-border);
 }
+
+@media (max-width: 639px) {
+  .calendarDayCellMobile .calendarSoldOutBadge,
+  .calendarDayCellMobileTall .calendarSoldOutBadge {
+    margin-top: 1rem;
+    margin-bottom: 0.25rem;
+  }
+}
 .calendarDayCellSelected .calendarSoldOutBadge {
   background-color: var(--cal-soldout-selected-bg);
   color: var(--cal-cell-selected-text);
@@ -636,6 +694,34 @@
   color: var(--cal-cell-selected-text);
 }
 
+@media (max-width: 639px) {
+  .calendarStatusPillMobile {
+    max-width: 100%;
+    min-width: 0;
+    margin-top: 1rem;
+    margin-bottom: 0.25rem;
+    padding: 0.25rem 0.5rem;
+    border: 0;
+    background-color: var(--cal-time-available-bg);
+    color: var(--cal-time-available-text);
+    font-size: 9px;
+    font-weight: 500;
+    line-height: 1;
+    letter-spacing: 0;
+    white-space: nowrap;
+  }
+
+  .calendarStatusPillMobileWithDiscount {
+    margin-top: 2.25rem;
+  }
+
+  .calendarDayCellSelected .calendarStatusPillMobile {
+    border-color: rgba(255, 255, 255, 0.8);
+    background-color: rgba(255, 255, 255, 0.18);
+    color: var(--cal-cell-selected-text);
+  }
+}
+
 .calendarTimePillLow {
   background-color: var(--cal-time-low-bg);
   color: var(--cal-time-low-text);
@@ -703,10 +789,12 @@
   align-items: center;
   gap: 0.0625rem;
   width: 100%;
+  margin-top: 1rem;
+  margin-bottom: 0.25rem;
 }
 /* Mobile: push time slots lower when discount tag is present */
 .calendarMobileTimeListWithDiscount {
-  margin-top: 1.25rem;
+  margin-top: 2.25rem;
 }
 
 .calendarMobileTimeDot {
@@ -719,14 +807,40 @@
   line-height: 1.2;
 }
 
+.calendarMobileTimeDotWithPax {
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  row-gap: 0.125rem;
+}
+
+.calendarMobileTimeRow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25rem;
+}
+
+.calendarMobileTimeLabel {
+  min-width: 0;
+  white-space: nowrap;
+}
+
 .calendarMobilePaxProgress {
+  align-self: center;
   color: var(--booking-stone-600, #57534e);
-  font-size: 8px;
+  max-width: 100%;
+  font-size: 7px;
   font-weight: 700;
+  line-height: 1;
+  text-align: center;
   white-space: nowrap;
 }
 .calendarMobilePaxProgressReached {
   color: #047857;
+  max-width: 2.75rem;
+  line-height: 1.05;
+  white-space: normal;
 }
 .calendarMobilePaxProgressReached::before {
   content: "✓ ";

package/src/components/booking/Calendar.tsx

@@ -2,7 +2,7 @@
 
 import { useState, useMemo, useRef, useEffect, useCallback, memo } from 'react';
 import { createPortal } from 'react-dom';
-import { startOfWeek, addDays, addWeeks, subWeeks, isSameDay, parseISO, startOfMonth, endOfMonth, eachDayOfInterval, addMonths, subMonths } from 'date-fns';
+import { addDays, addWeeks, subWeeks, isSameDay, parseISO, startOfMonth, endOfMonth, addMonths, subMonths } from 'date-fns';
 import { formatInTimeZone, fromZonedTime } from 'date-fns-tz';
 import { enUS, fr } from 'date-fns/locale';
 import type { Availability } from '../../lib/booking-api';
@@ -205,6 +205,7 @@ const DateCell = memo(function DateCell({
   const { locale } = useLocale();
   const dateFnsLocale = dateFnsLocales[locale] || enUS;
   const dayNumber = formatInTimeZone(date, timezone, 'd');
+  const fullDateLabel = formatInTimeZone(date, timezone, 'EEEE, MMMM d, yyyy', { locale: dateFnsLocale });
   const allowPinnedSoldOutDate = Boolean(selectableSoldOutDate && selectableSoldOutDate === dateStr);
   const hasAvailabilityData = availability !== null;
   // When showCapacity (admin), allow selecting sold-out slots for overbooking.
@@ -233,12 +234,16 @@ const DateCell = memo(function DateCell({
   // Admin capacity line under each time pill needs extra vertical room (provider dashboard only).
   const slotCount = availability?.startTimes?.length ?? 0;
   const needsTallerCell = !isMobile && slotCount > 2;
-  const mobileNeedsTaller = isMobile && slotCount > 2;
+  const hasMobilePaxProgress =
+    isMobile && Boolean(availability?.timeBookingProgress && Object.keys(availability.timeBookingProgress).length > 0);
+  const mobileNeedsTaller = isMobile && (slotCount > 2 || hasMobilePaxProgress);
   const adminCapacityTallCells =
     Boolean(showCapacity) && !isMobile && displayMode === 'times';
   const buttonClassName = useMemo(() => cn(
     styles.calendarDayCell,
     isMobile && (mobileNeedsTaller ? styles.calendarDayCellMobileTall : styles.calendarDayCellMobile),
+    hasMobilePaxProgress && styles.calendarDayCellMobilePax,
+    isMobile && displayMode === 'status' && styles.calendarDayCellMobileStatus,
     !isMobile && (
       adminCapacityTallCells
         ? needsTallerCell
@@ -256,16 +261,17 @@ const DateCell = memo(function DateCell({
       ? styles.calendarDayCellSelected
       : styles.calendarDayCellAvailable,
     isToday && !isPast && !isSelected && styles.calendarDayCellToday
-  ), [isPast, isDisabled, isSelected, isToday, needsTallerCell, isMobile, mobileNeedsTaller, adminCapacityTallCells]);
+  ), [isPast, isDisabled, isSelected, isToday, needsTallerCell, isMobile, mobileNeedsTaller, hasMobilePaxProgress, adminCapacityTallCells, displayMode]);
 
   const ariaLabel = useMemo(() => {
-    const parts = [dayNumber];
+    const parts = [fullDateLabel];
     if (isPast) parts.push(' - Past date');
     if (availability?.isSoldOut) parts.push(' - Sold out');
+    else if (availability) parts.push(` - ${t('calendar.available')}`);
     const pct = availability?.totalDiscountPercent;
     if (pct != null && pct > 0) parts.push(` - ${pct}% off`);
     return parts.join('');
-  }, [dayNumber, isPast, availability?.isSoldOut, availability?.totalDiscountPercent]);
+  }, [fullDateLabel, isPast, availability, t]);
 
   return (
     <button
@@ -273,6 +279,7 @@ const DateCell = memo(function DateCell({
       disabled={isDisabled}
       className={buttonClassName}
       aria-label={ariaLabel}
+      aria-pressed={isSelected}
     >
       <div className={cn(styles.calendarDayCellInner, isMobile && styles.calendarDayCellInnerMobile)}>
         {/* Day Number - on mobile, in a top row with discount below to avoid overlap */}
@@ -281,12 +288,10 @@ const DateCell = memo(function DateCell({
         </div>
 
         {/* Discount Tag - top-right on desktop; below day number on mobile to avoid overlap */}
-        {availability?.totalDiscountPercent && availability.totalDiscountPercent > 0 && (
+        {availability?.totalDiscountPercent && availability.totalDiscountPercent > 0 && !availability.isSoldOut && (
           <div className={cn(styles.calendarDiscountTag, isMobile && styles.calendarDiscountTagMobile)}>
-            <svg className="w-2.5 h-2.5" fill="currentColor" viewBox="0 0 20 20">
-              <path fillRule="evenodd" d="M17.707 9.293a1 1 0 010 1.414l-7 7a1 1 0 01-1.414 0l-7-7A.997.997 0 012 10V5a3 3 0 013-3h5c.256 0 .512.098.707.293l7 7zM5 6a1 1 0 100-2 1 1 0 000 2z" clipRule="evenodd" />
-            </svg>
-            <span>-{availability.totalDiscountPercent}%</span>
+            <span>{availability.totalDiscountPercent}%</span>
+            <span className={styles.calendarDiscountOff}>OFF</span>
           </div>
         )}
 
@@ -294,7 +299,14 @@ const DateCell = memo(function DateCell({
         {availability && (
           <div
             className={cn(
-              'flex flex-col items-center space-y-0 w-full px-0.5',
+              styles.calendarAvailabilityIndicators,
+              !isMobile &&
+                availability.totalDiscountPercent != null &&
+                availability.totalDiscountPercent > 0 &&
+                !availability.isSoldOut &&
+                styles.calendarAvailabilityIndicatorsWithDiscount,
+              'flex flex-col items-center space-y-0 w-full',
+              isMobile && displayMode === 'status' ? 'px-0' : 'px-0.5',
               isMobile ? 'justify-start' : 'justify-end'
             )}
           >
@@ -307,8 +319,15 @@ const DateCell = memo(function DateCell({
               <>
                 {/* Mobile: green dot + time (compact). Desktop: full time pills */}
                 {displayMode === 'status' ? (
-                  <div className={styles.calendarTimePill}>
-                    {t('calendar.available')}
+                  <div className={cn(
+                    styles.calendarTimePill,
+                    isMobile && styles.calendarStatusPillMobile,
+                    isMobile &&
+                      availability.totalDiscountPercent != null &&
+                      availability.totalDiscountPercent > 0 &&
+                      styles.calendarStatusPillMobileWithDiscount
+                  )}>
+                    {isMobile ? t('calendar.open') : t('calendar.available')}
                   </div>
                 ) : availability.startTimes && availability.startTimes.length > 0 ? (
                   isMobile ? (
@@ -333,13 +352,18 @@ const DateCell = memo(function DateCell({
                             key={time}
                             className={cn(
                               styles.calendarMobileTimeDot,
+                              paxProgress && !isTimeSoldOut && !isLowAvailability && styles.calendarMobileTimeDotWithPax,
                               isTimeSoldOut && styles.calendarMobileTimeDotSoldOut,
                               isLowAvailability && !isTimeSoldOut && styles.calendarMobileTimeDotLow,
                               showMinimumReached && !isTimeSoldOut && styles.calendarMobileTimeDotMinimumReached
                             )}
                           >
-                            <span className={styles.calendarMobileTimeDotBullet} aria-hidden />
-                            <span>{isDailyAvailability ? t('calendar.available') : formatTime(time)}</span>
+                            <span className={styles.calendarMobileTimeRow}>
+                              <span className={styles.calendarMobileTimeDotBullet} aria-hidden />
+                              <span className={styles.calendarMobileTimeLabel}>
+                                {isDailyAvailability ? t('calendar.available') : formatTime(time)}
+                              </span>
+                            </span>
                             {paxProgress && !isTimeSoldOut && !isLowAvailability && (
                               <span
                                 className={cn(
@@ -348,7 +372,7 @@ const DateCell = memo(function DateCell({
                                 )}
                               >
                                 {showMinimumReached
-                                  ? t('calendar.minimumReached')
+                                  ? t('calendar.minimumReachedShort')
                                   : t('calendar.paxProgress', {
                                       booked: paxProgress.booked,
                                       minimum: paxProgress.minimum,
@@ -360,8 +384,10 @@ const DateCell = memo(function DateCell({
                       })}
                       {availability.startTimes.length > 3 && (
                         <div className={styles.calendarMobileTimeDot}>
-                          <span className={styles.calendarMobileTimeDotBullet} aria-hidden />
-                          <span>+{availability.startTimes.length - 3}</span>
+                          <span className={styles.calendarMobileTimeRow}>
+                            <span className={styles.calendarMobileTimeDotBullet} aria-hidden />
+                            <span>+{availability.startTimes.length - 3}</span>
+                          </span>
                         </div>
                       )}
                     </div>
@@ -696,7 +722,7 @@ export function Calendar({
     const lastAvailableDate = availableDates[availableDates.length - 1];
     const currentEndDate = addDays(currentStartDate, WEEKS_TO_SHOW * 7 - 1);
     return lastAvailableDate > currentEndDate;
-  }, [availableDates, currentStartDate]);
+  }, [availableDates, currentStartDate, WEEKS_TO_SHOW]);
 
   const lastReportedRangeRef = useRef<{ start: Date; end: Date } | null>(null);
   const debounceTimeoutRef = useRef<NodeJS.Timeout | null>(null);
@@ -758,7 +784,7 @@ export function Calendar({
       days.push(addDays(currentStartDate, i));
     }
     return days;
-  }, [currentStartDate]);
+  }, [currentStartDate, WEEKS_TO_SHOW]);
 
   // Notify parent of visible date range changes (with buffer weeks before/after)
   // When dropdown is open, expand range to include the visible month so we fetch availability for it

package/src/components/booking/CancellationPolicySelector.module.css

@@ -30,10 +30,11 @@
 
 .btn {
   width: 100%;
-  display: flex;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-rows: auto auto;
   align-items: center;
-  justify-content: space-between;
-  gap: 0.75rem;
+  column-gap: 0.75rem;
   padding: 1rem 1.25rem;
   border-radius: 0.5rem;
   border: 2px solid;
@@ -85,12 +86,20 @@
   display: flex;
   align-items: center;
   gap: 0.75rem;
+  min-width: 0;
+  grid-column: 1;
+  grid-row: 1;
 }
 
-.policyContent {
+.policyDetails {
   display: flex;
   flex-direction: column;
   gap: 0.125rem;
+  grid-column: 1;
+  grid-row: 2;
+  min-width: 0;
+  margin-top: 0.125rem;
+  margin-left: 2rem;
 }
 
 .policyLabel {
@@ -110,10 +119,30 @@
 }
 
 .fee {
+  grid-column: 2;
+  grid-row: 1 / 3;
+  align-self: center;
   font-size: 0.875rem;
   white-space: nowrap;
 }
 
+.rowSubtitle {
+  display: block;
+  margin-top: 0.25rem;
+}
+
+@media (max-width: 639px) {
+  .policyDetails {
+    grid-column: 1 / -1;
+    margin-left: 0;
+    margin-top: 0.375rem;
+  }
+
+  .fee {
+    grid-row: 1;
+  }
+}
+
 .feeFree {
   color: var(--booking-stone-500, #78716c);
 }