fix(apollo-react): clip loop node matte to remove corner gaps

[SreedharAvvari]

Before / After

Validation overlay: matte (surface-overlay) → magenta, canvas/any gap → green, card border → gray.

Body-frame top corner wedge under the header (Issue 1):

Problem

The Loop node draws its surface-overlay "matte" (the solid frame around the dashed drop zone) with a box-shadow spread on the dashed frame. A box-shadow's corner radius is frameRadius + spread, which never matched the container's inner border radius (rounded-[20px] − 1px border = 19px). So the dotted canvas showed through as:

1. Gaps at the card's bottom corners — the band's corner (radius 12 + 10 = 22) is rounder than the card, so it falls short.
2. A wedge at the body-frame's top corners, just below the header, where the rounded band can't reach the side edge.

Radius-only tweaks can't fix both: the bottom needs a concentric radius while the top needs to be square — and squaring the dashed frame's top corners is itself a visible regression.

Fix

Let a clip define the matte's outer shape instead of the box-shadow's geometry:

• Wrap Header + BodyFrame in an absolute inset-0 isolate overflow-hidden rounded-[19px] clip layer (an exact copy of the card's inner edge).
• Enlarge the matte's box-shadow spread 10px → 200px so it overflows past the card edge everywhere; the clip trims it to the exact rounded shape.
• The shadow is outset, so the dashed frame's interior stays transparent → the drop zone still shows the canvas, and the dashed frame keeps its original rounded-xl.
• Header gets relative z-10 so its content paints above the larger matte shadow.

Net: the matte hugs the card's rounded edge at every corner with zero changes to the visible radii (rounded-t-[18px], rounded-xl unchanged).

Note: a giant spread like 9999px doesn't work — its corner radius clamps toward a circle and misses the rectangular corners. ~200px is the sweet spot.

Validation (Playwright)

• Pixel scan @4× DPR across all four corners + the left edge through the wedge zone: every line reads border → matte with no canvas between. Clean.
• High-contrast color overlay (matte → magenta, canvas → green) at up to 30×: matte hugs the border everywhere; green only appears outside the card and inside the drop zone (both correct).
• Adornments tested — forced badges at all four corners render on top and unclipped (they're container children outside the clip layer); header adornment padding intact.
• No regressions: handles (Start/Continue/Break/Success), resize indicators, selection outline, child nodes/edges, and the nested-loops story all render correctly; lint passes. Diff is purely structural (16 insertions / 14 deletions).

Test plan

• Storybook → Apollo React / Canvas / Components / Nodes / LoopNode → Default, and the nested/many-children stories
• Verify no canvas shows through at the card corners or under the header (zoom in)
• Verify the dashed drop zone corners are rounded
• Verify status/validation adornments still render at the corners

[github-actions]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (PT)
apollo-design	🟢 Ready	Preview, Logs	Jun 13, 2026, 02:50:41 AM
apollo-docs	🟢 Ready	Preview, Logs	Jun 13, 2026, 02:50:41 AM
apollo-landing	🟢 Ready	Preview, Logs	Jun 13, 2026, 02:50:41 AM
apollo-vertex	🟢 Ready	Preview, Logs	Jun 13, 2026, 02:50:41 AM

[github-actions]

Dependency License Review

• ✅ 1922 package(s) scanned
• ✅ No license issues found
• ⚠️ 2 package(s) excluded (see details below)

License distribution

License	Packages
MIT	1692
ISC	89
Apache-2.0	55
BSD-3-Clause	27
BSD-2-Clause	23
BlueOak-1.0.0	8
MPL-2.0	4
MIT-0	3
CC0-1.0	3
MIT OR Apache-2.0	2
(MIT OR Apache-2.0)	2
Unlicense	2
LGPL-3.0-or-later	1
Python-2.0	1
CC-BY-4.0	1
(MPL-2.0 OR Apache-2.0)	1
Unknown	1
Artistic-2.0	1
(WTFPL OR MIT)	1
(BSD-2-Clause OR MIT OR Apache-2.0)	1
CC-BY-3.0	1
0BSD	1
(MIT OR CC0-1.0)	1
MIT AND ISC	1

Excluded packages

Package	Version	License	Reason
@img/sharp-libvips-linux-x64	1.2.4	LGPL-3.0-or-later	LGPL pre-built binary, not linked
khroma	2.1.0	Unknown	MIT per GitHub repo, missing license field in package.json

[Copilot]

Pull request overview

Fixes a visual rendering artifact in LoopNode where the surface-overlay matte (previously drawn via a small box-shadow spread) didn’t match the card’s inner radius, causing canvas “gaps” at corners and a wedge under the header.

Changes:

• Adds an absolute, rounded, overflow-hidden clip layer matching the card’s inner edge, and moves Header + BodyFrame inside it.
• Increases the matte box-shadow spread on BodyFrame (10px → 200px) so the clip layer, not the shadow geometry, defines the final matte silhouette.
• Ensures header content paints above the enlarged matte by adding relative z-10 to the header container.