fix(web): mobile sidebar keeps its width when shelves expand#27541

Problem

On mobile web the sidebar sheet's width follows its contents: expanding or collapsing the Working or Settled shelf makes it wider or narrower. Reproduced on main (32ecd71726) in the web dev server at 430×932 and 375×667: with a long-titled thread in Settled, the sheet is about 350px with the shelf collapsed and the full viewport width (430px / 375px, no gap) when expanded.

Change

SIDEBAR_WIDTH_MOBILE was calc(100vw - var(--spacing(3))). --spacing() is a Tailwind build-time function, and this value is set as an inline style at runtime, so the browser dropped the declaration, --sidebar-width stayed unset, and the sheet sized to its content. It is now calc(100vw - var(--spacing) * 3), which uses the runtime spacing variable, so the sheet is always the viewport width minus 12px.

Scope and approval

Fixes pingdotgg/t3code#27477

Verification

• vp run check:changed: format, lint, knip, typecheck, tests and React compiler all pass.
• No automated test: this is a visual layout bug, so before/after captures are the proof.
• Measured getBoundingClientRect().width of the mobile sheet. Before: 355px collapsed, 430px / 375px expanded. After: 418px (430 wide) and 363px (375 wide) in every state.
• cannot-verify ios-device: the report is from iPhone Safari. All captures are Chromium; the dropped declaration is standard CSS parsing, not engine-specific, but Safari was not run (a pool iOS simulator could not reach the dev server).

Evidence, light theme

Captured 4/4 fixture-matrix rows: required F1–F3 and optional F0, covering 6/6 requested web fixture/viewport combinations, 8/8 required recordings, and 2/2 required F1 stills. The iOS Safari stretch pair remains unverified; details below. Issue: #27477. Before 32ecd71726; after e8684f09ce.

Environment for every image and recording below: real web dev app on fs-43 (Linux x86_64), Playwright 1.60.0 / HeadlessChrome 148.0.7778.96, no device emulation, DPR 1, browser zoom and font scaling 100%, root font 16px, spacing token 0.25rem, light theme, prefers-reduced-motion: reduce, UTC UI clock frozen at 2026-10-30 10:00:00. Viewport sizes are CSS pixels and are repeated per row. The full viewport is retained. Sidebar scroll is at the top and search is clear on both sides.

Both revisions ran from their own pinned checkout, using T3CODE_DEV_SEED=0 and isolated databases created by that revision. Fixtures were created through the actual app composer, breadcrumb rename, settle/unsettle, and shelf controls; settings used the app's client settings function. No copied production data, database edits, or component harnesses. The long title is “Investigate why the mobile sidebar sheet resizes when a shelf with long thread titles expands”. F2 and F3 keep the separate short Control thread selected, so collapse actually hides the long row. Working is enabled and project folders are disabled for F3. A real Codex turn was asked to run sleep 120; Working count 1 and the long row's Working state were verified during each recording, without pending attention. Its visible elapsed label is 0s because the UI clock is frozen.

Before every still, the driver waited for network idle and fonts, then required two pixel-identical screenshots 500ms apart (ImageMagick AE = 0). All 28 accepted source frames, both diffs for each pair, and the eight recording filmstrips were opened and visually inspected. Each F2/F3 endpoint sheet contains three complete, unscaled viewports: initial collapsed | expanded | final collapsed. Recordings supplement these sheets and show the actual clicks. GIFs are 12fps, below 0.5MiB each, and preserve elapsed timing; only pre-roll is trimmed to align the first toggle at 2.00s. For 375×667 recordings, a 376×668 encoding canvas avoids Playwright's odd-dimension rounding; only the extra padding is removed, retaining the entire 375×667 app viewport.

Diff0 is the absolute RGB difference at zero threshold, amplified ×255 and clamped so a one-level channel change is visible. DiffT marks pixels red when the maximum absolute RGB channel difference is greater than 8/255. No source-frame alignment, recoloring, or UI cropping was applied. Widths are getBoundingClientRect().width on [data-mobile="true"][data-slot="sidebar"]; the computed width agrees. The before custom property is empty because its declaration does not resolve; after it is calc(100vw - 0.25rem * 3).

F1 — long unshelved title · 430×932 · light

Measured width: before 430px, after 418px.

