fix(templates): Fixing overlapping of callouts for v8 and v9 components

[preetriti1]

Commit Type

• feature - New functionality
• fix - Bug fix
• refactor - Code restructuring without behavior change
• perf - Performance improvement
• docs - Documentation update
• test - Test-related changes
• chore - Maintenance/tooling

Risk Level

• Low - Minor changes, limited scope
• Medium - Moderate changes, some user impact
• High - Major changes, significant user/system impact

What & Why

"What: Panels (QuickView/CreateWorkflow and template overview/single template views) now mount to a provided container (mountNode) so v8 callouts render correctly inside v9 panels.
Why: to prevent callouts/overlays from appearing underneath new panel layer structure and fix overlay/positioning issues.
TODO/Follow-up: The CreateWorkflow panel changing CSS on open (making it non-auto-dismissible) is tracked in ISSUE-#8903 and will be addressed separately (P2)."

Impact of Change

• Users: connection creation experience fixed in templates
• Developers: Update panel usage to mount to a node instead of free flowing to make sure v8 components work fine inside callouts
• System: Not much

Test Plan

• Unit tests added/updated
• E2E tests added/updated
• Manual testing completed
• Tested in:

Contributors

@Eric-B-Wu @rllyy97

Screenshots/Videos

[github-actions]

🤖 AI PR Validation Report

PR Review Results

Thank you for your submission! Here's detailed feedback on your PR title and body compliance:

✅ PR Title

• Current: fix(templates): Fixing overlapping of callouts for v8 and v9 components
• Issue: None — title is concise and follows conventional commit format. It clearly indicates this is a fix and the area impacted (templates / callouts).
• Recommendation: (Optional) You could make it slightly more specific about the solution (e.g., mention panels mounting to container / layer host) but this is not required.

---

✅ Commit Type

• Properly selected (fix).
• Note: Only one option is selected and it matches the change content.

---

✅ Risk Level

• The PR body selects Medium and the repo labels include risk:medium. These match.
• Advised risk (based on code changes): risk:medium. Rationale: the change updates panel mounting and overlay behavior across multiple UI components and modifies CSS positioning for drawers. This affects UI layering and could impact several user flows, but the change is scoped and includes many unit tests which reduce the residual risk.

---

✅ What & Why

• Current:
  "What: Panels (QuickView/CreateWorkflow and template overview/single template views) now mount to a provided container (mountNode) so v8 callouts render correctly inside v9 panels.\nWhy: to prevent callouts/overlays from appearing underneath new panel layer structure and fix overlay/positioning issues.\nTODO/Follow-up: The CreateWorkflow panel changing CSS on open (making it non-auto-dismissible) is tracked in ISSUE-Overlap panel changes to non-modal type panel and cannot be dismissed when moved to create connection #8903 and will be addressed separately (P2)."
• Issue: None — this is a clear and succinct explanation of the change and follow-ups.
• Recommendation: (Optional) Add a short note about the mountNode prop being required on the updated components (CreateWorkflowPanel, QuickViewPanel) so reviewers/consumers are aware of potential API surface change.

---

✅ Impact of Change

• The Impact section is present and sufficiently explains Users / Developers / System impact.
• Recommendation: Consider adding an explicit note for integrators that mountNode is now expected where panels are used, and document any upgrade guidance if relevant.
  • Users: Connection creation experience fixed in templates
  • Developers: Update panel usage to mount to a node instead of free flowing to make sure v8 components work fine inside callouts
  • System: Minimal

---

✅ Test Plan

• Assessment: Unit tests added/updated is selected and the diff shows many new/updated unit tests across template and panel test suites. Manual testing is also marked completed. There are no E2E tests added — that is acceptable here if the change is UI layering focused and covered by unit tests and manual validation.
• Recommendation: If possible, add a small E2E or integration test that validates panels+callouts overlay behavior in a rendered DOM environment (playwright / puppeteer / Cypress) to further reduce regression risk; otherwise the current unit tests are good.

---

✅ Contributors

• Contributors listed (@Eric-B-Wu @rllyy97). Good to credit contributors.

