fix(apollo-react): sticky note loop layering [MST-9649]

[SreedharAvvari]

Summary

This change fixes sticky note interactions when a sticky note is placed visually inside a loop container.

The fix keeps loop shells from stacking above sticky notes, and moves selected sticky-note controls into the viewport overlay layer so the toolbar and color picker remain clickable even when the note overlaps a selected loop, workflow nodes, or loop edges.

What changed

• Keeps loop container React Flow nodes behind sticky-note annotations by excluding loop containers from the hover z-index bump and lowering loop shell z-index.
• Portals the selected sticky note toolbar through NodeToolbar's node overlay support.
• Renders the sticky note color picker through NodeViewportOverlay and marks it nodrag nopan nowheel so color options remain interactive.
• Adds a single combined StickyNotesInLoopContainers Storybook scenario covering:
  • sticky note inside a selected nested loop
  • sticky note centered behind a base node and its label
  • sticky note crossed by a workflow edge
  • sticky note outside the loop as a control case

Demo

image.2026-05-18.at.9.57.04.PM.mov

Diagram

flowchart LR
  subgraph Before["Before"]
    SelectedLoopBefore["Selected loop shell"] -->|"stacked above"| StickyBefore["Sticky note"]
    SelectedLoopBefore -->|"blocked"| ToolbarBefore["Toolbar / color picker"]
  end

  subgraph After["After"]
    LoopShell["Loop shell"] -->|"kept below"| StickyBody["Sticky note body"]
    StickyBody -->|"selected"| OverlayLayer["Node viewport overlay"]
    OverlayLayer --> Toolbar["Toolbar"]
    OverlayLayer --> ColorPicker["Color picker"]
  end

Loading

User impact

Before this change, selecting a loop shell could leave the loop container stacked above a sticky note inside the loop body, making the sticky note difficult or impossible to select, edit, resize, drag, or use through its toolbar/color picker.

After this change, sticky notes remain usable when visually placed inside loop containers, while loop body hit-testing still works where the loop body is empty.

Validation

• Storybook validation with StickyNotesInLoopContainers
• Playwright screenshot checks for the combined loop/sticky-note scenario
• pnpm exec tsc -p tsconfig.json --noEmit

[Copilot]

Pull request overview

This PR improves sticky note usability when notes visually overlap loop containers by adjusting React Flow layering behavior and adding a Storybook regression scenario.

Changes:

• Portals sticky note toolbar/color picker affordances into the node overlay layer.
• Adjusts React Flow reset CSS to avoid selected loop containers covering sticky notes.
• Adds a LoopNode Storybook scenario and a longer-term layering proposal document.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.

File	Description
packages/apollo-react/src/canvas/styles/reactflow-reset.css	Updates hover/selected z-index rules for loop containers and sticky notes.
packages/apollo-react/src/canvas/components/StickyNoteNode/StickyNoteNode.tsx	Renders sticky note toolbar and color picker through overlay layers.
packages/apollo-react/src/canvas/components/LoopNode/LoopNode.stories.tsx	Adds sticky-note-inside-selected-loop regression story and ignores sticky notes in preview/add-node flows.
docs/plans/mst-9389-sticky-notes-loop-containers-node-layering-proposal.md	Documents a proposed deterministic canvas node layering model.

[Copilot]

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.

[github-actions]

Dependency License Review

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

License distribution

License	Packages
MIT	1787
ISC	103
Apache-2.0	62
BSD-3-Clause	29
BSD-2-Clause	24
Copyright 2022, UiPath, all rights reserved	9
BlueOak-1.0.0	8
MPL-2.0	4
MIT-0	3
Unknown	3
Unlicense	3
CC0-1.0	3
MIT OR Apache-2.0	2
(MIT OR Apache-2.0)	2
LGPL-3.0-or-later	1
Python-2.0	1
CC-BY-4.0	1
(MPL-2.0 OR Apache-2.0)	1
BSD	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
@uipath/apollo-angular-elements	5.89.0	Copyright 2022, UiPath, all rights reserved	UiPath first-party package
@uipath/apollo-core	4.35.1, 4.35.2	Copyright 2022, UiPath, all rights reserved	UiPath first-party package
@uipath/apollo-fonts	1.25.8	Copyright 2022, UiPath, all rights reserved	UiPath first-party package
@uipath/apollo-icons	1.33.7	Copyright 2022, UiPath, all rights reserved	UiPath first-party package
@uipath/apollo-mui5	2.31.26, 2.31.27	Copyright 2022, UiPath, all rights reserved	UiPath first-party package
@uipath/portal-shell	3.351.4	Copyright 2022, UiPath, all rights reserved	UiPath first-party package
@uipath/portal-shell-react	3.149.36	Copyright 2022, UiPath, all rights reserved	UiPath first-party package
@uipath/portal-shell-types	3.326.0	Copyright 2022, UiPath, all rights reserved	UiPath first-party package
@uipath/portal-shell-util	1.114.0	Copyright 2022, UiPath, all rights reserved	UiPath first-party package
@uipath/apollo-lab	25.12.0	Unknown	UiPath first-party package
@uipath/telemetry-client-web	5.1.0	Unknown	UiPath first-party package
khroma	2.1.0	Unknown	MIT per GitHub repo, missing license field in package.json
hyperx	2.5.4	BSD	BSD-2-Clause per LICENSE file, non-SPDX "BSD" in package.json

[Copilot]

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated no new comments.

[Copilot]

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated no new comments.