Keep document scrolling over embedded diagrams and code peeks

[ketan0]

Scrolling a review document with the wheel or trackpad now keeps scrolling the document when the pointer passes over an embedded diagram or code peek. Before, React Flow, Monaco or the diagram's own overflow took the gesture.

Changes

• packages/review/app/src/document-embed-scroll.ts: a capture-phase wheel listener on the review region.

  • It handles wheel events over sequence diagrams, flow diagrams, database lenses and code peeks inside the document, and scrolls the document instead.
  • Trackpad deltas are passed through, and line/page deltas from a mouse are converted to pixels.
  • Ctrl+wheel (zoom) is left alone.
  • Embedded content still scrolls with its own scrollbars.

• styles.css: sequence diagrams and database lenses get explicit, draggable scrollbars. They show only on an axis that overflows and stay visible on macOS.

• Code peek and diff scrollbars start below the file header (Code OSS fork):

  • a new verticalScrollbarTopInset scrollable-element option (scrollableElementOptions.ts, scrollableElement.ts, scrollbarState.ts, verticalScrollbar.ts);
  • a scrollbarBelowResourceHeader flag in the multi-diff editor factory;
  • the multi-diff widget passes MULTI_DIFF_RESOURCE_HEADER_HEIGHT.

  Before this, the vertical scrollbar ran over the sticky orders.ts-style header.

Testing

document-embed-scroll.browser.test.ts covers:

• routing the wheel to the document over each embed type (sequence diagram, flow diagram, database lens, code peek);
• converting line and page wheel deltas;
• leaving fullscreen tours and pinch-to-zoom alone;
• continuing to scroll the document when an embed fits;
• removing the handler on cleanup.

The scrollbar inset is a layout change with no automated test.

🤖 Generated with Claude Code