CKEditor 5 toolbar overflow can become unusable in Off canvas

The solution of remove dropdown of extra tools in CKEditor is providing by CKEditor and it is "Button divider". It will break the CKEditor toolbar in next line.

How to use?

1. Edit preferred "Text Format". Mostly using Full-HTML.
2. Navigate to "Toolbar configuration"
3. Find the "button divider" at the right-top of the active-toolbar. There are two types of button dividers. 1. Divider 2. Wrapper
4. Drage the wrapper divider and place it on the active toolbar where the next line will be starting.

Moving to active as there is nothing to review

#9 seems to describe building a text editor to be narrow and only have a few buttons each line vs responsive, which I believe was the discussion before.

Correct me if I'm wrong.

tried #6 but didn't seem to work for me.

Found the css causing the issue. It's from ckeditor5. It's applying width: max-content.

I'm overriding that and seems to work but sure it's not ideal. Thoughts?

I was already experiencing this on a site with Layout Builder + CKEditor 4 and my workaround was to just widen the LB sidebar flyout. The edge of the flyout is drag-enabled in some contexts, (but I did notice unfortunately not all contexts, though I cannot now remember where it was set to a fixed width). IMHO, the flyout should almost always be wider especially on larger screens. If you're editing a block in an LB page, there is not much use to still need to be able to view the entire layout builder, so it could easily be a flyout that overlays the main page content.

I think this is a legit bug, but the workaround to get this behaving as it did in CKE4 is mentioned in #9. Just add the "wrapping" button divider anywhere in the toolbar (even as the last item). That will prevent CKE5 from trying to render everything on one completely.

Thanks to #9 and #16, I can confirm that adding the "wrap"-item even as the last item on the bar is a solid workaround until a permanent fix can be provided.
It wraps the excessive items neatly on a second row (as was the behaviour in CKEditor4 if I'm not mistaken).

Redwan Jamous → made their first commit to this issue’s fork.

Created a MR that fixes the issue using CSS container queries.
The --ck-toolbar-dropdown-max-width variable will be set to 90% of the editor's width instead of 60% of the viewport's width.

Adding a patch file to use with composer...

Redwan Jamous → changed the visibility of the branch 3328095-ckeditor-5-toolbar to hidden.

Redwan Jamous → changed the visibility of the branch 11.x to hidden.

If a new solution is being proposed issue summary should match.

Also before/after screenshots need to be added to the issue summary.

Thank you, @smustgrave! I'm updating the issue summary...

Unfortunately, the previous fix doesn't work well while source editing mode in CKEditor is active.

To overcome the issue, the container can be the parent element (.ck.ck-editor) instead of .ck.ck-editor__top.

However, changing the css from:

.ck.ck-editor__top {
  container-type: inline-size;
  container-name: ck-editor;
}

@container ck-editor (width > 0) {
  .ck-dropdown__panel {
    --ck-toolbar-dropdown-max-width: 90cqw;
  }
}

To:

.ck.ck-editor {
  container-type: inline-size;
  container-name: ck-editor;
}

@container ck-editor (width > 0) {
  .ck-dropdown__panel {
    --ck-toolbar-dropdown-max-width: 90cqw;
  }
}

isn't enough because off-canvas reset (core/misc/dialog/off-canvas/css/reset.pcss.css) is applying all: revert; with higher specificity which will overwrite our container-type and container-name.

Adding .ck-editor to the list of elements excluded from the off-canvas reset rules would fix the issue, but I'm not sure about this change.

We currently have the following selector in off-canvas reset:

#drupal-off-canvas-wrapper *:where(:not(svg, svg *, .ck-reset *, [data-drupal-ck-style-fence] *, .ui-resizable-handle))

We're excluding all children elements of .ck-reset but not .ck-reset itself (unlike svg).

The new proposed selector:
#drupal-off-canvas-wrapper *:where(:not(svg, svg *, .ck-reset, .ck-reset *, [data-drupal-ck-style-fence] *, .ui-resizable-handle))

Also, CSS linting checks are failing because of the cqw unit, so I will be creating a separate issue to add container query units to the allowed units since they're now supported in all major browsers.

Thanks for updating. Appears to have some failures in MR.

Patch in #24 fixes this for me. Had the same problem but caused by the editor being setup within vertical tabs on the Claro theme which prevents overflow.

Tests are passing locally. Not sure what the problem is.