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.
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user