Skip to content

Commit be8b6f9

Browse files
committed
🤖 fix: wait for post-highlighting scroll RAF in CodeBlocks story
The CodeBlocks story was flaky because after Shiki highlighting completes, code block heights change which triggers the ResizeObserver in useAutoScroll to schedule a coalesced RAF scroll. Chromatic could capture the snapshot before this RAF completed. Add a double-RAF wait after verifying highlighting is done, matching the pattern used in useAutoScroll.performAutoScroll() and the expandAllBashTools helper. --- _Generated with `mux` • Model: `anthropic:claude-opus-4-5` • Thinking: `high`_
1 parent bb0c0b3 commit be8b6f9

File tree

2 files changed

+5
-0
lines changed

2 files changed

+5
-0
lines changed

docs/AGENTS.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,7 @@ Avoid mock-heavy tests that verify implementation details rather than behavior.
9090
- **Only** add full-app stories (`App.*.stories.tsx`). Do not add isolated component stories, even for small UI changes (they are not used/accepted in this repo).
9191
- Use play functions with `@storybook/test` utilities (`within`, `userEvent`, `waitFor`) to interact with the UI and set up the desired visual state. Do not add props to production components solely for storybook convenience.
9292
- Keep story data deterministic: avoid `Math.random()`, `Date.now()`, or other non-deterministic values in story setup. Pass explicit values when ordering or timing matters for visual stability.
93+
- **Scroll stabilization:** After async operations that change element sizes (Shiki highlighting, Mermaid rendering, tool expansion), wait for `useAutoScroll`'s ResizeObserver RAF to complete. Use double-RAF: `await new Promise(r => requestAnimationFrame(() => requestAnimationFrame(r)))`.
9394

9495
### TDD Expectations
9596

src/browser/stories/App.markdown.stories.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -262,6 +262,10 @@ export const CodeBlocks: AppStory = {
262262
{ timeout: 5000 }
263263
);
264264

265+
// Highlighting changes code block height, triggering ResizeObserver → coalesced RAF scroll.
266+
// Wait 2 RAFs: one for the coalesced scroll to fire, one for layout to settle.
267+
await new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(r)));
268+
265269
const url = "https://github.com/coder/mux/pull/new/chat-autocomplete-b24r";
266270
const container = await waitFor(
267271
() => {

0 commit comments

Comments
 (0)