Skip to content

Diagram shell: tall diagram overflows its container and overlaps the figure caption #1546

Description

@FNDEVVE

What happened?

Summary

A tall flowchart rendered in the diagram shell overflows the bottom of its
container: the lowest node paints over the Figure N caption below the
diagram. The top of the diagram is contained correctly — only the bottom
overflows.

Expected

The rendered diagram is clipped/confined to the diagram viewport at any zoom,
and the figure caption below it is always fully legible.

Actual

At 143% — custom zoom, the bottom node overlaps the caption line
making both the node label and the caption unreadable where they intersect.
The vertical red arrow in the screenshot marks the overflow span: top nodes
sit correctly inside the card, the bottom node does not.

Steps to reproduce

  1. Render a tall multi-row flowchart (graph TD, ELK layout) in the diagram
    shell with a Figure N caption below the viewport.
  2. Zoom in past fit (buttons, Ctrl/Cmd + wheel, or pinch) to a custom zoom
    where the rendered diagram height exceeds the shell height
    (screenshot shows 143%).
  3. Observe the bottom of the diagram painting over the caption text.

Screenshot

Image

Environment

  • Template: diagram shell (mermaid-flowchart.html family) with - / + / Reset / Expand controls and bottom-left zoom label
  • Mermaid 11, ELK layout
  • Browser / OS: Chromium, Plannotator 0.27.15 (screenshot taken on macOS)

Notes

Looks like a viewport/canvas height accounting issue at custom zoom: once the
scaled diagram is taller than the laid-out viewport, the excess paints past the
container bottom instead of being clipped or panned within it, and since the
caption sits in normal flow directly below, it gets covered. The top edge does
not exhibit the same problem.

Plannotator version

0.27.15

OS

macOS

Agent

Other

Where did it happen?

Annotate

Activity

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