fix(mobile): Android sidebar and composer transitions no longer reflow at rest#33599

Problem

On wide Android (measured on a Galaxy Z Fold, inner display), the split workspace stutters in ways that aren't CPU-bound. They come from the order things happen in:

• Sidebar open: the detail pane stays full width during the slide, clipped at the right edge. It only rewraps after the slide stops, about 75 ms later, in one visible frame.
• Composer focus: the composer moves first. The pane then goes wide, and the header only goes compact about 166 ms later in a second whole-tree render, while the sidebar is already leaving.
• Composer blur: like sidebar open, the pane stays wide and clipped until the keyboard is fully gone, then rewraps at rest.
• Keyboard while scrolled into history: every keyboard open and close re-wrapped every message twice, because the sidebar left for the keyboard and the pane went from 581 to 921 dp wide and back. The feed reflowed and landed somewhere different each time, and after closing the native scroll position sometimes kept drifting while the rows settled.
• Every sidebar toggle re-rendered every screen that read the workspace context (about 32 files), because one context value mixed stable actions with flags that change on every toggle.

Cause

• The strip kept the wide pane until withTiming finished, then reported back through runOnJS(markSidebarSettled) and a React render. That made the rewrap land after the motion.
• composerKeyboardActive went through useDeferredValue, so the compact header and the sidebar's exit came in a later commit than the keyboard's first one.
• On blur, the pane stayed wide until the keyboard's didHide (useKeyboardState().isVisible), not willHide.
• The keyboard took the sidebar's width: keyboardHoldsSidebar slid the sidebar out with keyboard progress and gave the pane its space, so the feed's width depended on the keyboard.

Change

Android split strip only. The iOS native columns and iPad split code paths don't change.

• The pane takes its new width in the commit that toggles the sidebar. On open it rewraps narrow as the slide starts, and the sidebar slides into the gap. On hide it goes wide, as before. The settled-open state and the runOnJS(markSidebarSettled) round trip are gone.

• The sidebar stays put while the keyboard is up (maintainer's call). No pane changes width for the keyboard, so nothing re-wraps when the composer focuses or blurs. The keyboard-holds-sidebar machinery is removed: the keyboard-progress sidebar width, the card overhang that covered the slide, the keyboard dismiss on sidebar toggle and reveal, and keyboardHoldsSidebar in the pane state. The floating tab bar now hides for any soft keyboard.

• The thread header keeps its height while typing. The keyboard-compact header (one row with the subtitle inline while the composer had the keyboard) is removed. It only ever applied in Android split view, saved about 4 px, and shifted everything below it on every keyboard open and close. Removed with it: the compact prop and its inline-subtitle branch in the Android app bar, the single-line toolbar height, and composerKeyboardActive plus the composer-editing flag that only fed it.

• The workspace context is split in two:

  • AdaptiveWorkspaceContext (useAdaptiveWorkspaceLayout) holds layout plus actions that keep the same identity across renders.
  • WorkspacePaneStateContext (useWorkspacePaneState) holds panes, fileInspector, the keyboard flags and the search query.

  Consumers read the one they need. ThreadRouteScreen no longer re-renders the whole thread screen on a sidebar toggle; only its inspector preview reads pane state.

Not done: starting the slide in the press handler. I tried it and measured it. The slide's first frame came ~20–30 ms after the tap, but the large React commit that rewraps the pane then landed 270–326 ms after the tap in 3 of 4 traced runs, after the slide had already ended. The animation commits the shadow tree every frame, and with DISABLE_COMMIT_PAUSING_MECHANISM: true in apps/mobile/package.json that starves a big React commit until the animation stops. The result was the same clipped hold plus a reflow at rest that this PR removes. So the slide still starts after the commit, and a comment at the effect says why. Turning commit pausing back on is a native change and a possible follow-up.

Interaction with ThreadFeed: the feed's end position after keyboard and sidebar changes is fixed in #33611, which is stacked on this PR.

Verification

Physical Galaxy Z Fold (RFGL90GJGME), inner display, dev client with --no-dev --minify Metro. Screen recordings are at 120 Hz with frames emitted only on change. Before is main at ff7aa5ace31. Perfetto traces were taken of the dev package.

Sidebar open (top: main, bottom: this PR): sidebar open

The composer focus and blur captures below predate the sidebar-stays change and show the earlier sequencing.

Composer focus (top: main, bottom: this PR): composer focus

Composer blur (top: main, bottom: this PR): composer blur

Recordings: hide, show, composer focus, then blur.

• Before (main): https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/437f4eab5b867db1/before-main.mp4
• After: https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/f043cb9ba9221860/after.mp4

Keyboard while scrolled into history (Fold, seeded thread, run 1 of 3 identical runs: in history, keyboard open, after a press on the feed). Top: before (sidebar leaves and every paragraph re-wraps from 4 lines to 3). Bottom: now (sidebar stays and the wrapping doesn't change). Sidebar titles are blurred.

keyboard mid-history

Logged feed width per cycle: before 581 → 921 → 581 every time; now 581 throughout, with no re-measure and no end-following interrupt. Offset after the press in three runs: 3594, 3594, 3594.

• Before: https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/5dfcdb62529a2b6f/fold-mid-before-b.mp4
• After: https://gh-file-drop-api-prod-mi5fy3sowv63ufte.pinglabs.workers.dev/f/9d160918f0e2da76/fold-mid-after-b.mp4

Thread header with the keyboard down and up. On the unfolded Fold (top: keyboard down, bottom: keyboard up), the title and subtitle measure the same in both states (title y=124 h=67, subtitle y=191 h=43), and the card's top edge doesn't move:

Fold header

Phone width (the Fold emulator folded, 1080 px): the header stays two rows with the keyboard up (title y=173, subtitle y=232 in both states), and the composer and last reply sit above the keyboard:

phone header

Surfaces checked:

• Android split strip: verified on device.
• Android medium and floating sidebar: the code paths are unchanged apart from the context split.
• iOS (phone, iPad, Duo native columns): only the context split applies. Typecheck and the React compiler pass.
• No UI tests, per AGENTS.md: these are visual sequencing changes, and the recordings are the proof.

vp run check:changed passes.

Implemented with Claude Opus 5.5 in Claude Code.

🤖 Generated with Claude Code