@ticketboothapp/booking 1.2.31 → 1.2.32

package/package.json

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

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

@@ -337,6 +337,19 @@
   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);

package/src/components/booking/Calendar.tsx

@@ -867,6 +867,9 @@ export function Calendar({
     };
   }, [calendarDays, timezone, dateFnsLocale]);
 
+  /** Desktop: wider min column width when showing per-slot capacity (provider dashboard admin). */
+  const wideAdminCalendarColumns = showCapacity && displayMode === 'times';
+
   // Navigation handlers - add/subtract weeks in company timezone
   const handlePrevious = () => {
     const prevSunday = addDays(currentStartDate, -WEEKS_TO_SHOW * 7);
@@ -1079,9 +1082,20 @@ export function Calendar({
 
       {/* Calendar Grid */}
       <div className={styles.calendarGrid}>
-        <div className={styles.calendarGridInner}>
+        <div
+          className={cn(
+            styles.calendarGridInner,
+            wideAdminCalendarColumns && styles.calendarGridInnerAdminWide,
+          )}
+        >
           {/* Day Headers */}
-          <div className={cn(styles.calendarHeaderRow, 'calendar-header-grid')}>
+          <div
+            className={cn(
+              styles.calendarHeaderRow,
+              wideAdminCalendarColumns && styles.calendarHeaderRowAdminWide,
+              'calendar-header-grid',
+            )}
+          >
             {DAYS_OF_WEEK_KEYS.map((dayKey) => (
               <div
                 key={dayKey}
@@ -1093,7 +1107,13 @@ export function Calendar({
           </div>
 
           {/* Calendar Days Grid - row height = tallest cell in row; all cells stretch to that height */}
-          <div className={cn(styles.calendarDaysGrid, 'calendar-days-grid')}>
+          <div
+            className={cn(
+              styles.calendarDaysGrid,
+              wideAdminCalendarColumns && styles.calendarDaysGridAdminWide,
+              'calendar-days-grid',
+            )}
+          >
           {calendarDays.map((date) => {
             const dateStr = formatInTimeZone(date, timezone, 'yyyy-MM-dd');
             const availability = dateAvailabilityMap[dateStr] || null;