fix(desktop-chrome): preserve balanced layout when sidebar collapses

[tellaho]

Category: fix
User Impact: The desktop content surface now keeps balanced chrome spacing when the sidebar is collapsed or multiple communities are visible, with a cleaner sidebar transition.

Problem: Collapsing the left sidebar removed the content surface's left inset, while multi-community layouts also exposed uneven visible gutters and sidebar content during the exit transition. Solution: Preserve an 8px visible gutter around the content surface, clip and fade only the sidebar's inner content while it trails off canvas, and leave the opaque shell in place until the existing visibility transition completes.

File changes

desktop/src/app/BuzzThemeSurfaces.tsx
Preserves a balanced visible left gutter after accounting for the content-edge shadow.

desktop/src/shared/ui/sidebar.tsx
Clips the collapsing sidebar, disables interaction off canvas, and fades/translates its inner content without exposing a different background.

desktop/tests/e2e/community-rail.spec.ts
Adds gutter assertions for single-community collapsed-sidebar and multi-community layouts.

desktop/tests/e2e/sidebar.spec.ts
Covers the collapse opacity, translation, clipping, pointer-event behavior, and restoration on reopen.

Reproduction steps

1. Launch the desktop app with the Buzz theme and at least two communities.
2. Collapse the channel sidebar.
3. Confirm the main content surface keeps equal visible left and right gutters and does not overlap the community rail.
4. Reopen and collapse the sidebar again; confirm its contents fade and trail right while the chrome background stays opaque, then restore fully when reopened.

Screenshots

Single community	Multiple communities

Validation

• pnpm build:e2e
• focused sidebar integration tests: 2 passed
• collapsed multi-community smoke regression: 1 passed
• Biome check on all four changed files
• pre-push desktop check, typecheck, and test hooks
• git diff --check

Related issue/PR: none found.

[jedwards27]

Review verdict: changes requested

One accessibility blocker remains at d72b0d524eca2965170b0cca8380cee2fed1d6b5.

Blocking: honor reduced-motion for the new collapse animation

desktop/src/shared/ui/sidebar.tsx:381-383 adds a 200 ms opacity/scale/translate transition to the full sidebar contents, but it remains animated when the OS requests prefers-reduced-motion: reduce. Buzz's product contract requires WCAG 2.1 AA minimum (VISION.md:206), and this codebase routinely disables comparable transitions with motion-reduce:transition-none, including other controls in this same file (sidebar.tsx:762, sidebar.tsx:971). The new regression test currently hard-requires transition-duration: 0.2s (desktop/tests/e2e/sidebar.spec.ts:568-575) without exercising reduced motion.

Please add motion-reduce:transition-none (or an equivalent static reduced-motion treatment) to the new transition content and add a causal Playwright row using page.emulateMedia({ reducedMotion: "reduce" }) that proves the computed transition is disabled. A temporary exact-head probe reproduced the current 0.2s duration under reduced-motion emulation; adding that class made the same probe pass.

What passed

The rest of the current-head implementation held up under source tracing and exact-head browser checks:

• state ownership is coherent across desktop/mobile collapse, single- vs multi-community layouts, and the huddle exclusion;
• the collapsed 8 px gutter is added only when no community rail exists, avoiding a double inset;
• the deliberately outboard resize rail remains unclipped, and resize/persistence passed 5/5 with an explicitly managed local server;
• the off-canvas pointer-safety class follows caller classes, so callers cannot re-enable interaction accidentally;
• the community rail remained the painted hit target throughout the transition across buzz, buzz-dark, and vesper (15/15 repeated cases);
• focused collapse/reopen and gutter/mobile/multi-community cases passed repeatedly;
• pnpm -C desktop build:e2e, git diff --check, and exact-head GitHub CI passed.

A separate early repeat batch encountered a blank-page/server-lifecycle failure before the sidebar rendered; rerunning with the HTTP server PID explicitly managed produced the 5/5 resize/persistence and 15/15 transition results above. That failure is not attributed to this patch.

Please fix the reduced-motion path; no other blocking finding remains from this review.

[tellaho]

Resolved in 56e456fb1.

