[juliusmarminge]

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 #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

Before	After	Diff0	DiffT (>16)
4c361199f4	b5b9a154b4	4c361199f4 → b5b9a154b4	4c361199f4 → b5b9a154b4

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

Before	After	Diff0	DiffT (>16)
4c361199f4	b5b9a154b4	4c361199f4 → b5b9a154b4	4c361199f4 → b5b9a154b4

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

Before	After	Diff0	DiffT (>16)
4c361199f4	b5b9a154b4	4c361199f4 → b5b9a154b4	4c361199f4 → b5b9a154b4

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

Before	After	Diff0	DiffT (>16)
4c361199f4	b5b9a154b4	4c361199f4 → b5b9a154b4	4c361199f4 → b5b9a154b4

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

Before	After	Diff0	DiffT (>16)
4c361199f4	b5b9a154b4	4c361199f4 → b5b9a154b4	4c361199f4 → b5b9a154b4

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.

[macroscopeapp]

Approvability

Verdict: Approved at 84713da

Macroscope's review found this PR approvable — The custom snooze dialog becomes wider on larger screens to give its footer buttons more room. This is a localized visual adjustment; mobile layout and snooze behavior remain unchanged.

^{You can add or adjust custom eligibility rules. Learn more.}

[coderabbitai]

No actionable comments were generated in the recent review.

Walkthrough

The Custom snooze dialog popup’s small-screen maximum width changes from sm:max-w-sm to sm:max-w-md.

Changes: Custom snooze dialog

Layer / File(s)	Summary
Widen dialog popup apps/web/src/components/CustomSnoozeDialog.tsx	The popup’s small-screen maximum width changes from sm:max-w-sm to sm:max-w-md.

Estimated code review effort: 1 (Trivial) | ~3 minutes

Change: Bug fix · Severity of issue fixed: Low

Possibly related issues

• pingdotgg/t3code#32790 — This change addresses a dialog overflow symptom under wider fonts, but not the issue’s broader font-size behavior.

Possibly related PRs

• pingdotgg/t3code#33753 — This PR makes the same dialog-width change.
• pingdotgg/t3code#28842 — This PR changes controls and button sizing in the same dialog footer.
• pingdotgg/t3code#26427 — This PR adds the “Edit snooze options” action to the same dialog footer.

Suggested labels: bugfix, size:XS

Suggested reviewers: macroscopeapp

Merge Risk: Minimal · up to 84713

The wider dialog is intended to keep its footer inside the modal. No merge-blocking issue is established.

Pre-merge checks: 4

Check name	Status	Explanation
Title check		The title clearly summarizes the main change: keeping the Custom snooze footer inside the dialog.
Linked Issues check		Issue #33740 requires the Custom snooze footer to stay within the dialog for wider interface fonts. The PR changes DialogPopup from sm:max-w-sm to sm:max-w-md in CustomSnoozeDialog.tsx, which …
Out of Scope Changes check		The whole-PR diff contains only the CustomSnoozeDialog maximum-width change. It directly supports issue #33740 and introduces no unrelated changes.
Description check		The description covers the problem and reproduction, the width change and its scope, the linked issue, focused checks, visual evidence, and unverified environments.

Full details: Linked Issues check

Explanation

Issue #33740 requires the Custom snooze footer to stay within the dialog for wider interface fonts. The PR changes DialogPopup from sm:max-w-sm to sm:max-w-md in CustomSnoozeDialog.tsx, which directly addresses the reported width constraint. The PR reports visual checks across both tabs and the sm boundary, and reports that the bottom sheet is unchanged. No issue requirement calls for a new automated test for this visual layout fix.

Finishing Touches

Generate docstrings

• Commit to this branch
• Create a new PR

Generate unit tests (beta)

• Commit to this branch
• Create a new PR

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Recent review info

Run configuration

• Source mode: Auto
• Repository: pingdotgg/t3code
• Branch: fix/issue-33740
• File: .coderabbit.config.ts
• Commit: 84713da
• Layers: Repository TS config
• Review profile: CHILL
• Plan: Team
• Run ID: 2533cf81-5d65-43df-87be-e803c7184d72

Commits

Reviewing files that changed from the base of the PR and between 633438d and 84713da.

Files selected for processing: 1

• apps/web/src/components/CustomSnoozeDialog.tsx

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 0 remain after this review.