Before	After	Diff0 · exact ×255	DiffT · >8/255
32ecd71726	e8684f09ce	32ecd71726 → e8684f09ce	32ecd71726 → e8684f09ce

Full comparison review sheet

F2 — Settled reveal · 430×932 · light

Measured width: before 355 → 430 → 355px, after 418 → 418 → 418px. Order: collapsed → expanded → collapsed.

Before	After	Diff0 · exact ×255	DiffT · >8/255
32ecd71726	e8684f09ce	32ecd71726 → e8684f09ce	32ecd71726 → e8684f09ce

Scripted interaction, timestamps within each GIF:

• 0.00s: sheet already open, Settled collapsed; Control selected.
• 2.00s before / 2.00s after: click Settled to expand; long off-route row appears.
• 5.08s before / 5.08s after: click Settled to collapse; long row disappears. Hold the collapsed result through the end (about 8.3s).

Before recording	After recording
32ecd71726	e8684f09ce

Full comparison review sheet · Before recording filmstrip · After recording filmstrip

F2 — Settled reveal · 375×667 · light

Measured width: before 355 → 375 → 355px, after 363 → 363 → 363px. Order: collapsed → expanded → collapsed.

Before	After	Diff0 · exact ×255	DiffT · >8/255
32ecd71726	e8684f09ce	32ecd71726 → e8684f09ce	32ecd71726 → e8684f09ce

Scripted interaction, timestamps within each GIF:

• 0.00s: sheet already open, Settled collapsed; Control selected.
• 2.00s before / 2.00s after: click Settled to expand; long off-route row appears.
• 5.17s before / 5.17s after: click Settled to collapse; long row disappears. Hold the collapsed result through the end (about 8.3s).

Before recording	After recording
32ecd71726	e8684f09ce

Full comparison review sheet · Before recording filmstrip · After recording filmstrip

F3 — Working reveal · 430×932 · light

Measured width: before 355 → 430 → 355px, after 418 → 418 → 418px. Order: collapsed → expanded → collapsed.

Before	After	Diff0 · exact ×255	DiffT · >8/255
32ecd71726	e8684f09ce	32ecd71726 → e8684f09ce	32ecd71726 → e8684f09ce

Scripted interaction, timestamps within each GIF:

• 0.00s: sheet already open, Working collapsed; Control selected.
• 2.00s before / 2.00s after: click Working to expand; long off-route row appears.
• 5.17s before / 5.17s after: click Working to collapse; long row disappears. Hold the collapsed result through the end (about 8.3s).

Before recording	After recording
32ecd71726	e8684f09ce

Full comparison review sheet · Before recording filmstrip · After recording filmstrip

F3 — Working reveal · 375×667 · light

Measured width: before 355 → 375 → 355px, after 363 → 363 → 363px. Order: collapsed → expanded → collapsed.

Before	After	Diff0 · exact ×255	DiffT · >8/255
32ecd71726	e8684f09ce	32ecd71726 → e8684f09ce	32ecd71726 → e8684f09ce

Scripted interaction, timestamps within each GIF:

• 0.00s: sheet already open, Working collapsed; Control selected.
• 2.00s before / 2.00s after: click Working to expand; long off-route row appears.
• 5.17s before / 5.08s after: click Working to collapse; long row disappears. Hold the collapsed result through the end (about 8.3s).

Before recording	After recording
32ecd71726	e8684f09ce

Full comparison review sheet · Before recording filmstrip · After recording filmstrip

F0 — optional sparse sheet · 375×667 · light

Measured width: before 355px, after 363px.

Before	After	Diff0 · exact ×255	DiffT · >8/255
32ecd71726	e8684f09ce	32ecd71726 → e8684f09ce	32ecd71726 → e8684f09ce

Full comparison review sheet

What else changed

Every observed visible difference follows the width change:

• The sheet's right edge, border, header artwork coverage, and amount of underlying chat revealed move. At 430px, collapsed-before exposes part of the Control message and send button; after retains a 12px reveal.
• Right-aligned search/header actions, row metadata/provider icons, shelf counts/chevrons, and the footer update control move with the edge.
• Thread card widths and long-title ellipsis positions change. The optional empty-state label recenters within the wider sparse sheet.

