Sign up
View stargazersSign up

fix(web): snooze option rows no longer overflow on narrow viewports#28627

closed1
main
GitHub fork: fix/snooze-settings-mobile-overflow
opened10d agobyIimluckii
1 files changed
View on GitHubTwo-way sync enabledPR last imported 1h ago

Problem

Snooze option rows in Settings > Threads overflow the settings card horizontally on narrow viewports. The fields cluster in SnoozePresetFields (When select w-32 + number field w-32 + unit select w-28 + two gap-2 gaps = 384 px minimum) is a flex item with default min-width: auto, so it cannot shrink below its content. On a ~360 px phone viewport the unit select crosses the card boundary and is clipped by the viewport edge, leaving roughly half the unit dropdown off-screen.

Repro: open app.t3.codes on a ~360 px mobile browser (or narrow a desktop window below ~420 px), open Settings > Threads, scroll to Snooze > Snooze options.

Change

Add min-w-0 flex-wrap to the SnoozePresetFields wrapper div in apps/web/src/components/settings/SnoozePresetsSettings.tsx. min-w-0 lets the cluster shrink below its content width and flex-wrap drops the unit select (or the at time input) to a second line when the row is narrower than the controls' minimum widths - the individual selects keep their own minimum widths, so shrinking alone would still overflow. Desktop layout is unchanged: the 1024 px before/after captures are byte-identical.

Fixes #28618.

Scope and approval

Small, focused fix of an obvious visual bug, filed and diagnosed in #28618 before this PR. One problem, one file, one className change.

Verification

  • vp i - passed
  • vp test run apps/web/src/components/settings/SnoozePresetsSettings.logic.test.ts - 4 tests passed
  • vp run check:changed - all applicable checks passed
  • git diff --check - passed

