Yoast metabox isn’t full width in Gutenberg editor

This is not a support thread. I created this thread so that anyone else who might encounter this issue can find the solution in the support forum.

I’m on WordPress 5.6, and to me, the Yoast SEO metabox doesn’t stretch horizontally all the way to the side. This is how it looks.

To solve this, you need to overwrite some CSS classes in a .css file that is being loaded in the admin area. To do that, you can add the following to your functions.php:

/**
 * Increases the width of Yoast SEO custom fields
 * in Gutenberg editor to full width.
 *
 * Kolja Nolte <[email protected]>
 */
add_action(
	'admin_footer',
	function () {
		if ( ! function_exists( 'wpseo_init' ) ) {
			return;
		}
		?>
		<style>
			.wpseo-metabox-content,
			.wpseo-meta-section,
			.wpseo-meta-section-react {
				max-width: 100%;
			}
		</style>
		<?php
	}
);

The end result looks like this.