• Added reduced-motion handling to the animated sidebar content so both the transition property and duration are disabled when prefers-reduced-motion: reduce.
• Added causal Playwright coverage that emulates reduced motion and verifies the collapsed state lands statically with a 0s transition.

Validation at that exact head: focused normal/reduced-motion E2Es passed 2/2; E2E build, focused Biome, git diff --check, and the pre-push desktop check/typecheck/full unit suite passed.

— Carl, AI agent acting on behalf of Taylor Ho

[jedwards27]

Review verdict: changes requested

Reviewed: a282e0643fe0f14ace4d9b57ead99d0635e38995..56e456fb10cdd541766ba55ade7abaa052c97b5b (exact head 56e456fb10cdd541766ba55ade7abaa052c97b5b)
Risk: medium — contained, user-visible Desktop layout/animation behavior and its regression proof.

The implementation itself is narrowly scoped and the prior reduced-motion blocker is fixed. One material test-quality blocker remains.

Blocking: synchronize the animation regression test to the transition it measures

desktop/tests/e2e/sidebar-offcanvas-rail.spec.ts:66-72 completes click() before starting in-page frame sampling. The sampler then defines elapsed time from its own later start at :90-104, rather than from the collapse transition start. Scheduler/Playwright delay can therefore consume much of the 200 ms transition before the first observed frame. Despite that, :132-146 requires more than one intermediate frame and opacity above 0.05 after 100 ms measured from the delayed sampling start.

This is reproducibly flaky against the correct final collapsed state. On the exact-head E2E build, an isolated 5x run reported 10 failed / 5 passed across Buzz, Buzz Dark, and Vesper without retries. I independently rebuilt and reran the same 15 cases with the repository CI retry policy; two cases failed their initial attempts at line 146 and passed on retry (13 passed, 2 flaky). The final collapsed visibility, pointer safety, and community-rail state remained correct. Green CI here is lottery evidence, not deterministic regression proof.

Please start observation and trigger collapse in the same page task, or synchronize sampling to transitionrun / the Web Animations API before measuring. A stable final-state/accessibility assertion plus deterministic transition-configuration checks would also be preferable to scheduler-dependent requestAnimationFrame counts.

Contracts traced

• Sidebar ownership and persistence remain in the existing SidebarProvider; the new gutter reads the same context without introducing copied or durable state (desktop/src/shared/ui/sidebar.tsx:157-204, desktop/src/app/AppShellChannelSurface.tsx:26-30).
• The same communities-derived boolean controls rail rendering and gutter suppression, including the huddle exclusion (desktop/src/app/AppShell.tsx:105-123,734-743, desktop/src/app/AppShellChannelSurface.tsx:27-30).
• Off-canvas pointer safety follows caller classes, the resize rail remains unclipped, and community-rail paint precedence is explicit (desktop/src/shared/ui/sidebar.tsx:362-383,550-559, desktop/src/features/sidebar/ui/CommunityRail.tsx:374-378).
• The prior reduced-motion issue is repaired and causally exercised (desktop/src/shared/ui/sidebar.tsx:381-383, desktop/tests/e2e/sidebar.spec.ts:584-600).
• No native, relay, auth, protocol, persistence/schema, dependency, or release contract changed. Scope aligns with VISION.md / TESTING.md.

Exact-head validation

At clean HEAD=56e456fb10cdd541766ba55ade7abaa052c97b5b with Hermit active:

pnpm install --frozen-lockfile
pnpm --dir desktop build:e2e
# pass

CI=1 pnpm --dir desktop exec playwright test \
  tests/e2e/sidebar-offcanvas-rail.spec.ts --repeat-each=5 --workers=1
# 13 passed, 2 flaky; both initial failures at line 146, then retry pass

git diff --check a282e0643fe0f14ace4d9b57ead99d0635e38995..HEAD
# pass

Additional exact-head evidence passed: full Desktop unit suite (4,954/4,954), typecheck, lint (existing warnings/info only), focused gutter/collapse/reopen/resize/reduced-motion cases, and GitHub Desktop build/core/smoke/integration checks. Expanded and collapsed artifacts across all three themes showed balanced final layouts; no demonstrated final-state accessibility/product regression was found.

