From f67d9750587281cd838334a72b1778fa2108613c Mon Sep 17 00:00:00 2001 From: cproudlock Date: Sat, 8 Aug 2026 14:52:19 -0400 Subject: [PATCH] Stop the calendar growing a scrollbar on a short window 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. --- .../frontend/views/CalendarView.vue | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/plugins/notifications/frontend/views/CalendarView.vue b/plugins/notifications/frontend/views/CalendarView.vue index d7badbb..f6cc351 100644 --- a/plugins/notifications/frontend/views/CalendarView.vue +++ b/plugins/notifications/frontend/views/CalendarView.vue @@ -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;