fix(web): custom snooze footer stays inside the dialog#33759

Problem

In the Custom snooze dialog, the footer's "Edit snooze options" button sticks out past the dialog's left border at desktop widths when the interface font is wider than the default (for example a monospace font). The dialog is capped at 24rem, and its three footer buttons (Edit snooze options, Cancel, Snooze) don't wrap or shrink, so justify-end pushes the overflow out on the left.

Reproduction on main (4c361199f4, web dev server, 1280×800): Settings → Appearance → Interface font = DejaVu Sans Mono, then thread actions → Snooze → Custom…. The popup's left edge is at x=448 while "Edit snooze options" starts at x=438. The same thing happens on the Date and time tab and the Duration tab. The default font fits with no room to spare.

Change

The Custom snooze dialog's width cap at sm and up goes from sm:max-w-sm (24rem) to sm:max-w-md (28rem), the width most dialogs in the app use. The footer now has 400px of content width against the ~370px a monospace footer needs, so it stays on one row with Cancel and Snooze together. The width is rem-based, so this holds across the interface font size setting (12–20px). Below sm the dialog is a full-width bottom sheet and is unchanged.

Scope and approval

Fixes pingdotgg/t3code#33740

Verification

• vp run check:changed: format, lint, knip, typecheck and react compiler pass. vp test run apps/web/src/hooks/useThreadActionMenu.test.ts: 7/7 pass.
• This is a purely visual bug, so the proof is before/after captures in the real web app instead of a test. Both revisions ran from fresh synthetic databases with the same driver: T3 Preview, Linux Chrome, DPR 2, no device emulation, frozen page clock, reduced-motion shim. Diff0 is an exact RGB comparison; DiffT flags channel differences above 16/255. Changed pixels are shown in magenta.
• Measured: at 1280×800 with the monospace font at 16px, "Edit snooze options" sits 10.3px past the left border before and 25px inside after. At 640×600 with the monospace font at 20px (the largest size at the sm boundary), it sits 12.6px past before and 31px inside after.

Evidence

F01 — Date and time tab · 1280×800 · dark · DejaVu Sans Mono 16px

F02 — Duration tab · 1280×800 · dark · DejaVu Sans Mono 16px

F07 — default font, Date and time · 1280×800 · light · 16px (what users on the default font see change)

F09 — sm boundary · 640×600 · dark · DejaVu Sans Mono 20px

F11 — bottom sheet, below sm · 390×844 · light · DejaVu Sans Mono 16px (unchanged: zero changed pixels)

All 12 rows (both tabs, both validation errors, calendar open, unit menu, default font, the sm boundary, and the bottom sheet at 390 and 639px), with recordings of the scripted interactions: full evidence index · fixture matrix. Seed and driver scripts: seed.sh, reproduce.md, driver.js, sessions.js, stabilize.js, diff.py, seed-clock.py, f01.js. The F01 pair rebuilds from these scripts with 0 changed pixels.

What else changed: at sm and up the dialog is 64px wider for everyone (80px at a 20px interface size), and its tabs, fields, footer, shadow and the calendar/Unit menu anchors move or widen with it. Text reflows: with the default font the description fits on one line, so the dialog is 20px shorter. The bottom sheet at 390 and 639px has zero changed pixels.

Not checked: Electron (desktop wraps the same web view), other browser engines, and the reporter's macOS fonts. The captures drive the breadcrumb thread-actions launcher; the sidebar launchers open the same dialog host. Optional native empty-field validation and midnight rollover rows are out of scope for a width change.

AI-assisted; verified with the tests and tools listed above.