Text, selected thread, shelf counts, displayed relative timestamps, theme, and scroll position match within each before/after pair. No unrelated visible difference was found in the inspected exact diffs. The before intrinsic width here is 355px; the lead's 346.5px baseline is browser/font dependent. Both before baselines demonstrate the same content-dependent expansion.

Unverified and out of scope

• Stretch F2 expanded on iPhone 17 Pro / Mobile Safari, before and after: UNVERIFIED. vp run dev --share failed with “permission denied” for tailscale serve and said elevated privileges may be needed. It produced no usable shared pairing URL, so the pool Safari could not reach this VM. No simulator was leased. These Chromium captures do not establish Safari/WebKit behavior.
• No required web matrix row is missing. This section is light theme; the same rows in dark theme follow below. A 1440px viewport is out of scope: the affected mobile branch is below 768px. Native React Native is outside this web-only change.

Captured by GPT-6.1-Sol in the Codex harness, using Playwright against the real app.

Seed and driver scripts

Uploaded as readable PNG pages (not committed): capture.mjs (app UI seeding, stills, recordings) page 1 · page 2; process.py (sheets, diffs, GIFs) page 1 · page 2; environment and per-state widths page 1. An independent rebuild of F1 (after) from these scripts was pixel-identical to the delivered capture (0 of 400,760 pixels differ).

Evidence, dark theme

Captured 4/4 matrix rows, including optional F0: 6/6 fixture/viewport combinations, 8/8 recordings, and 2/2 required F1 stills for #27541. Before 32ecd71726; after e8684f09ce.

Real web dev app on fs-43 (Linux x86_64), Playwright 1.60.0 / HeadlessChrome 148.0.7778.96; no device emulation; DPR 1; browser zoom and font scaling 100%; root font 16px; spacing token 0.25rem; dark theme; prefers-reduced-motion: reduce; UTC UI clock frozen at 2026-10-30 10:00:00. Full CSS-pixel viewports; sidebar scroll at top; search clear.

Each revision ran from its pinned checkout with T3CODE_DEV_SEED=0 and its own fresh database. The same copied driver created synthetic fixtures through the real app, using the app settings functions to force dark theme, disable project folders, and enable Working only for F3. No database copying, direct fixture database writes, component harnesses, or tracked-file changes. Dark rendering was visually verified before the full run; every accepted still also asserts the dark class, stored dark preference, and dark media query.

Before each still, network idle and fonts were awaited with reduced motion enabled. Only a pair of pixel-identical screenshots 500ms apart was accepted (ImageMagick AE = 0). All 28 accepted source frames, all comparison images and diffs, and eight recording filmstrips were opened and inspected. The endpoint sheets retain initial collapsed, expanded, and final collapsed full viewports. GIFs preserve elapsed timing at 12fps; only pre-roll is trimmed to place the first visible toggle near 2.00s (one-frame quantization; measured times are listed per pair). At 375×667, a 376×668 encoding canvas avoids odd-dimension rounding; only the extra padding is removed.

Diff0 is absolute RGB difference multiplied by 255 and clamped, showing every nonzero channel difference. DiffT marks pixels red when maximum absolute RGB channel difference is greater than 8/255. No source alignment, recoloring, or UI cropping was applied. Widths are getBoundingClientRect().width on [data-mobile="true"][data-slot="sidebar"], confirmed against computed width.

F1 — long unshelved title · 430×932 · dark

Environment: Real web dev app on fs-43 (Linux x86_64), Playwright 1.60.0 / HeadlessChrome 148.0.7778.96; no device emulation; DPR 1; browser zoom and font scaling 100%; root font 16px; spacing token 0.25rem; dark theme; prefers-reduced-motion: reduce; UTC UI clock frozen at 2026-10-30 10:00:00. Full CSS-pixel viewports; sidebar scroll at top; search clear.

Measured width: before 430px, after 418px.

Before	After	Diff0 · exact ×255	DiffT · >8/255
32ecd71726	e8684f09ce	32ecd71726 → e8684f09ce	32ecd71726 → e8684f09ce

Source frames: before still · after still

Full comparison review sheet

F2 — Settled reveal · 430×932 · dark

Environment: Real web dev app on fs-43 (Linux x86_64), Playwright 1.60.0 / HeadlessChrome 148.0.7778.96; no device emulation; DPR 1; browser zoom and font scaling 100%; root font 16px; spacing token 0.25rem; dark theme; prefers-reduced-motion: reduce; UTC UI clock frozen at 2026-10-30 10:00:00. Full CSS-pixel viewports; sidebar scroll at top; search clear.

