fix(website): keep diagram top reachable when zoomed

[arnaudlh]

Summary

Fixes a UX bug in the Docusaurus docs site where, after clicking a Mermaid diagram to zoom in, the top of large diagrams is cropped and unreachable — the user can scroll down but cannot scroll back up to the title row.

Repro

1. Open any docs page with a tall Mermaid diagram (e.g. a workflow / architecture diagram).
2. Click the diagram to open the zoom modal.
3. Observe: the upper portion of the diagram is clipped behind the close button area, and no amount of scrolling can bring it into view.

Screenshot of the bug (top labels of the diagram are cut off):

Root cause

.mermaid-zoom-content in website/src/css/custom.css is a flex container with:

display: flex;
align-items: center;
justify-content: center;
overflow: auto;

When the SVG is larger than the flex container, plain center alignment shifts the item's start edge past the scroll container's origin (negative offset). The browser cannot scroll into negative space, so the top/left of the overflowing content is permanently inaccessible. This is a well-known CSS flexbox + overflow gotcha.

Fix

Use the CSS safe alignment keyword, which falls back to flex-start when the item overflows but still centers when it fits:

align-items: safe center;
justify-content: safe center;

• Small diagrams: still centered in the modal (no visible change).
• Large diagrams: anchored to the top-left so the entire diagram is reachable via scroll.

Browser support: Chrome 115+, Firefox 115+, Safari 16.4+ (covers all currently supported targets for the docs site).

Files changed

• website/src/css/custom.css — .mermaid-zoom-content block

Test plan

• Local visual check: zoom on a tall diagram, confirm top is reachable by scrolling.
• Local visual check: zoom on a small diagram, confirm it is still centered.
• Reviewer to verify on Chrome / Firefox / Safari.

cc @dawright22

[dawright22]

ok