---

⚠️ Screenshots/Videos

• No screenshots/videos provided — acceptable for a code/behavior change. If you have a quick gif or screenshot showing the previous overlap vs fixed behavior, it would be helpful for reviewers and product/design stakeholders.

---

Summary Table

Section	Status	Recommendation
Title	✅	(Optional) make more specific about mounting if desired
Commit Type	✅	No change needed
Risk Level	✅	Matches advised risk (risk:medium)
What & Why	✅	Consider adding a short API note about mountNode
Impact of Change	✅	Add upgrade guidance for integrators if needed
Test Plan	✅	Consider an E2E integration test for overlay behavior
Contributors	✅	Good to credit contributors
Screenshots/Videos	⚠️	Optional: add screenshots/gif showing fix

---

Final notes and actionable recommendations

• This PR passes the title/body validation checks. The submitted risk level (Medium) matches my advised risk level (risk:medium).
• Please consider the following small improvements before merging:
  1. Document mountNode in the PR body (or changelog/README) as an API change: CreateWorkflowPanel and QuickViewPanel now accept a mountNode: HTMLElement | null prop. Note whether it is required or optional for consumers of these components.
  2. Verify there are no remaining call sites outside this PR that render these panels without a mountNode. The diff shows many call sites updated, but a final repo-wide check (or CI compile step) is recommended.
  3. Optional: add a brief E2E/integration test that confirms callouts render above the panel layer in a browser-like environment to prevent regressions. If adding an E2E test is not feasible now, add a short note in the PR explaining why (e.g., environment complexity) so reviewers understand the reasoning.
  4. (Optional) Add a short screenshot or gif to demonstrate the overlapping callout bug before vs after — helpful for maintainers and PMs.

Please update the PR description or add a short comment addressing the documentation of mountNode and whether it's required, then this can be merged. Thank you for the thorough tests and clear PR body!

---

Last updated: Mon, 09 Mar 2026 22:42:35 GMT

[Copilot]

Pull request overview

This PR fixes an overlay/stacking issue in the Templates UI where Fluent UI v8 components (dropdowns, callouts, comboboxes) were not properly displaying inside Fluent UI v9 panels. The fix mounts the v9 Drawer components into a specific container DOM node instead of the document body, using the mountNode prop, and adds position: 'fixed' to the drawer styles to ensure correct overlay behavior.

Changes:

• Added mountNode prop to QuickViewPanel and CreateWorkflowPanel, wrapping each usage in a position: relative container whose DOM node is passed as the mount target
• Changed outer wrapper from fragment (<>) to <div> in several view components to support proper DOM containment
• Added position: 'fixed' to both drawer style definitions to fix overlay positioning

Reviewed changes

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

Show a summary per file

File	Description
quickViewPanel.tsx	Added required mountNode: HTMLElement | null prop; passes it to the Fluent UI v9 Drawer; sets type={'overlay'}
quickViewPanel.styles.ts	Added position: 'fixed' to the drawer style
createWorkflowPanel.tsx	Added required mountNode: HTMLElement | null prop; passes it to the Fluent UI v9 Drawer; sets type={'overlay'}
createWorkflowPanel.styles.ts	Added position: 'fixed' to the drawer style
templateview.tsx	Wraps panels in a position: relative div with a useRef to supply mountNode; imports useRef
templateoverview.tsx	Same pattern as templateview.tsx; uses useRef for container div passed as mountNode
templatesfullgalleryview.tsx	Wraps QuickViewPanel/CreateWorkflowPanel in ref-tracked div; adds unused panelRef type to WorkflowView

[github-actions]

📊 Coverage Check

The following changed files need attention:

⚠️ libs/designer/src/lib/ui/panel/templatePanel/createWorkflowPanel/createWorkflowPanel.tsx - 78% covered (needs improvement)
⚠️ libs/designer/src/lib/ui/templates/templateoverview.tsx - 3% covered (needs improvement)
⚠️ libs/designer/src/lib/ui/templates/templateview.tsx - 9% covered (needs improvement)

Please add tests for the uncovered files before merging.