Measured width: before 355 → 430 → 355px, after 418 → 418 → 418px. Order: collapsed → expanded → collapsed.

Before	After	Diff0 · exact ×255	DiffT · >8/255
32ecd71726	e8684f09ce	32ecd71726 → e8684f09ce	32ecd71726 → e8684f09ce

Scripted interaction, timestamps within each GIF:

• 0.00s: sheet open; Settled collapsed; short Control thread selected.
• 1.92s before / 2.00s after: click Settled to expand; the different long-titled thread appears.
• 5.08s before / 5.17s after: click Settled to collapse; the long row disappears. Hold the final state through the end (about 8.3s).

Before recording	After recording
32ecd71726	e8684f09ce

Source frames: before initial · before expanded · before collapsed · after initial · after expanded · after collapsed

Full comparison review sheet · Before recording filmstrip · After recording filmstrip

F2 — Settled reveal · 375×667 · dark

Environment: Real web dev app on fs-43 (Linux x86_64), Playwright 1.60.0 / HeadlessChrome 148.0.7778.96; no device emulation; DPR 1; browser zoom and font scaling 100%; root font 16px; spacing token 0.25rem; dark theme; prefers-reduced-motion: reduce; UTC UI clock frozen at 2026-10-30 10:00:00. Full CSS-pixel viewports; sidebar scroll at top; search clear.

Measured width: before 355 → 375 → 355px, after 363 → 363 → 363px. Order: collapsed → expanded → collapsed.

Before	After	Diff0 · exact ×255	DiffT · >8/255
32ecd71726	e8684f09ce	32ecd71726 → e8684f09ce	32ecd71726 → e8684f09ce

Scripted interaction, timestamps within each GIF:

• 0.00s: sheet open; Settled collapsed; short Control thread selected.
• 2.00s before / 2.00s after: click Settled to expand; the different long-titled thread appears.
• 5.17s before / 5.17s after: click Settled to collapse; the long row disappears. Hold the final state through the end (about 8.3s).

Before recording	After recording
32ecd71726	e8684f09ce

Source frames: before initial · before expanded · before collapsed · after initial · after expanded · after collapsed

Full comparison review sheet · Before recording filmstrip · After recording filmstrip

F3 — Working reveal · 430×932 · dark

Environment: Real web dev app on fs-43 (Linux x86_64), Playwright 1.60.0 / HeadlessChrome 148.0.7778.96; no device emulation; DPR 1; browser zoom and font scaling 100%; root font 16px; spacing token 0.25rem; dark theme; prefers-reduced-motion: reduce; UTC UI clock frozen at 2026-10-30 10:00:00. Full CSS-pixel viewports; sidebar scroll at top; search clear.

Measured width: before 355 → 430 → 355px, after 418 → 418 → 418px. Order: collapsed → expanded → collapsed.

Before	After	Diff0 · exact ×255	DiffT · >8/255
32ecd71726	e8684f09ce	32ecd71726 → e8684f09ce	32ecd71726 → e8684f09ce

Scripted interaction, timestamps within each GIF:

• 0.00s: sheet open; Working collapsed; short Control thread selected.
• 2.00s before / 2.08s after: click Working to expand; the different long-titled thread appears.
• 5.17s before / 5.17s after: click Working to collapse; the long row disappears. Hold the final state through the end (about 8.3s).

A real Codex turn was asked to run sleep 120. Working count 1 and the long row’s Working status were verified during the recording, without pending attention. Its elapsed label is 0s because the UI clock is frozen. F3 retains the required blue Working indicator.

Before recording	After recording
32ecd71726	e8684f09ce

Source frames: before initial · before expanded · before collapsed · after initial · after expanded · after collapsed

Full comparison review sheet · Before recording filmstrip · After recording filmstrip

F3 — Working reveal · 375×667 · dark

Environment: Real web dev app on fs-43 (Linux x86_64), Playwright 1.60.0 / HeadlessChrome 148.0.7778.96; no device emulation; DPR 1; browser zoom and font scaling 100%; root font 16px; spacing token 0.25rem; dark theme; prefers-reduced-motion: reduce; UTC UI clock frozen at 2026-10-30 10:00:00. Full CSS-pixel viewports; sidebar scroll at top; search clear.

