fix: align code selection menu with selection across editors

[ML-dev-crypto]

Closes #865

Problem

The code selection menu was not correctly aligned with selected text, especially in the JSON editor. The horizontal position was constrained and did not reflect the actual selection position.

Changes

• Replaced hardcoded X positioning with position.x
• Used getBoundingClientRect() to convert editor-local coords to viewport coords in the fallback branch
• Added early return if getDomNode() returns null
• Improved multi-line selection handling

Testing

• Verified menu alignment in TemplateMark editor
• Verified menu alignment in JSON editor
• Tested multi-line selections

Author Checklist

• DCO sign-off provided (--signoff)
• Commit messages follow AP conventional commits format
• No documentation changes required
• Merging to main from ML-dev-crypto:fix/code-selection-menu-position

[netlify]

✅ Deploy Preview for ap-template-playground ready!

Name	Link
🔨 Latest commit	c77844c
🔍 Latest deploy log	https://app.netlify.com/projects/ap-template-playground/deploys/69ce8b232db89e0008a6fc3e
😎 Deploy Preview	https://deploy-preview-866--ap-template-playground.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[Copilot]

Pull request overview

This PR fixes the CodeSelectionMenu placement so it follows the actual text selection position (X/Y) across Monaco-based editors, addressing misalignment that was especially visible in the JSON editor.

Changes:

• Use position.x for the menu’s horizontal placement instead of a fixed X value.
• Update useCodeSelection to compute menu coordinates using editor selection start/end visible positions and editor container offsets.
• Improve multi-line selection handling by mixing start (X) and end (Y) selection coordinates.

[ML-dev-crypto]

Hi! @DianaLease any feedback

[ML-dev-crypto]

Hi! @mttrbrts any feedback..????

[mttrbrts]

Thanks @ML-dev-crypto! This is a clean fix for the code selection menu positioning.

Review Notes

• Good use of early return for null checks
• Fixed the dead code in fallback branch as noted
• Properly handles multi-line selections

One small suggestion: the magic number -40 in the Y calculation could benefit from a comment explaining what it represents (menu height offset?), but not blocking.

Ready for approval.

---

This comment was generated by AI on behalf of @mttrbrts.

[mttrbrts]

Thanks for working on this @ML-dev-crypto, but after testing I'm going to close this PR.

Issues Found

1. Menu still covers text — The core UX problem remains: the action menu overlays the selected text, making it hard to see what you've selected
2. Strange horizontal movement — When adjusting the selection left/right, the menu position behaves unexpectedly

For Future PRs

For UI/UX fixes like this, please include:

• Before/after screenshots or video showing the improvement
• Multiple test scenarios (different editors, selection sizes, edge cases)

This helps reviewers verify the fix works as intended before spending time on code review.

Feel free to open a new PR if you'd like to take another approach that addresses these issues.

---

This comment was generated by AI on behalf of @mttrbrts.

[ML-dev-crypto]

Thanks for the detailed feedback @mttrbrts this is really helpful.
I see the issues with the menu overlapping the selection and the unstable horizontal positioning. I’ll revisit the positioning logic to ensure the menu stays outside the selected region (likely anchoring relative to the selection bounds with a proper offset) and stabilise updates during drag.
I’ll validate this across editors and include before/after recordings in the next PR so the improvement is clear.