fix(conversation): give map ticks a 24px target on touch screens

The map's ticks shrink so the whole conversation fits on the rail: 14px
tall at most, 6px on a long chat. That is fine for a mouse but below
the 24px target WCAG 2.5.8 asks for, and hard to hit with a finger. On
a coarse pointer each tick now keeps a 24px height and the rail
scrolls, which already keeps the current tick in view. A mouse still
gets the dense rail.

Author: pratikbuilds

e2e/conversation-map.spec.ts

@@ -269,3 +269,34 @@ test.describe("conversation map", () => {
     );
   });
 });
+
+const tickSizes = (page: Page) =>
+  page.locator("[data-slot='conversation-map-tick']").evaluateAll((ticks) =>
+    ticks.map((element) => {
+      const box = element.getBoundingClientRect();
+      return { width: box.width, height: box.height };
+    }),
+  );
+
+test("with a mouse the rail fits every turn", async ({ page }) => {
+  await open(page);
+  expect((await railState(page)).overflows).toBe(false);
+});
+
+test.describe("on a touch screen", () => {
+  test.use({ hasTouch: true, isMobile: true });
+
+  test("every tick is a 24px target and the rail scrolls instead", async ({
+    page,
+  }) => {
+    await open(page);
+    for (const size of await tickSizes(page)) {
+      expect(size.width).toBeGreaterThanOrEqual(24);
+      expect(size.height).toBeGreaterThanOrEqual(24);
+    }
+    // The current tick, the last turn's, is scrolled into the rail's view.
+    await expect
+      .poll(() => railState(page))
+      .toEqual({ overflows: true, scrolled: true, showsCurrent: true });
+  });
+});

src/ui/conversation-map.tsx

@@ -272,7 +272,10 @@ export function ConversationMap({
               aria-current={current ? "location" : undefined}
               aria-describedby={described ? previewTextId : undefined}
               tabIndex={turn.id === stopId ? 0 : -1}
-              className="group flex min-h-1.5 w-full shrink grow-0 basis-3.5 cursor-pointer items-center rounded-sm focus-visible:-outline-offset-2"
+              // A mouse gets the dense rail, the whole conversation at a
+              // glance. A finger needs a 24px target (WCAG 2.5.8), so on a
+              // touch screen each tick keeps that height and the rail scrolls.
+              className="group flex min-h-1.5 w-full shrink grow-0 basis-3.5 cursor-pointer items-center rounded-sm focus-visible:-outline-offset-2 pointer-coarse:min-h-6 pointer-coarse:shrink-0 pointer-coarse:basis-6"
               onPointerEnter={(event) => {
                 if (event.pointerType === "mouse") {
                   show(turn.id, event.currentTarget);