Repository navigation
[Bug]: Zooming out a tall diagram cuts off its top: the compacted container still centers the full-height SVG #1041
Description
Archify version or commit
3.2.0 (release archify.zip, SHA-256 70e210265c59f24dcbdf2a502ff671104b5454e7ee7d3554aecd86bad32384f5). Same code on main @ 25cf370.
Installation method
Downloaded archify.zip
Diagram type
Generated viewer
Exact command
node bin/archify.mjs deliver sequence tall-sequence.json tall-sequence.html --quality showcase --json
# open tall-sequence.html at 1440x900, press Zoom out twice (50%)Minimal redacted JSON reproduction
Any diagram taller than the viewport, without meta.viewBox.
{
"schema_version": 1,
"diagram_type": "sequence",
"meta": {
"title": "Tall sequence zoom-out",
"output": "tall-sequence.html",
"quality_profile": "showcase"
},
"participants": [
{ "id": "client", "type": "external", "label": "Client" },
{ "id": "api", "type": "backend", "label": "API" },
{ "id": "db", "type": "database", "label": "DB" }
],
"messages": [
{ "from": "client", "to": "api", "y": 200, "label": "request" },
{ "from": "api", "to": "db", "y": 290, "label": "query" },
{ "from": "db", "to": "api", "y": 380, "label": "rows", "variant": "return" },
{ "from": "api", "to": "client", "y": 470, "label": "reply", "variant": "return" },
{ "from": "client", "to": "api", "y": 560, "label": "request" },
{ "from": "api", "to": "db", "y": 650, "label": "query" },
{ "from": "db", "to": "api", "y": 740, "label": "rows", "variant": "return" },
{ "from": "api", "to": "client", "y": 830, "label": "reply", "variant": "return" },
{ "from": "client", "to": "api", "y": 920, "label": "request" },
{ "from": "api", "to": "db", "y": 1010, "label": "query" },
{ "from": "db", "to": "api", "y": 1100, "label": "rows", "variant": "return" },
{ "from": "api", "to": "client", "y": 1190, "label": "reply", "variant": "return" }
]
}Validation receipt or exact error
deliver passes; this is a Viewer defect.
{
"ok": true,
"command": "deliver",
"type": "sequence",
"specification": { "sha256": "91d64073966091ddc2337deca36ed4919ce1aacec408cec4ce9946d6d8d13bca", "bytes": 1312 },
"validation": { "checksPassed": 9, "checkCount": 9, "compositionProfile": "showcase", "compositionStatus": "pass", "errors": 0, "warnings": 0 }
}Expected behavior
At 50% the whole diagram stays inside the frame, starting at its top.
Actual behavior
The top half is cut off at 50%: participants and the first messages are above the frame. At 25% the whole diagram is above the frame and only the legend is visible. Measured in Chrome at 1440x900 (getBoundingClientRect):
.diagram-container top / height |
svg top / height |
|
|---|---|---|
| 100% | 58 / 2019 | 67 / 1941 |
| 50% | 58 / 1049 | -418 / 971 |
| 25% | 58 / 824 | -530 / 485 (bottom at -45: nothing visible) |
50%, container set to align-items: flex-start |
58 / 1049 | 67 / 971 |
Cause: below 100%, syncPageFlow() (viewer-camera.js#L157-L169) shrinks the container to the scaled height, but the SVG keeps its unscaled layout box and viewer.css#L443-L447 centers it with align-items: center. The box overflows upward by half the difference, and transform-origin: 0 0 keeps the scaled drawing there.
Not #1000: that one is zoom-in clipping from clamp() / clipToViewport(); PR #1001 does not touch this path.
Supporting visual evidence
The repro at 50%: participants and the first messages are cut off above the frame.
At 25%: empty frame, only the legend.
Environment
Ubuntu 26.04.1 LTS, Node.js 24.21.0, Google Chrome 155.0.8059.39 (desktop and headless). Found on real diagrams; diagnosed and reproduced with Claude Code (Claude Opus 5.5).
Final checks
- I searched existing issues for the same problem.
- I removed access tokens, credentials, private repository contents, and personal or customer data.


Activity
BlueboxC commentedon Oct 21, 2026
We reproduced #1041 on our fork before the fix: at 75% zoom the SVG top was -175.5 px while its container started at 58 px.
We adapted @sx4im's PR #1051 in eff4efdd. The compacted ordinary page-flow box pins the SVG top. Our addition saves and restores the original inline
align-itemsvalue and priority, so a pre-existingcenter !importantsurvives reset, print, presentation and embed transitions. SVG layout dimensions and authored geometry remain unchanged.The real-Chrome regression is red before the correction and green at 75%, 50% and 25%, followed by reset and all mode-transition checks. Camera/Focus/Finder checks pass 37/37. The final complete suite passes 3,400 tests, and the updated installed Skill passes the tall-diagram, inline-priority restoration and contrast checks plus 24 export checks; all 213 managed hashes/modes match the package.
The adapted regression is in test/viewer-camera-browser.test.mjs. Existing generated user HTML is preserved; new generation uses the corrected Viewer.
BlueboxC
tt-a1i commentedon Oct 25, 2026
Completed on
devthrough #1051, integrated by #1102 at commit 10b4dd5. Original contribution history is retained.Zooming out tall diagrams preserves their visible top and restores original inline alignment across mode transitions.
The exact integrated candidate 98efbfc passed CI run 40177166414: 19 successful jobs, no failures, two deployment-only skips. Closing as completed in the development branch; this does not announce a release or a live installation.
fix(viewer): keep a tall diagram's top in frame when zooming out