fix(chat,layout): stop subpixel jitter under #topbar when reasoning is expanded

[tomekpanek]

Symptom

Scrolling chat with an assistant message's reasoning section (or any tool result inside <details>) expanded produces a visible 1–2 px vertical jitter on text under #topbar. Persists for the duration of smooth-scroll inertia, especially noticeable on Chrome/Edge on Windows with non-integer DPI scaling (125%/150%).

Diagnosis — two compounding causes

Verified during testing: neither fix alone eliminates the jitter; both are required.

Cause A — nested scroller (src/css/chat.css)

.msg-tool-result (the wrapper holding reasoning text and tool results inside <details>) had max-height: 250px; overflow-y: auto, making it a nested scroller inside .chat-messages. Each outer-page scroll frame triggered scroll-anchoring computations on the inner scroller; sub-pixel layout shifts cascaded into the compositor.

Cause B — backdrop-filter resampling (src/css/layout.css)

#topbar has backdrop-filter: blur(16px) over a semi-transparent background. During smooth-scroll inertia, the page behind the topbar shifts by sub-pixel offsets each frame. The backdrop resamples on every frame and on non-integer DPI the resampled output has slightly different anti-aliasing weights — visible as text-rendering churn directly below the header.

Confirmation

Runtime DevTools tests (each tested in isolation, then together):

// Test A — disables Cause A
document.querySelectorAll('.msg-tool-result').forEach(e => {
  e.style.maxHeight = 'none';
  e.style.overflow = 'visible';
});

// Test B — disables Cause B
document.getElementById('topbar').style.backdropFilter = 'none';

Result: A alone — still jitters. B alone — still jitters. A + B — jitter gone.

Pixel-diff of recorded scroll: ~1.1% of pixels change per frame, max ΔL = 3/255, with diff bands aligned with text baselines (anti-aliasing fingerprint, not codec noise).

Fix

Two changes, both required:

1. src/css/chat.css — remove max-height: 250px and overflow-y: auto from .msg-tool-result. Both reasoning and tool-result content already live inside <details> — the user opts in to expand; long content flows with the page, collapsing is the escape hatch.

2. src/css/layout.css — add transform: translateZ(0) and will-change: backdrop-filter to #topbar. Pins the topbar to its own GPU composition layer with a stable filtered texture instead of recompositing every sub-pixel scroll tick.

Verified by

End-to-end test on top of main (204e0e5, v3.6.0): repro session with expanded reasoning + flick-scroll no longer shows any jitter on text below the header. Glass effect intact. Reasoning content readable, just no internal scrollbar anymore.