Overflow toolbar hidden by vertical tabs

Hi
I encountered a similar issue. If you don't need the dropdown, you can add a wrapping button, as shown in the pic.

After adding

However, if you do need the dropdown, you can resolve the overflow issue by adding the following CSS code:

.ck.ck-toolbar-dropdown>.ck-dropdown__panel {
width: 100% !important;
}
.ck.ck-dropdown {
position: unset !important;
}
.ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_sw {
top: 38px !important;
}

Adding that code via ckeditor5-stylesheets does indeed seem to solve the problem -- thanks!

nayana_mvr → changed the visibility of the branch 3475842-overflow-toolbar-hidden to hidden.

This issue exists in Drupal 11.x version. So as per the comment here https://www.drupal.org/project/drupal/issues/3471686#comment-15754893 🐛 CSS "form-item__label" inconsistent on node edit forms Needs review

Changes are made on on 11.x (our main development branch) first, and are then back ported as needed according to our policies.

changing the version to 11.x

I believe adding !important in code is not a good practice. There are inline styles used in ck editor, so it won't be easy to override them using css without !important unless we increase css selector specificity. I have tried a different approach by changing the max-width property value through js. Currently max-width of ck-dropdown__panel is always set to 60vw. I have added a code to dynamically change that value based on toolbar panel width. Some update in alignment may also require, but please check if this approach is useful.

I'm unable to add the remote repo for this issue in my local. Getting the below error. SO I have created a patch. Also, attaching before and after screenshots.

user/drupal11 % git remote add drupal-3475842 git@git.drupal.org:issue/drupal-3475842.git
git fetch drupal-3475842
error: remote drupal-3475842 already exists.
remote: 
remote: ========================================================================
remote: 
remote: A repository for this project does not exist yet.
remote: 
remote: ========================================================================
remote: 
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

I removed the custom stylesheet from my theme, and applied the patch from #7, and the result looks good to me!

Fixes should be in MRs not patches.

Issue summary also appears to be incomplete.

issue summary still appears incomplete.

Fixed pipeline issues and updated Issue summary. Please review.

Can someone verify how this behaves in layout builder basic block.

This is how it looks like in layout builder basic block.

Believe that should work.

some simplification on the code needed. looks good otherwise.
We're going to need some tests to make sure a ckeditor update doesn't break this. See core/modules/ckeditor5/tests/src/Nightwatch/Tests/ckEditor5EditorHeightTest.js for an example on how to do.