Keep tall diagrams reachable in the preview

[konojunya]

Background

Tall downward diagrams were centered inside the preview scroll container. When the rendered image exceeded the available height, flex centering placed its leading edge outside the reachable scroll origin, so the diagram appeared clipped.

Implementation Approach

• Give the preview scroll area an accessible region name.
• Move centering to auto margins on the SVG trigger so small diagrams stay centered while oversized diagrams start at the scroll origin.
• Remove height-based image constraints so tall diagrams fit the preview width and scroll vertically.
• Keep the empty state centered independently.

Testing Approach

• Added a focused component regression for the scroll container and safe-centering contract.
• Ran npm run format, npm run lint, npm test, and npm run build.
• Verified in Google Chrome at 320, 390, 1024, and 1440 CSS px.
• With a 1440x900 viewport, the supplied tall topology produced scrollHeight 1133 > clientHeight 768, started at scrollTop 0, reached the 365 maximum, and responded to Page Down while the preview trigger was focused.
• Confirmed a small diagram remains centered with equal horizontal and vertical margins and no page-level horizontal overflow.

Review Perspectives / Points of Concern

• The trigger retains max-width: 100% so wide diagrams continue to fit the pane.
• The expanded dialog remains unchanged and keeps its independent two-axis scroll behavior.

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Preview URL	Updated (UTC)
✅ Deployment successful! View logs	stack-web	8154ff2	Commit Preview URL Branch Preview URL	Sep 06 2026, 04:44 AM