fix(designer-ui): center code view find matches in viewport

[rllyy97]

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

Fixes #9327. In the code view (CodeMirror editor, used by both Standard and Consumption logic apps), pressing Ctrl+F and clicking Next revealed each match at the nearest viewport edge. In practice this landed matches at the very bottom of the visible window, forcing the user to scroll up a little after every result.

The fix configures the @codemirror/search extension's scrollToMatch option to center matches vertically when navigating search results:

search({ scrollToMatch: (range) => EditorView.scrollIntoView(range, { y: 'center' }) })

@codemirror/search (6.5.11) exposes this hook specifically for search navigation, so it only affects Find Next / Find Previous — not ordinary cursor movement or typing. This applies everywhere the shared CodeMirrorEditor (re-exported as MonacoEditor) is used, so it covers the code view for both logic app types and the merge/diff view.

Impact of Change

• Users: Find Next / Find Previous in the code view now centers the matched text in the viewport instead of pinning it to the bottom edge, removing the need to scroll on each result. Affects both Standard and Consumption code views.
• Developers: No API changes. One-line config addition to the shared editor's search() extension, plus a regression test.
• System: No new dependencies, no performance or architectural impact.

Test Plan

• Unit tests added/updated — new search test in CodeMirrorEditor.test.tsx asserts findNext dispatches a { y: 'center' } scroll effect (full suite 16/16 passing)
• E2E tests added/updated
• Manual testing completed — verified live in the Standalone code view: after Find Next the match lands at ~49% of the viewport height (measured match center === scroller center), confirming it is centered rather than at the bottom edge
• Tested in: Standalone designer (pnpm run start), biome check clean, tsc --noEmit (designer-ui) clean

Contributors

@rllyy97

Screenshots/Videos

Code view after Find Next — the active match (line 43) is centered in the editor viewport rather than pinned to the bottom edge.

[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(designer-ui): center code view find matches in viewport
• Issue: None — this is a clear, high-quality title that follows a conventional scope/type format and accurately describes the change.
• Recommendation: No change needed.

---

✅ Commit Type

• Properly selected (fix).
• Only one commit type is checked, which is correct.

---

✅ Risk Level

• The selected label/body alignment is correct: the PR is marked Low, and the repository label also shows risk:low.
• No mismatch detected.

---

✅ What & Why

• Current: Clear explanation of the user-facing issue, root cause, and behavior change.
• Issue: None — this is detailed enough and directly tied to the fix.
• Recommendation: No change needed.

---

✅ Impact of Change

• The section is well filled out and accurately describes user, developer, and system impact.
• Recommendation:
  • Users: Good as written.
  • Developers: Good as written.
  • System: Good as written.

---

✅ Test Plan

• Adequate test coverage is present in the diff: a unit test was added/updated in CodeMirrorEditor.test.tsx.
• Manual testing is also documented, but it is not required for pass/fail since unit tests exist.

---

✅ Contributors

• Contributor attribution is present (@rllyy97).
• No issue found.

---

⚠️ Screenshots/Videos

• Visual behavior changed, so including a screenshot or short video would be helpful, but it is not required for pass/fail.
• Recommendation: Add a screenshot or GIF showing the centered match in the editor viewport if available.

---

Summary Table

Section	Status	Recommendation
Title	✅	No change needed
Commit Type	✅	None
Risk Level	✅	None
What & Why	✅	No change needed
Impact of Change	✅	None
Test Plan	✅	No change needed
Contributors	✅	None
Screenshots/Videos	⚠️	Optional, but a screenshot/GIF would strengthen the PR

---

The PR passes review for title/body compliance. The advised risk level is unchanged from the submitter's estimate (low).

---

Last updated: Tue, 30 Jun 2026 01:34:36 GMT

[Copilot]

Pull request overview

Updates the shared CodeMirror-based code editor in designer-ui so that “Find Next” navigation (Ctrl+F → Next) scrolls the active match into the vertical center of the viewport, improving usability across code view scenarios that use this shared editor.

Changes:

• Configure @codemirror/search’s scrollToMatch to use EditorView.scrollIntoView(..., { y: 'center' }).
• Add an inline comment explaining the UX motivation for the non-default scroll behavior.

[github-actions]

📊 Coverage Check

The following changed files need attention:

⚠️ libs/designer-ui/src/lib/editor/codemirror/CodeMirrorEditor.tsx - 71% covered (needs improvement)

Please add tests for the uncovered files before merging.