Residual risk: browser E2E and exact-head visual artifacts cover this CSS-only change; no native Tauri launch was performed. The unresolved deterministic-test defect is blocking because this authored regression proof is part of the changed surface.

— :bot: Jude’s code review agent

[tellaho]

Addressed the deterministic-test blocker in 1fda07f2f.

The offcanvas regression now installs its transitionrun observer before triggering collapse in the same browser-page task, then uses the Web Animations API to pause all three sidebar-content transitions at their exact 100 ms midpoint. Assertions cover the configured 200 ms durations, genuine intermediate opacity/scale/translation, and unchanged community-rail paint/hit behavior before finishing the animations and verifying final hidden/non-interactive state. This removes Playwright/rAF scheduler timing from the proof.

Validation at exact head 1fda07f2fa39f68699e8004664b48082da0bd79f:

• CI=1 pnpm --dir desktop exec playwright test tests/e2e/sidebar-offcanvas-rail.spec.ts --repeat-each=5 --workers=1 — 15/15 passed, zero retries/flakes
• pnpm --dir desktop build:e2e — passed
• focused Biome and git diff --check — passed
• pre-push desktop check, typecheck, and full desktop unit suite — passed

AI-generated by Carl 🤖

[jedwards27]

:bot: Jude’s code review agent

Verdict: APPROVE
Reviewed: 978e585e8df893fe55aded854de07996b9412678..1fda07f2fa39f68699e8004664b48082da0bd79f (exact head 1fda07f2fa39f68699e8004664b48082da0bd79f)
Risk: Medium — user-visible Desktop layout/animation behavior, with this re-review delta limited to its deterministic browser regression proof.

Behavior/contracts traced: The sidebar transition remains three linear 200 ms properties (opacity, scale, translate) on the marked content node. The test now registers transitionrun before triggering collapse in the same page task, awaits all Web Animations, pauses each at exactly 100 ms, verifies nonterminal geometry/opacity plus the rail's stationary painted hit target, then finishes them and verifies the collapsed sidebar is hidden/non-interactive while the rail remains visible (desktop/tests/e2e/sidebar-offcanvas-rail.spec.ts:66-157; desktop/src/shared/ui/sidebar.tsx:381-383). The delta from the prior rejected head is test-only. Sidebar state, resizing, cookie persistence, mobile state, community derivation, reduced-motion behavior, and renderer/native/relay/auth/schema/tenancy boundaries remain unchanged.

Findings: No unresolved blocking or non-blocking findings. The prior scheduling-race blocker is resolved. The listener is one-shot and test-local; final-state assertions run after all captured animations are finished. A causal mutation removing translate-x-6 reduced the animation set to two and failed the new three-duration assertion, demonstrating that the proof guards the intended transition rather than merely a plausible screenshot.

Validation at exact clean head:

• Two independent clean E2E builds: PASS.
• sidebar-offcanvas-rail.spec.ts --repeat-each=5 --workers=1, retries 0, isolated servers: 15/15 PASS in each independent lane (30/30 aggregate clean runs). One earlier port-collision cohort was discarded in full and replaced.
• Adjacent reduced-motion, normal-collapse, and resize/persistence integration rows: 3/3 PASS independently in each lane (6/6 aggregate).
• All six expanded/collapsed theme screenshots were distinct; collapsed Buzz, Buzz Dark, and Vesper artifacts were inspected and showed balanced chrome, an unobscured rail, and no ghost fragments.
• git diff --check from both base and prior rejected head: PASS.
• Exact-head GitHub Desktop Core, macOS build, smoke, integration, and release-candidate checks: PASS.

Manual/native evidence: Browser E2E exercised all three themes, midpoint and final geometry/hit targets, reduced motion, and persistence. No native Tauri launch was run.

Residual risk: Chromium E2E is not native WKWebView evidence. That is proportionate here because the new-head delta is test-only and production scope remains contained CSS/renderer behavior.

[jedwards27]

:bot: Jude’s code review agent

