From 8bbb2537062987211f24afbc9b0e48bc6e742cc3 Mon Sep 17 00:00:00 2001
From: Sreedhar Avvari <avvari.sreedhar@uipath.com>
Date: Sat, 13 Jun 2026 14:45:39 +0530
Subject: [PATCH] fix(apollo-react): clip loop node matte to remove corner gaps

The loop node draws its surface-overlay "matte" frame with a box-shadow
spread on the dashed drop-zone. A box-shadow's corner radius is
frameRadius + spread, which never matched the container's inner border
radius (rounded-[20px] minus the 1px border = 19px), so the canvas showed
through as gaps at the card's bottom corners and a wedge at the body
frame's top corners just below the header.

Wrap the header and body frame in an `overflow-hidden rounded-[19px]` clip
layer and enlarge the matte's box-shadow spread (10px -> 200px) so it
overflows everywhere and is trimmed to the card's exact inner rounded
edge. The header gets `relative z-10` (with `isolate` on the wrapper) so
its content paints above the larger matte shadow.

The dashed frame and header keep their original radii; the matte now hugs
the border at every corner with no gaps or wedge.
---
 .../canvas/components/LoopNode/LoopNode.tsx   | 34 +++++++++++--------
 1 file changed, 20 insertions(+), 14 deletions(-)

diff --git a/packages/apollo-react/src/canvas/components/LoopNode/LoopNode.tsx b/packages/apollo-react/src/canvas/components/LoopNode/LoopNode.tsx
index 3452d8f2a..aab2bcc79 100644
--- a/packages/apollo-react/src/canvas/components/LoopNode/LoopNode.tsx
+++ b/packages/apollo-react/src/canvas/components/LoopNode/LoopNode.tsx
@@ -392,6 +392,22 @@ function LoopNodeComponent(props: LoopNodeProps) {
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
     >
+      {/* Clip the surface-overlay matte to the card's inner edge so it never overshoots or
+          falls short at the corners. 19px = container rounded-[20px] - 1px border. */}
+      <div className="absolute inset-0 isolate flex flex-col overflow-hidden rounded-[19px]">
+        <Header
+          title={displayTitle}
+          icon={displayIcon}
+          loading={isLoading}
+          isParallel={isParallel}
+          label={label}
+          iterationPillState={iterationPillStateProp}
+          nodeWidth={containerWidth}
+          hasTopLeftAdornment={hasTopLeftAdornment}
+          hasTopRightAdornment={hasTopRightAdornment}
+        />
+        <BodyFrame isEmpty={showEmptyStateButton} isLoading={isLoading} />
+      </div>
       {ADORNMENT_SLOT_POSITIONS.map((slot) =>
         adornments?.[slot] ? (
           <BaseBadgeSlot key={slot} position={ADORNMENT_SLOT_SHAPES[slot]} shape="rectangle">
@@ -408,18 +424,6 @@ function LoopNodeComponent(props: LoopNodeProps) {
           onResizeEnd={handleResizeEnd}
         />
       ) : null}
-      <Header
-        title={displayTitle}
-        icon={displayIcon}
-        loading={isLoading}
-        isParallel={isParallel}
-        label={label}
-        iterationPillState={iterationPillStateProp}
-        nodeWidth={containerWidth}
-        hasTopLeftAdornment={hasTopLeftAdornment}
-        hasTopRightAdornment={hasTopRightAdornment}
-      />
-      <BodyFrame isEmpty={showEmptyStateButton} isLoading={isLoading} />
       {showEmptyStateButton ? (
         <div
           className={cn(
@@ -504,7 +508,7 @@ function Header({
   return (
     <div
       className={cn(
-        'flex shrink-0 cursor-grab items-center justify-between gap-2.5 rounded-t-[18px]',
+        'relative z-10 flex shrink-0 cursor-grab items-center justify-between gap-2.5 rounded-t-[18px]',
         '-mb-2.5 bg-surface-overlay px-3.5 pb-2.5 pt-2.5 text-foreground',
         'active:cursor-grabbing'
       )}
@@ -562,7 +566,9 @@ function BodyFrame({ isEmpty, isLoading }: { isEmpty?: boolean; isLoading?: bool
       data-empty={isEmpty ? 'true' : 'false'}
       className={cn(
         'relative m-2.5 flex flex-1 rounded-xl border-[1.5px] border-dashed border-border bg-transparent',
-        'shadow-[0_0_0_10px_var(--surface-overlay)]',
+        // Oversized spread on purpose: the parent rounded-[19px] clip layer (not this value)
+        // defines the matte's outer edge. Shrinking it back reintroduces the corner gaps.
+        'shadow-[0_0_0_200px_var(--surface-overlay)]',
         'pointer-events-none'
       )}
     >