From a31dda4e9ed60b81f6b1d2e4627c6100478d8a19 Mon Sep 17 00:00:00 2001 From: Josh Wright Date: Sun, 5 Apr 2026 09:20:36 -0400 Subject: [PATCH] fix: uniform cell heights in park month calendar MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Root cause: each week row was its own CSS Grid container, so rows with open-day pills (hours + separate timezone line) grew taller than closed rows, making the calendar column lines look staggered/slanted. - Flatten all day cells into a single grid with gridAutoRows: 76 so every row is exactly the same fixed height - All cells get overflow: hidden so content can never push height - Compact the status pill to a single line (hours + tz inline, truncated with ellipsis) — the stacked two-line pill was the primary height expander on narrow mobile columns - Row/column border logic moves from week-wrapper divs to individual cell borderRight / borderBottom properties - Nav link touch targets: padding 6×14 → 10×16, minWidth: 44px Co-Authored-By: Claude Sonnet 4.6 --- components/ParkMonthCalendar.tsx | 198 ++++++++++++++++--------------- 1 file changed, 102 insertions(+), 96 deletions(-) diff --git a/components/ParkMonthCalendar.tsx b/components/ParkMonthCalendar.tsx index 6478491..537bf63 100644 --- a/components/ParkMonthCalendar.tsx +++ b/components/ParkMonthCalendar.tsx @@ -118,103 +118,108 @@ export function ParkMonthCalendar({ parkId, year, month, monthData, today, timez ))} - {/* Weeks */} - {weeks.map((week, wi) => ( -
- {week.map((cell, ci) => { - if (!cell.day || !cell.iso) { - return ( -
- ); - } - - const dayData = monthData[cell.iso]; - const isToday = cell.iso === today; - const isWeekend = ci === 0 || ci === 6; - const isOpen = dayData?.isOpen && dayData?.hoursLabel; - const isPH = dayData?.specialType === "passholder_preview"; - - const bg = isToday - ? "var(--color-today-bg)" - : isWeekend - ? "var(--color-weekend-header)" - : "transparent"; + {/* + All day cells in ONE flat grid so every row shares the same + fixed height — no per-week wrapper divs that could produce + rows of different heights on mobile. + */} +
+ {cells.map((cell, idx) => { + const ci = idx % 7; + const isLastRow = idx >= cells.length - 7; + const borderBottom = !isLastRow ? "1px solid var(--color-border-subtle)" : "none"; + const borderRight = ci < 6 ? "1px solid var(--color-border-subtle)" : "none"; + if (!cell.day || !cell.iso) { return ( -
- {/* Date number */} - - {cell.day} - - - {/* Status */} - {!dayData ? ( - — - ) : isPH && isOpen ? ( -
-
- Passholder -
-
- {dayData.hoursLabel} -
-
- {tzAbbr} -
-
- ) : isOpen ? ( -
-
- {dayData.hoursLabel} -
-
- {tzAbbr} -
-
- ) : ( - · - )} -
+
); - })} -
- ))} + } + + const dayData = monthData[cell.iso]; + const isToday = cell.iso === today; + const isWeekend = ci === 0 || ci === 6; + const isOpen = dayData?.isOpen && dayData?.hoursLabel; + const isPH = dayData?.specialType === "passholder_preview"; + + const bg = isToday + ? "var(--color-today-bg)" + : isWeekend + ? "var(--color-weekend-header)" + : "transparent"; + + return ( +
+ {/* Date number */} + + {cell.day} + + + {/* Status — single-line pill so all cells stay uniform height */} + {!dayData ? ( + — + ) : isPH && isOpen ? ( +
+
+ Passholder +
+
+ {dayData.hoursLabel} {tzAbbr} +
+
+ ) : isOpen ? ( +
+
+ {dayData.hoursLabel} {tzAbbr} +
+
+ ) : ( + · + )} +
+ ); + })} +
); @@ -224,12 +229,13 @@ const navLinkStyle: React.CSSProperties = { display: "inline-flex", alignItems: "center", justifyContent: "center", - padding: "6px 14px", - borderRadius: 6, + padding: "10px 16px", + borderRadius: 8, border: "1px solid var(--color-border)", background: "var(--color-surface)", color: "var(--color-text-muted)", fontSize: "1rem", lineHeight: 1, textDecoration: "none", + minWidth: 44, };