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, };