starred/webmail
1
0
Fork 0
mirror of https://github.com/bulwarkmail/webmail.git synced 2026-11-04 00:14:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: show at least three entries per day in the month view on short screens

Browse Source
This commit is contained in:
Linus Rath
2026-10-28 05:27:53 +01:00
parent 11299fe141
commit f4dcaae76f
2 changed files with 11 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/calendar/__tests__/calendar-month-view-tasks.test.tsx
+8 -6
View File
@@ -108,17 +108,19 @@ describe('CalendarMonthView tasks', () => {
const onOpenDay = vi.fn();
renderView({
events: [makeAllDayEvent('e1', '2026-09-10')],
tasks: ['a', 'b', 'c'].map((id) => makeTask(id, '2026-09-10')),
tasks: ['a', 'b', 'c', 'd'].map((id) => makeTask(id, '2026-09-10')),
onOpenDay,
});
const row = document.querySelector<HTMLElement>('[data-week="2026-09-07"]');
// jsdom measures no viewport, so rows keep the 100px minimum: room for
// two 22px rows under the 30 + 4 offset, the second taken by the link.
expect(row?.style.minHeight).toBe('100px');
// jsdom measures no viewport, so rows keep the 130px minimum: room for
// four 22px rows under the 30 + 4 offset, the last taken by the link -
// three entries, not one, on a short desktop window.
expect(row?.style.minHeight).toBe('130px');
expect(screen.getByText('Event e1')).toBeInTheDocument();
expect(document.querySelector('[data-calendar-task="a"]')).toBeNull();
expect(document.querySelector('[data-calendar-task="b"]')).not.toBeNull();
expect(document.querySelector('[data-calendar-task="c"]')).toBeNull();
const more = screen.getByRole('button', { name: 'events.more' });
expect(more.parentElement?.style.top).toBe('22px');
expect(more.parentElement?.style.top).toBe('66px');
fireEvent.click(more);
expect(onOpenDay).toHaveBeenCalledWith(new Date(2026, 8, 10));
});
components/calendar/calendar-month-view.tsx
+3 -1
View File
@@ -102,7 +102,9 @@ export function CalendarMonthView({
const overlayTop = isMobile ? 34 : 30;
const rowHeight = isMobile ? 18 : 22;
const chipHeight = rowHeight - 2;
const baseRowMinHeight = isMobile ? 52 : 100;
// A wide-screen week row fits at least three entries and the "N more"
// link, so a short window (1280x720) does not cut every day to one.
const baseRowMinHeight = isMobile ? 52 : overlayTop + 4 + 8 + 4 * rowHeight;
const {
dayHeaderKeys,
getMonthGridDays,