Skip to content

[Bug]: Zooming out a tall diagram cuts off its top: the compacted container still centers the full-height SVG #1041

Closed

Description

@francogalera

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.

Tall sequence at 50%, top cut off

At 25%: empty frame, only the legend.

Tall sequence at 25%, nothing visible

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

  1. BlueboxC commented on Oct 21, 2026

    @BlueboxC

    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-items value and priority, so a pre-existing center !important survives 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

  2. tt-a1i commented on Oct 25, 2026

    @tt-a1i
    Owner

    Completed on dev through #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.

  3. added a commit that references this issue on Oct 25, 2026
    08fd04b
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions