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.

vasantha deepika → made their first commit to this issue’s fork.

Let me check the pipeline issue and try to fix it.

This MR only includes CSS changes, but the failure seems to be caused by a JS functional test (JSWebAssertTest), which appears to be unrelated to this update.

I will investigate further and re-run the pipeline if needed. Will share findings shortly.

Additionally, I have increased the dropdown visibility by adjusting the --ck-toolbar-dropdown-max-width value from 90 to 95 to ensure the CKEditor 5 toolbar dropdown displays correctly.

The MR !8096 seems fine, but the pipeline is failing due to test-related files.

I'm attaching a patch generated from the MR [3328095-mr8096.patch] in case anyone needs it to proceed without being blocked, until the MR is merged.

The Needs Review Queue Bot → tested this issue. It fails the Drupal core commit checks. Therefore, this issue status is now "Needs work".

This does not mean that the patch necessarily needs to be re-rolled or the MR rebased. Read the Issue Summary, the issue tags and the latest discussion here to determine what needs to be done.

Consult the Drupal Contributor Guide → to find step-by-step guides for working with issues.