Special characters dropdown stretches the editor container in specific cases

[mabryl]

📝 Provide detailed reproduction steps (if any)

1. Place the editor in a div with a limited width
2. Open the Special characters dropdown

✔️ Expected result

The Special characters dropdown should open within the bounds of the div that holds the editor.

The end goal here would be to prevent the dropdown from extending past the editable area when the viewport can technically still accommodate the dropdown.

❌ Actual result

The div that holds the editor seems to be getting stretched and the dropdown appears outside of the editable area:

Here's a recording of the issue appearing in a customer's demo:

Screen.Recording.2024-05-08.at.15.44.52.mov

❓ Possible solution

Possibly related to #5514 but changing the overflow property for the div doesn't seem to have any effect on this particular dropdown.

📃 Other details

• Browser: cross-browser
• OS: cross-OS
• First affected CKEditor version: N/A
• Installed CKEditor plugins: SpecialCharacters

---

If you'd like to see this fixed sooner, add a 👍 reaction to this post.