From 38b950b240acdc7b2f8db1a704ac4a12978c62f6 Mon Sep 17 00:00:00 2001
From: Linus Rath <139418639+rathlinus@users.noreply.github.com>
Date: Tue, 3 Nov 2026 05:19:29 +0100
Subject: [PATCH] fix: stop a sliver of next Monday showing at the edge of the
 week view

---
 .../calendar-week-view-all-day-cap.test.tsx     | 17 +++++++++++++++++
 components/calendar/calendar-week-view.tsx      |  3 ++-
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/components/calendar/__tests__/calendar-week-view-all-day-cap.test.tsx b/components/calendar/__tests__/calendar-week-view-all-day-cap.test.tsx
index 4b48bc82b..05c089dba 100644
--- a/components/calendar/__tests__/calendar-week-view-all-day-cap.test.tsx
+++ b/components/calendar/__tests__/calendar-week-view-all-day-cap.test.tsx
@@ -186,3 +186,20 @@ describe('CalendarWeekView all-day and tasks height cap', () => {
     expect(screen.getByRole('button', { name: /events.show_more|events.show_less/ })).toBeInTheDocument();
   });
 });
+
+describe('CalendarWeekView column width', () => {
+  afterEach(() => {
+    cleanup();
+    vi.restoreAllMocks();
+  });
+
+  // Rounded down, the columns left a few pixels at the edge, where next Monday showed through.
+  it('fills the pane with exactly seven columns when the width does not divide evenly', () => {
+    vi.spyOn(HTMLElement.prototype, 'clientWidth', 'get').mockReturnValue(1000);
+    renderView();
+    const columns = document.querySelector<HTMLElement>('[style*="grid-template-columns"]')!;
+    const colWidth = parseFloat(/([\d.]+)px/.exec(columns.style.gridTemplateColumns)![1]);
+    // 1000px less the 56px hour gutter
+    expect(colWidth * 7).toBeCloseTo(944, 1);
+  });
+});
diff --git a/components/calendar/calendar-week-view.tsx b/components/calendar/calendar-week-view.tsx
index 26968df9f..476f5b7a5 100644
--- a/components/calendar/calendar-week-view.tsx
+++ b/components/calendar/calendar-week-view.tsx
@@ -152,7 +152,8 @@ export function CalendarWeekView({
 
   const measureColWidth = useCallback((root: HTMLElement | null) => {
     if (isMobile || !root) return MOBILE_COL_WIDTH;
-    return Math.max(MIN_COL_WIDTH, Math.floor((root.clientWidth - gutterWidth) / columnsPerWeek));
+    // Not rounded down: the pixels left over showed a sliver of next Monday at the edge.
+    return Math.max(MIN_COL_WIDTH, (root.clientWidth - gutterWidth) / columnsPerWeek);
   }, [isMobile, gutterWidth, columnsPerWeek]);
   const [colWidth, setColWidth] = useState(MOBILE_COL_WIDTH);
   const [viewportWidth, setViewportWidth] = useState(0);