Extended CKEditor 5 toolbar appears cropped when editing a section-block

Question

Anytime I try to edit a Layout Builder section-block with an expanded CKEditor 5, the toolbar is cropped.

This is probably a bug and may have to do with Right to Left languages like Hebrew or Arabic, but how to cope with that anyway?

These CSS codes work in console but not from a CSS file.

#drupal-off-canvas-wrapper {
    width: 600px !important;
}

#drupal-off-canvas-wrapper {
    display: none !important;
}

This JavaScript code works in console but not from a JS file.

window.setInterval( () => {
    if (window.location.href.includes('layout')) {
        document.querySelector('#drupal-off-canvas-wrapper').style.width = "600px";
    }
}, 1);

How to solve this problem or at least how to get the window to always be broader as I have tried with the CSS and JS?

Answer 1

A workaround that solves this problem is running the following code with a user script manager (such as Greasemonkey or Tampermonkey).

// ==UserScript==
// @name         Drupal Layout Builder Broadening
// @match        https://DOMAIN_NAME.TLD/*

// ==/UserScript==

window.setInterval(()=>{
    if (window.location.href.includes('layout')) {
        document.querySelector('#drupal-off-canvas-wrapper').style.width = "600px";
    }
}, 1);