Before/after captures (headless Chromium, standalone reproduction of the card's flex layout, both row variants):

360 px, duration row - before: unit select clipped at the card edge; after: wraps to a second line, nothing clipped:

before 360 after 360

320 px, both row variants - before: same clipping; after: each control fits, wrapping as needed:

before 320 after 320

Not verified: the logged-in app.t3.codes settings page on a physical phone - captures come from a standalone reproduction of the exact flex structure, and viewport measurements were taken in headless Chromium.

Written with gpt-6.1-sol in T3 Code.

Checks

21 successful · 15 skipped
All checks passed
c562238
MmacroscopeappBot10d ago
Synced from GitHub

Approvability

Verdict: Approved at 6f52fe2

Macroscope's review found this PR approvable — Snooze preset controls can now wrap within narrow settings rows instead of overflowing. This is a localized layout change with no changes to saved settings or snooze behavior.

You can add or adjust custom eligibility rules. Learn more.

CcoderabbitaiBot10d ago
Synced from GitHub

Review in Change Stack →

Important

Review skipped

Review was skipped as selected files did not have any reviewable changes.

External image Run configuration
External image Commits

Reviewing files that changed from the base of the PR and between 6f52fe2f80c3e3bd74a8bb1734e4670b0e9a63f7 and c562238ce523740a5404d4208aa945276c8fac0c.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • Trigger review

No actionable comments were generated in the recent review.

External image Recent review info
External image Run configuration
External image Commits

Reviewing files that changed from the base of the PR and between 8760d063e903406c8e8f695b0852c0a15fc1e00f and 6f52fe2f80c3e3bd74a8bb1734e4670b0e9a63f7.

External image Files selected for processing: 1
  • apps/web/src/components/settings/SnoozePresetsSettings.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 snooze preset fields container now allows its controls to wrap and prevents the container from exceeding its available minimum width.

Changes: Snooze preset layout

Layer / File(s)Summary
Snooze preset field wrapping
apps/web/src/components/settings/SnoozePresetsSettings.tsx		The fields container gains min-w-0 and flex-wrap, allowing the controls to wrap within the available width.

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

Change: Bug fix · Severity of issue fixed: Low

Possibly related issues

  • pingdotgg/t3code#28618 — Reports that snooze preset controls overflow the settings card on narrow viewports; this change updates the fields container to wrap and shrink.

Possibly related PRs

Suggested reviewers: t3dotgg

Merge Risk: External image Minimal · previous review 6f52f

The snooze controls can wrap within the settings card at narrow widths, with no merge-blocking risk identified.

Pre-merge checks: Passed 4
Check nameStatusExplanation
Title checkPassedThe title clearly and concisely describes the main fix: preventing snooze option rows from overflowing on narrow viewports.
Description checkPassedThe description covers the problem, reproduction steps, implementation, scope and approval basis, verification results, screenshots, and the remaining physical-device verification limitation.
Linked Issues checkPassedIssue #28618 requires snooze option controls to stay inside the card and shrink or wrap on narrow viewports. The PR changes the SnoozePresetFields wrapper from flex items-center gap-2 to `flex min…
Out of Scope Changes checkPassedThe whole-PR diff contains one className change in apps/web/src/components/settings/SnoozePresetsSettings.tsx. The change directly supports the narrow-viewport behavior required by issue #28618. No …
Full details: Linked Issues check

Explanation

Issue #28618 requires snooze option controls to stay inside the card and shrink or wrap on narrow viewports. The PR changes the SnoozePresetFields wrapper from flex items-center gap-2 to flex min-w-0 flex-wrap items-center gap-2. This permits the fields cluster to shrink and wrap its controls. The reported logic test and changed-check results provide supporting automated verification.

Full details: Out of Scope Changes check

Explanation

The whole-PR diff contains one className change in apps/web/src/components/settings/SnoozePresetsSettings.tsx. The change directly supports the narrow-viewport behavior required by issue #28618. No unrelated product or repository changes are present.

Finishing Touches
Generate unit tests (beta)
  • Create a new PR
  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Added 1 commit

  • fix(web): snooze option rows no longer overflow on narrow viewportsc562238
Mmaria9d ago

Note

Written by gpt-6.1-sol on behalf of Maria

Verified in a real dev environment

verified head c562238ce523740a5404d4208aa945276c8fac0c as-is on a linux boat vm, using the real dev web app, repository playwright, and /usr/bin/google-chrome.

  • reproduced on github/main (e6e2ab05cc) in a separate worktree before starting the pr server. at 320 px, the unit control ended at x=527 while the row ended at x=281. duration and time controls overflowed.
  • on the exact pr head, all snooze row buttons and inputs fit inside their rows at 320 and 360 px. duration, unit, and time controls wrap. checked light and dark themes. at 1280 px, fields remain on one line.
  • created a project pointing at the real checkout through add project, then started a codex gpt-6.1-sol thread through the composer. the real provider turn completed and returned snooze verification ready.
  • at 360 px, edited amount and unit, switched between duration and tomorrow/time, and confirmed both values were retained. added and removed an option. reloaded and confirmed the saved two-minute preset persisted.
  • opened the real thread's context menu: the saved two-minute preset appeared, selecting it moved the thread to snoozed, and wake thread returned it to the inbox.
  • blacksmith: vp test run apps/web/src/components/settings/SnoozePresetsSettings.logic.test.ts passed all four tests. vp run check:changed 8760d063e903406c8e8f695b0852c0a15fc1e00f passed format, lint, knip, affected typechecks, adjacent tests, and react compiler coverage. the explicit pr base was needed because the worker has a shallow source snapshot.

before, main at 360 px with default presets:

main: snooze controls overflow at 360 px

after, pr at 360 px with the same default presets:

pr: snooze controls wrap inside the card at 360 px

real settings interaction, trimmed to 11 seconds; uploaded playback and seeking checked:

editing snooze amount, unit, and time at 360 px

completed real codex gpt-6.1-sol turn in the web client

Not verified

physical phone browsers, native ios/android clients, and electron on macos/windows were not exercised on this linux vm. other providers, relay/tunnel connections, and automatic timed wake were not exercised. this is a web-only css change; no code changes were needed during verification.

Jjuanda22226d ago
Synced from GitHub

Could we have the summary text aligned with the input boxes and have the "X" remain at the right. It makes more sense vissually

JJulius Marminge2d ago

Thanks, @imluckii, for diagnosing and fixing the snooze-row overflow. #28223 now includes the same wrapping change in ccde655b8f, so this is covered on main. If the separate alignment suggestion still matters, please open a smaller PR for it.