[bug]: Mention overlay positioned incorrectly with multi-line text that have text wrapping

[deepan]

Describe the bug

When the text area contains multi-line text with text wrapping (lines that extend beyond the visible width and wrap to the next line), the mention overlay appears incorrectly positioned, typically appearing far above the actual cursor location. The positioning error seems to correlate with the amount of text wrapping in the lines preceding the cursor.

How to reproduce

1. Go to Mention component page in the docs site
2. Paste or type a long text into the mention text area (e.g. "This is a sample paragraph created specifically for testing multiline text behaviour in user interface components such as text areas, content editable elements, or text overlays. It includes enough words and natural sentence flow to wrap across multiple lines, making it useful for validating height auto-resize, line wrapping, scrolling, and cursor alignment behaviour")
3. Press Shift+Enter to add a new line character
4. Type the @ character to trigger the mention overlay
5. Observe that the mention overlay appears above the expected position

Link to reproduction

https://www.diceui.com/docs/components/mention

Additional information

Screen.Recording.2026-01-08.at.2.03.11.PM.mov