Mention suggestions dropdown overflows viewport on mobile screen sizes

[Olexandr25]

📝 Provide detailed reproduction steps (if any)

1. Open https://ckeditor.com/docs/ckeditor5/latest/examples/framework/chat-with-mentions.html
2. Resize browser to mobile width (~390px) or open on a real mobile device
3. Click into the editor and type @
4. Observe the mention suggestions dropdown position

✔️ Expected result

The dropdown should stay within the visible viewport bounds and not overflow outside the screen.

❌ Actual result

The mention suggestions dropdown partially overflows outside the viewport —
the list extends beyond the screen edge, cutting off suggestion items and
making them unreachable without scrolling.

❓ Possible solution

The dropdown position should be recalculated when it would overflow the viewport,
flipping or repositioning it to stay within visible bounds (similar to how
most tooltip/popover libraries handle edge collision).

📃 Other details

• Browser: Safari / Chrome
• OS: iOS
• First affected CKEditor version: 48.1.1
• Installed CKEditor plugins: Mentions (ckeditor5-premium-features 48.1.1)

🎥 Screen recording

Google.Chrome.-.19.May.2026.mp4