Measured width: before 355 → 375 → 355px, after 363 → 363 → 363px. Order: collapsed → expanded → collapsed.

Before	After	Diff0 · exact ×255	DiffT · >8/255
32ecd71726	e8684f09ce	32ecd71726 → e8684f09ce	32ecd71726 → e8684f09ce

Scripted interaction, timestamps within each GIF:

• 0.00s: sheet open; Working collapsed; short Control thread selected.
• 2.00s before / 2.00s after: click Working to expand; the different long-titled thread appears.
• 5.08s before / 5.08s after: click Working to collapse; the long row disappears. Hold the final state through the end (about 8.3s).

A real Codex turn was asked to run sleep 120. Working count 1 and the long row’s Working status were verified during the recording, without pending attention. Its elapsed label is 0s because the UI clock is frozen. F3 retains the required blue Working indicator.

Before recording	After recording
32ecd71726	e8684f09ce

Source frames: before initial · before expanded · before collapsed · after initial · after expanded · after collapsed

Full comparison review sheet · Before recording filmstrip · After recording filmstrip

F0 — optional sparse sheet · 375×667 · dark

Environment: Real web dev app on fs-43 (Linux x86_64), Playwright 1.60.0 / HeadlessChrome 148.0.7778.96; no device emulation; DPR 1; browser zoom and font scaling 100%; root font 16px; spacing token 0.25rem; dark theme; prefers-reduced-motion: reduce; UTC UI clock frozen at 2026-10-30 10:00:00. Full CSS-pixel viewports; sidebar scroll at top; search clear.

Measured width: before 355px, after 363px.

Before	After	Diff0 · exact ×255	DiffT · >8/255
32ecd71726	e8684f09ce	32ecd71726 → e8684f09ce	32ecd71726 → e8684f09ce

Source frames: before still · after still

Full comparison review sheet

What else changed

Every observed visible difference follows the sidebar width change:

• The right edge, border, header artwork coverage, and amount of underlying chat revealed move. Collapsed-before at 430px exposes part of the Control message and send button; after retains a 12px reveal.
• Search/header actions, row metadata/provider icons, shelf counts/chevrons, and the footer update control move with the right edge.
• Thread cards change width and long titles truncate at different positions. The sparse empty-state label recenters within the sheet.

The GIFs also retain native click/hover feedback: a newly revealed row may briefly highlight or expose row actions during the click. The 12fps sample can place this feedback in adjacent frames on the two sides. Actual toggle times are listed above each pair.

Text, selected thread, shelf counts, displayed relative timestamps, dark palette, and scroll position match within each pair. No unrelated visible change was found in the exact diffs. The measured intrinsic before width is 355px; after is viewport minus 12px in every state.

Unverified and out of scope

• No required web row is missing. F0 is also captured.
• Safari/WebKit stretch F2 pair: UNVERIFIED. This run used the requested existing Chromium workflow. No Safari-capable browser/device was used; these captures establish Chromium behavior only.
• 1440px and native React Native are outside this mobile-width web matrix.

Driver and script pages

The previous capture driver, processor, cleanup helper, and source-page renderer were copied. Capture changes force dark in Playwright and app settings, add a preflight mode, assert dark before stills, and retain theme diagnostics. Additional scripts run the same driver, validate measurements/stability, upload with anonymous byte verification, and assemble this section. No scripts or evidence were committed.

• build-evidence-py-source-01.png
• capture-mjs-source-01.png
• capture-mjs-source-02.png
• cleanup-py-source-01.png
• environment-and-widths-txt-source-01.png
• process-py-source-01.png
• process-py-source-02.png
• render-sources-py-source-01.png
• run-capture-py-source-01.png
• stage-sources-py-source-01.png
• upload-assets-py-source-01.png
• validate-py-source-01.png

Captured by GPT-6.1-Sol in the Codex harness, using Playwright against the real app.

Triage, fix and review by Claude Opus 5.5 (Claude Code) as issue lead, with GPT-6.1-Sol (Codex) and Claude Opus 5.5 reviewers; captures by GPT-6.1-Sol (Codex) with Playwright against the real app.

🤖 Generated with Claude Code