fix(web): align week header and grid columns (#1692)

* fix(web): align week headers with grid

* test(web): cover week header grid alignment

Adds a 1728x1426 regression case that asserts day headers, all-day
columns, and timed columns share the same x/right/width within 1px.
Documents the column contract and would catch a future regression
(e.g. reintroducing the CSS Grid + Flex distribution mismatch).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* fix(web): unify week grid columns

* fix(web): join week grid divider lines

* fix(web): remove week grid scrollbar gutter

* fix(web): keep week drag drafts on selected day

* fix(web): initialize current week widths

* fix(web): return current week widths directly

* fix(web): validate grid element lookup

* test(web): simplify week grid alignment coverage

* refactor(web): tighten week grid alignment code

* fix(web): keep week grid scrollbar hidden

* feat(web): add subtle week grid scroll cue

* Remove week calendar padding and horizontal scroll indicator

* Adjust week e2e tests for grid alignment

* Restore right padding for day view header

---------

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: Uarmagan

e2e/navigation/week-view-layout.spec.ts

@@ -0,0 +1,113 @@
+import { expect, type Page, test } from "@playwright/test";
+
+const layoutWidths = [900, 1728];
+const maxLayoutDelta = 1;
+const daysInWeek = 7;
+
+test.describe("Week view layout", () => {
+  for (const width of layoutWidths) {
+    test(`aligns day headers with calendar columns at ${width}px`, async ({
+      page,
+    }) => {
+      await page.setViewportSize({ width, height: 1000 });
+      await page.goto("/week");
+      await page.locator("#allDayColumns").waitFor();
+      await page.locator("#timedColumns").waitFor();
+
+      const layout = await getWeekColumnLayout(page);
+      const mainGridScrollbarWidth = await page
+        .locator("#mainGrid")
+        .evaluate(
+          (node) => getComputedStyle(node, "::-webkit-scrollbar").width,
+        );
+      const horizontalScrollState = await getHorizontalScrollState(page);
+
+      expect(layout.allDayColumns).toHaveLength(daysInWeek);
+      expect(layout.dayLabels).toHaveLength(daysInWeek);
+      expect(layout.timedColumns).toHaveLength(daysInWeek);
+      expect(mainGridScrollbarWidth).toBe("0px");
+      expect(horizontalScrollState.scrollbarHeight).toBe("0px");
+      if (width === 900) {
+        expect(horizontalScrollState.isScrollable).toBe(true);
+        await expectWeekGridCanScrollHorizontally(page);
+      } else {
+        expect(horizontalScrollState.isScrollable).toBe(false);
+      }
+
+      for (const [index, dayLabel] of layout.dayLabels.entries()) {
+        expectColumnsToAlign(dayLabel, layout.allDayColumns[index]);
+        expectColumnsToAlign(dayLabel, layout.timedColumns[index]);
+      }
+    });
+  }
+});
+
+const getWeekColumnLayout = async (page: Page) =>
+  page.evaluate((daysInView) => {
+    const roundRect = (rect: DOMRect) => ({
+      right: Math.round(rect.right * 100) / 100,
+      width: Math.round(rect.width * 100) / 100,
+      x: Math.round(rect.x * 100) / 100,
+    });
+
+    const dayLabels = [
+      ...document.querySelectorAll("#weekGridScroller [title]"),
+    ]
+      .filter((node): node is HTMLElement => node instanceof HTMLElement)
+      .slice(0, daysInView)
+      .map((node) => roundRect(node.getBoundingClientRect()));
+
+    const getColumns = (selector: string) =>
+      [...document.querySelectorAll(selector)]
+        .filter((node): node is HTMLElement => node instanceof HTMLElement)
+        .map((node) => {
+          const rect = node.getBoundingClientRect();
+
+          return {
+            ...roundRect(rect),
+            height: rect.height,
+          };
+        })
+        .filter((rect) => rect.height > 20)
+        .slice(0, daysInView);
+
+    return {
+      allDayColumns: getColumns("#allDayColumns > div"),
+      dayLabels,
+      timedColumns: getColumns("#timedColumns > div"),
+    };
+  }, daysInWeek);
+
+const getHorizontalScrollState = async (page: Page) =>
+  page.locator("#weekGridScroller").evaluate((node) => {
+    return {
+      isScrollable: node.scrollWidth > node.clientWidth,
+      scrollbarHeight: getComputedStyle(node, "::-webkit-scrollbar").height,
+    };
+  });
+
+const expectWeekGridCanScrollHorizontally = async (page: Page) => {
+  const scrollLeft = await page
+    .locator("#weekGridScroller")
+    .evaluate((node) => {
+      node.scrollLeft = node.scrollWidth;
+      return node.scrollLeft;
+    });
+
+  expect(scrollLeft).toBeGreaterThan(0);
+};
+
+const expectColumnsToAlign = (
+  dayLabel: { right: number; width: number; x: number },
+  gridColumn: { right: number; width: number; x: number },
+) => {
+  expect(Math.abs(dayLabel.x - gridColumn.x)).toBeLessThanOrEqual(
+    maxLayoutDelta,
+  );
+  expect(Math.abs(dayLabel.right - gridColumn.right)).toBeLessThanOrEqual(
+    maxLayoutDelta,
+  );
+  expect(Math.abs(dayLabel.width - gridColumn.width)).toBeLessThanOrEqual(
+    maxLayoutDelta,
+  );
+};

e2e/timed/create-event-mouse.spec.ts

@@ -1,6 +1,7 @@
-import { test } from "@playwright/test";
+import { expect, test } from "@playwright/test";
 import {
   createEventTitle,
+  ensureSidebarOpen,
   expectTimedEventVisible,
   fillTitleAndSaveEventForm,
   openTimedEventFormWithMouse,
@@ -23,3 +24,46 @@ test("should create a timed event using mouse interaction", async ({
 
   await expectTimedEventVisible(page, title);
 });
+
+test("starts the timed draft in the day column under the pointer after horizontal scroll", async ({
+  page,
+}) => {
+  await page.setViewportSize({ width: 900, height: 1000 });
+  await prepareCalendarPage(page);
+  await ensureSidebarOpen(page);
+  await page.locator("#weekGridScroller").evaluate((node) => {
+    node.scrollLeft = node.scrollWidth;
+  });
+
+  const targetDayLabel = page.locator("#weekGridScroller [title]").nth(6);
+  const mainGrid = page.locator("#mainGrid");
+  const targetBox = await targetDayLabel.boundingBox();
+  const gridBox = await mainGrid.boundingBox();
+
+  if (!targetBox || !gridBox) {
+    throw new Error("Expected the week grid and Friday label to be visible.");
+  }
+
+  const x = targetBox.x + targetBox.width / 2;
+  const y = gridBox.y + gridBox.height * 0.4;
+
+  await page.mouse.move(x, y);
+  await page.mouse.down();
+  await page.mouse.move(x, y + 80);
+
+  const draftEvent = page.locator(
+    '#timedEvents > [role="button"]:not([data-event-id])',
+  );
+  await expect(draftEvent).toBeVisible();
+
+  const draftBox = await draftEvent.boundingBox();
+  if (!draftBox) {
+    throw new Error("Expected the timed draft to be visible.");
+  }
+
+  const draftCenterX = draftBox.x + draftBox.width / 2;
+  expect(draftCenterX).toBeGreaterThanOrEqual(targetBox.x);
+  expect(draftCenterX).toBeLessThanOrEqual(targetBox.x + targetBox.width);
+
+  await page.mouse.up();
+});

packages/web/src/__tests__/utils/state/draft.test.util.ts

@@ -13,7 +13,6 @@ import { useToday } from "@web/views/Calendar/hooks/useToday";
 import { useWeek } from "@web/views/Calendar/hooks/useWeek";
 
 export function setupDraftState(event: Schema_WebEvent) {
-  const isSidebarOpen = true;
   const draft = assembleGridEvent(event);
 
   const state = {
@@ -32,10 +31,9 @@ export function setupDraftState(event: Schema_WebEvent) {
 
   const weekHook = renderHook(() => useWeek(useToday().today), { state });
   const weekProps = weekHook.result.current;
-  const { week } = weekProps.component;
   const dispatch = renderHook(useDispatch, { state }).result.current;
 
-  const gridHook = renderHook(() => useGridLayout(isSidebarOpen, week), {
+  const gridHook = renderHook(() => useGridLayout(), {
     state,
   });
 
@@ -67,7 +65,6 @@ export function setupDraftState(event: Schema_WebEvent) {
         setters,
         dateCalcs,
         weekProps,
-        isSidebarOpen,
       ),
     { state },
   );
@@ -82,7 +79,6 @@ export function setupDraftState(event: Schema_WebEvent) {
     dateCalcs,
     deleteEvent,
     dispatch,
-    isSidebarOpen,
     submit,
     draft,
     rerenderActions: actions.rerender,

packages/web/src/common/constants/web.constants.ts

@@ -9,6 +9,8 @@ export const ID_EVENT_FORM = "Event Form";
 export const ID_GRID_ALLDAY_ROW = "allDayRow";
 export const ID_GRID_EVENTS_ALLDAY = "allDayEvents";
 export const ID_GRID_EVENTS_TIMED = "timedEvents";
+export const ID_GRID_COLUMNS_TIMED = "timedColumns";
+export const ID_WEEK_GRID_SCROLLER = "weekGridScroller";
 export const ID_SOMEDAY_WEEK_COLUMN = "somedayWeekColumn";
 export const ID_GRID_MAIN = "mainGrid";
 export const ID_REMINDER_INPUT = "reminderInput";

packages/web/src/common/utils/draft/draft.util.ts

@@ -8,7 +8,7 @@ import {
 } from "@web/common/constants/web.constants";
 import { type Schema_GridEvent } from "@web/common/types/web.event.types";
 import { assembleDefaultEvent } from "@web/common/utils/event/event.util";
-import { getElemById, getX } from "@web/common/utils/grid/grid.util";
+import { getElemById } from "@web/common/utils/grid/grid.util";
 import { roundToNext } from "@web/common/utils/round/round.util";
 import { draftSlice } from "@web/ducks/events/slices/draft.slice";
 import { type Activity_DraftEvent } from "@web/ducks/events/slices/draft.slice.types";
@@ -21,11 +21,9 @@ import {
 export const assembleAlldayDraft = async (
   e: MouseEvent,
   dateCalcs: DateCalcs,
-  isSidebarOpen: boolean,
   startOfView: Dayjs,
 ): Promise<Schema_GridEvent> => {
-  const x = getX(e, isSidebarOpen);
-  const _start = dateCalcs.getDateByXY(x, e.clientY, startOfView);
+  const _start = dateCalcs.getDateByXY(e.clientX, e.clientY, startOfView);
   const startDate = _start.format();
   const endDate = _start.add(1, "day").format();
 
@@ -40,11 +38,9 @@ export const assembleAlldayDraft = async (
 export const assembleTimedDraft = async (
   e: MouseEvent,
   dateCalcs: DateCalcs,
-  isSidebarOpen: boolean,
   startOfView: Dayjs,
 ): Promise<Schema_GridEvent> => {
-  const x = getX(e, isSidebarOpen);
-  const _start = dateCalcs.getDateByXY(x, e.clientY, startOfView);
+  const _start = dateCalcs.getDateByXY(e.clientX, e.clientY, startOfView);
   const startDate = _start.format();
   const endDate = _start.add(DRAFT_DURATION_MIN, "minutes").format();