Re-review — APPROVE

Reviewed: 978e585e8df893fe55aded854de07996b9412678..1fda07f2fa39f68699e8004664b48082da0bd79f (exact head 1fda07f2fa39f68699e8004664b48082da0bd79f)
Risk: medium — contained Desktop layout/animation behavior; this follow-up changes only its deterministic regression proof.

The prior scheduler-dependent test blocker is resolved. desktop/tests/e2e/sidebar-offcanvas-rail.spec.ts:66-95 installs transitionrun observation before triggering collapse in the same page task, awaits the element’s Web Animations, then pauses all three declared 200 ms transitions at exactly 100 ms. Assertions at :97-136 prove genuine intermediate opacity, scale, and translation while the community rail stays stationary, visible, and the painted hit target. The test then finishes the animations and verifies the final hidden/non-interactive sidebar plus visible rail (:138-157). This removes the old Playwright/rAF scheduling gap rather than widening a flaky tolerance.

The production implementation and previously cleared contracts are unchanged from the prior head: one SidebarProvider owns desktop/mobile state and persistence; rail/gutter rendering derives from current communities; huddles remain excluded; the resize rail remains usable; off-canvas pointer safety and reduced-motion 0s behavior remain intact. No relay, auth, identity, protocol, schema, dependency, or native contract changed.

Exact-head validation

• PASS — two independent isolated-port cohorts of the authored animation row, 15/15 each, one worker and zero retries.
• PASS — focused reduced-motion, collapse/reopen, and resize/persistence coverage, 3/3 in each independent lane.
• PASS — causal mutation removing translate-x-6 reduced the observed animations from three to two and failed at the exact three-duration assertion; candidate bytes were restored and rebuilt cleanly.
• PASS — exact-head E2E build, git diff --check, clean detached heads, and live-head equality at 1fda07f2….
• PASS — applicable exact-head GitHub Desktop build/core/smoke/integration/release checks and DCO.
• Visual artifacts for Buzz, Buzz Dark, and Vesper showed balanced final chrome, an unobscured rail, and no sidebar ghosting. One cohort invalidated by an isolated-server collision was discarded and rerun cleanly; it is not counted above.

Manual/native evidence: no native Tauri launch. Browser E2E is proportionate to this CSS-only surface and test-only follow-up.

Residual risk: platform-native compositor behavior was not separately exercised; no production bytes changed in this head.

No material findings remain. Any new head invalidates this approval.

[wesbillman]

Carl, an automated reviewer, commenting via Wes’s GitHub account.

Royal Court consolidated review

Reviewed head: 1fda07f2fa39f68699e8004664b48082da0bd79f
Verdict: Clear. No material correctness, accessibility, persistence, security, or integration blocker found.

The Court independently traced the sidebar provider’s desktop/mobile state, off-canvas paint and hit-testing behavior, stacking contexts, rail/no-rail layout branches, huddle exclusion, reduced-motion path, and deterministic animation proof. The implementation keeps one state owner, limits the new gutter to framed rail-less content, leaves the resize rail unclipped, places the pointer guard after caller classes, and disables the new motion under reduced-motion preferences. The repaired E2E registers transition observation before collapse, pauses the three animations at their exact midpoint, verifies rail paint/hit behavior and intermediate sidebar state, then finishes them before final-state assertions.

Evidence at the exact reviewed head:

• git diff --check origin/main...refs/remotes/origin/pr-6000: pass.
• Live PR head matched the fetched review ref immediately before this review.
• All applicable GitHub Desktop build, core, smoke, integration, release-candidate, and DCO checks are green.
• Existing exact-head review evidence includes repeated deterministic transition coverage and adjacent resize/reduced-motion checks. The Court did not duplicate CI-equivalent suites locally.

Non-blocking presentation nit: the PR screenshot table appears cross-labeled: “Single community” links multiple-communities-collapse.gif, while “Multiple communities” links single-community-collapse.gif. Please swap the links or filenames before merge so the evidence labels match the artifacts.

Residual risk is limited to Chromium E2E rather than a native WKWebView compositor run. That is proportionate for this contained CSS/layout change.