Wordpress/Gutenberg Sidebar squeezed to the right

Question

I am using gutenberg with wordpress and the sidebar where I can edit the blocks is squeezed to the right, making it impossible for me to edit it:

As you can see in the image, the sidebar is shown partially on the screen and I can´t move to the right.

Here are some things I tried:

1 - Work with another browser (Chrome and Edge). It did not work. 2 - Edditing the code in the plugin (Twenty Twenty), stylesheet in Gutenberg and Stackable plugin:

'mode' => 'edit'
//------------------------------------------------
// Admin CSS
//------------------------------------------------

add_action('admin_head', 'my_custom_fonts');

function my_custom_fonts() {
  echo 
  '<style>
    .wp-block {max-width: 900px;}
  </style>';
}

As explained in: https://support.advancedcustomfields.com/forums/topic/acf-blocks-cramped-in-right-sidebar-of-editor/

Nothing of these worked. Does anyone have a clue?

Tks

Answer 1

Try to overwrite the css box with this code:

.interface-complementary-area {
    width: 380px !important;
}

Or in your theme functions.php add this:

// Wider sidebar on gutenberg backend
function my_wider_sidebar() {
    echo 
    '<style>
        .interface-complementary-area{ width: 450px !important; }
    </style>';
}
add_action('admin_head', 'my_wider_sidebar');