[LawrenceYoong]

The pan and zoom added in b256a8f never worked in a real browser, and there were two separate faults.

1. The running office served a build from before the feature. dist/public was built 2026-11-07 23:22; b256a8f landed 01:25. The served ask-*.js had controlIconsEnabled=0, so no controls and no viewport group ever appeared in the DOM.

2. Once rebuilt, the frame had no height. svg-pan-zoom deliberately removes the svg viewBox (svg-pan-zoom.js line 282). Mermaid sets width="100%" and no height, so with the viewBox gone the svg fell back to the CSS default replaced-element height of 150px. The diagram was scaled to fit but clipped to its top 150px, and the control icons — positioned from the pre-removal 746×393 box — were painted outside the svg, where clicks could not reach them.

This PR sizes the figure into a real viewport (height: clamp(180px, 38vh, 480px)), lets the svg fill it, drops Mermaid's natural-width max-width cap, and turns on contain so panning cannot drag the diagram out of view.

Verified in headless Chrome against the live office (docs/roadmap/architecture.md, 2177×1134 natural, and docs/manual/T03-transfer.md, 877×371):

check	result
controls inside the svg box, hit-tested	yes
zoom-in button	transform 0.2748 → 0.3023
zoom-out button	back to 0.2748
reset	restores the fitted view
mouse-wheel zoom	transform changes
drag pan	transform changes
whole diagram visible at rest	scale = min(746/2193, 316/1150)

npm run typecheck passes. npm test has one failure, tests/repos.test.ts "O opens a pull request in each repository" — it fails identically on plain origin/main (checked by stashing this change), so it is pre-existing and unrelated.