CKEditor toolbar display issue when using 'Show more items' button and dropdown icons

[rogerdawkins]

Description

If there are too many items to display in a CKEditor toolbar a vertical three dots 'Show more items' button is displayed. When the button is clicked another popout toolbar is displayed. If the popout toolbar contains any dropdown buttons such as Table, Bulleted List, New Entry, etc the layout fails when the user attempts to dropdown the list. The dropdown items are contained within the dimensions of the popout toolbar making the buttons unusable.

Steps to reproduce

1. Create a CKEditor config with quite a few toolbar icons, including dropdown fields such as New Entry, Bulleted List, etc. Place a dropdown item towards the right hand end.
2. When entering data using the CKEditor field ensure the editor window is quite narrow so that the 'Show more icons' button is displayed.
3. Click the Show more icons button
4. Use any dropdown icon and you will see the issue

Image above shows the initial popout toolbar.

Image above shows the display once a dropdown button is clicked. In this case the New Block button but it fails with all.

I tried the above on a Mac using Chrome, Firefox and Safari with similar results.

Additional info

• Craft version: 5.4.1

• PHP version: 8.2.22

• Database driver & version: MySQL 8.0.36

• Plugins & versions:

[i-just]

Hi, thanks for reporting! I raised a PR for this.

[brandonkelly]

CKEditor 3.10.0 and 4.3.0 are out with a fix for this. Thanks again!