Stop the calendar growing a scrollbar on a short window
Some checks failed
CI / backend (push) Failing after 8s
CI / naming (push) Successful in 2s
CI / frontend (push) Successful in 9s
CI / migrations-mysql (push) Failing after 7s

The floors that keep the month grid from squashing - 620px on the calendar and
110px per day cell - add up to more than calc(100vh - 230px) yields on a 768 or
720 tall window. The floors won, the page overflowed, and a month that used to
fit needed scrolling to see.

They relax below 900px tall: 78px cells, which still show the day number and
three events, so the grid stays readable rather than collapsing to the strips
the floors were guarding against. Taller windows keep the roomy cells.

Measured at 1920x1080, 1600x900, 1366x768, 1280x720 and 1080x1920 portrait:
six rows and no page scrollbar in all five.
This commit is contained in:
cproudlock
2026-08-08 14:52:19 -04:00
parent 65f53e91cd
commit f67d975058

View File

@@ -272,6 +272,23 @@ function formatDate(dateStr) {
min-height: 620px;
}
/* Those floors are sized for a full-height display. On a shorter window they
add up to more than calc(100vh - 230px) gives - six rows at 110px plus the
toolbar overflows a 768px screen - and the page grew a scrollbar to show a
month that used to fit. Relax them there: still floored well above the thin
strips this was fixing, just not taller than the window. */
@media (max-height: 899px) {
.calendar-container {
min-height: 520px;
}
:deep(.fc) {
min-height: 500px;
}
:deep(.fc-daygrid-day-frame) {
min-height: 78px;
}
}
/* The day number was tight against the top edge once the cells grew. */
:deep(.fc-daygrid-day-top) {
padding: 2px 4px;