[voida6]

Problem

On the Custom snooze dialog, in Date and time mode, the Date button sits 2px higher than the Time field. Reported by @miadotcx on X, who filed it as a "MAJOR bug" that makes T3 Code "completely unusable" and "possibly vulnerable to RCE": https://x.com/miadotcx/status/2112954163688587350

Severity assessment: critical, in the sense that it is critically crooked. It is purely cosmetic. There is no RCE, only RCE (Really Crooked Elements).

Cause: the two columns space their label and control differently.

• The Date column is a div with gap-1.5 (6px) between a separate Label and the button.
• The Time column is a Label that wraps its text and the input. Label already has gap-2 (8px).

So the Date button starts 2px above the Time field. Duration mode is not affected: the amount field and the Unit label both use 8px already.

Change

The Date column uses gap-2, matching Label. One class, no other layout change.

I also added CustomSnoozeDialog.layout.browser.test.tsx, which renders the dialog at 1280px wide and asserts the Date button and the Time field start at the same top. It is named .layout. on purpose: #22433 adds a CustomSnoozeDialog.browser.test.tsx and I did not want the two PRs to collide.

Scope and approval

This is a very small, focused fix for an obvious visual bug, so I am submitting it without a prior issue (CONTRIBUTING, "very small, focused fix for an obvious bug"). It changes one spacing class and no behavior. There is no GitHub issue for it; the report is the post above.

#22433 (24-hour time entry in custom snooze) edits the Time Input props in the same block, around the type attribute. This PR only touches the Date column's wrapper div a few lines above, so the two should merge without conflict.

Verification

I measured the real component in the repo's own browser test project (headless Chromium, ~/index.css loaded, so the actual Tailwind classes apply). I did not drive the full app: its dev server needs pairing, so the component test is the evidence.

getBoundingClientRect().top of the Date button and of the Time field's bordered box (the span around the native input), at 1280px wide (two columns):

	Date	Time	Difference
Before	465.5px	467.5px	2px
After	467.5px	467.5px	0px

At 480px wide (stacked) the label-to-control distance was 24px for Date and 26px for Time before, and 26px for both after. Control heights were equal in both layouts (32px at 1280px, 36px at 480px), so only the label gap was off.

Commands, run from apps/web:

• vp test run --project browser src/components/CustomSnoozeDialog.layout.browser.test.tsx: fails on main with Date top 465.5px, Time top 467.5px, passes with the fix.
• vp fmt --check and vp lint on the two changed files: clean apart from an existing react(purity) warning on the new Date() call in the calendar disabled prop, which this PR does not touch.
• vp run typecheck in apps/web: exit 0.

I did not run vp run check:changed: here it compared against a stale base and tried to cover 5,000+ files.

Before (1280px wide, Date button 2px above the Time field):

After (aligned):

Narrow (stacked), before and after:

Not covered: dark theme captures, browsers other than Chromium (the layout is plain flex and grid with a fixed gap), the Electron shell (it wraps this same web component), and mobile (it has its own UI and does not use this dialog). This removes 2px of attack surface.

Claude Sonnet 5.5, via Claude Code in T3 Code.

🤖 Generated with Claude Code

[macroscopeapp]

Approvability

Verdict: Approved at 670327c

Macroscope's review found this PR approvable — This PR makes a one-class spacing adjustment in the custom snooze dialog and adds a focused browser layout test. It changes only visual alignment, with no product-default, API, data, or request-path behavior changes.

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

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Configuration used: Path: .coderabbit.config.ts
• Review profile: CHILL
• Plan: Advanced
• Run ID: 35e64887-cd20-4914-9a86-939069aeb303

📥 Commits

Reviewing files that changed from the base of the PR and between e075957 and 670327c.

📒 Files selected for processing: 2

• apps/web/src/components/CustomSnoozeDialog.layout.browser.test.tsx
• 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; 9 remain after this review.

📝 Walkthrough

The date picker container gap changes from gap-1.5 to gap-2. A browser test checks whether the Date field and the Time field’s bordered box share a top coordinate at a 1280×900 viewport.

Changes: Custom snooze dialog alignment

Layer / File(s)	Summary
Adjust and verify field alignment apps/web/src/components/CustomSnoozeDialog.tsx, apps/web/src/components/CustomSnoozeDialog.layout.browser.test.tsx	The date picker container gap changes from gap-1.5 to gap-2. The browser test checks vertical alignment between the Date field and the Time field’s bordered box.

Priority: ⬇️ Low

Estimated code review effort: 2 (Simple) | ~10 minutes

Change: Bug fix

Suggested reviewers: juliusmarminge

Merge Risk: ⚪ Minimal · up to 67032

The Date and Time fields are aligned, and the browser test detects the previous offset. No actionable merge-blocking risk remains.

Pre-merge checks: 4

Check name	Status	Explanation
Description check		The description includes all required sections. It explains the problem, change, scope rationale, focused verification, test results, screenshots, limitations, and agent details.
Title check		The title is concise, specific, and accurately describes the primary layout fix.
Linked Issues check		Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check		Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create a new PR

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

_{Comment @coderabbitai help to get the list of available commands.}