Skip to content

Fit animations to the board's reading width - #1507

Merged
milanb17 merged 1 commit into
mainfrom
mb/scene-fits-width
Nov 4, 2026
Merged

milanb17 merged 1 commit into
mainfrom
mb/scene-fits-width

Conversation

@milanb17

@milanb17 milanb17 commented Nov 4, 2026

Copy link
Copy Markdown
Contributor

What changed

  • Stage width floor. An animation's stage lays out at least 720px wide (STAGE_MIN_WIDTH), the board's reading width. On a full-size board it fits with no horizontal scroll; in a narrower block it keeps 720px and scrolls sideways instead of squeezing the drawing. Wider boards and fullscreen still give it more room, and fullscreen scales from at least 720px.
  • Scene gap gives way first. The column gap a row's link label opens (up to 160px) now shrinks back toward 48px when the columns would otherwise overflow. Cards keep their 140px minimum. The scene only overflows when even the normal gap can't fit, and the layout reruns on resize.
  • Labels avoid other lines. Label placement now treats every other visible arrow's line as an obstacle. A two-way link between the same cards is fanned 9px apart, and the outbound label used to sit on the return line.
  • Authoring instructions. animation.md tells agents to draw for a 720px stage with nothing past its right edge, and not to shrink the drawing for narrow windows.

Why

A three-column scene with long labels asked for about 778px. The board's column is about 755px at any window width, so the right column was cut off even in a wide window. In the same board, the "Import link" label had the return arrow running through it.

Testing

  • New browser tests: a three-column scene with long labels fits the block (fails on main), a link's label stays off the parallel return line (fails on main), and a small drawing in a 480px block gets a 720px stage that scrolls.
  • The six-column scroll test is reworded and no longer checks the label gap, which now gives way when the scene overflows.
  • The block and animation browser suites (109 tests) and the instruction node tests pass. Lint, format and typecheck pass.
  • Not yet checked in an isolated Desktop.

A three-column scene with link labels asked for about 778px while the
board's column is about 755px at any window width, so its right column
ran off the block. The stage now lays out at least 720px wide, the
board's reading width, and a narrower block scrolls it sideways rather
than squeezing it. Within that width a scene's label gap gives way
before its cards would overflow.

A link's label also avoids other arrows' lines: a parallel edge drawn
back between the same cards sat under the outbound label.

The authoring instructions ask agents to draw for a 720px stage.

Agent-Session: cbacb871-2558-4fe4-9272-77524bb21683
Agent-Session: ffed49d6-ca86-4940-b93c-e8eb7e0de440
Agent-Session: d7e3a290-82a4-4f66-9b3c-7a52a51add18
@milanb17
milanb17 merged commit 5651553 into main Nov 4, 2026
3 checks passed
@milanb17
milanb17 deleted the mb/scene-fits-width branch November 4, 2026 06:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants