@ticketboothapp/booking 1.2.32 → 1.2.34

package/package.json

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

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

@@ -93,6 +93,13 @@
   position: relative;
 }
 
+/* Admin capacity mode: let the calendar frame be wider so 7 days fit without horizontal scrolling. */
+@media (min-width: 640px) {
+  .calendar.calendarAdminMode {
+    max-width: 56rem;
+  }
+}
+
 
 .calendarHeader {
   display: flex;
@@ -337,19 +344,6 @@
   padding-bottom: 0; /* No bottom padding - eliminates gap below calendar cells */
 }
 
-/* Admin capacity view: enforce a wider minimum per day; scroll horizontally if the container is narrow */
-@media (min-width: 640px) {
-  .calendarGridInnerAdminWide {
-    overflow-x: auto;
-    -webkit-overflow-scrolling: touch;
-  }
-
-  .calendarHeaderRowAdminWide,
-  .calendarDaysGridAdminWide {
-    grid-template-columns: repeat(7, minmax(6.75rem, 1fr));
-  }
-}
-
 .calendarHeaderRow {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
@@ -376,6 +370,19 @@
   grid-template-columns: repeat(7, 1fr);
 }
 
+/* Admin capacity: wider min column width — must come after base .calendarHeaderRow / .calendarDaysGrid
+   or those rules override equal-specificity .calendar*AdminWide (cascade bug). */
+@media (min-width: 640px) {
+  .calendarGridInnerAdminWide {
+    overflow-x: visible;
+  }
+
+  .calendarHeaderRow.calendarHeaderRowAdminWide,
+  .calendarDaysGrid.calendarDaysGridAdminWide {
+    grid-template-columns: repeat(7, minmax(6.1rem, 1fr));
+  }
+}
+
 /* Desktop: don't stretch every cell to the tallest day in the row (was huge empty space). */
 @media (min-width: 640px) {
   .calendarDaysGrid {
@@ -408,10 +415,10 @@
 /* Admin (showCapacity): extra line under each time pill — taller cells on sm+ only */
 @media (min-width: 640px) {
   .calendar .calendarDayCell.calendarDayCellWithAdminCapacity {
-    min-height: 6.5rem;
+    min-height: 6.9rem;
   }
   .calendar .calendarDayCell.calendarDayCellWithAdminCapacity.calendarDayCellWithAdminCapacityTall {
-    min-height: 7.5rem;
+    min-height: 8rem;
   }
 }
 

package/src/components/booking/Calendar.tsx

@@ -892,7 +892,12 @@ export function Calendar({
   };
 
   return (
-    <div className={styles.calendar}>
+    <div
+      className={cn(
+        styles.calendar,
+        wideAdminCalendarColumns && styles.calendarAdminMode,
+      )}
+    >
       {/* Calendar Header with Navigation */}
       <div className={styles.calendarHeader}>
         <button