Center the content of the metabox

[enricobattocchi]

Context

• Provide a nicer user experience in the block editor when using wide screens

Summary

This PR can be summarized in the following changelog entry:

• Improves the look of the Yoast SEO metabox in the block editor by centering it and making it stand-out more with using a background color.

Relevant technical choices:

• Targeting some specific classes to try and make this only in the block-editor in pure CSS
• Removing min-height: 100% to prevent issues with display: flex
• Check for .closed ourselves because display: flex overrides the display: none
• Switched to not using display: flex, as the width became as wide as need, resulting in it jumping when you open/close sections

Test instructions

Test instructions for the acceptance test before the PR gets merged

This PR can be acceptance tested by following these steps:

• I enabled all our plugins to test the extra tabs in our metabox
• Edit a post in the block editor
• Verify our metabox is now centered
• Verify the background color is slate-100 (e.g. #f1f5f9, see https://tailwindcss.com/docs/customizing-colors)
• Verify the padding around the content of our metabox is 32px (24px + 8px for the left, right and bottom)
• Verify closing and opening sections in our metabox does not alter the width of it
• Verify hiding our whole metabox can be done
• Show another metabox: Options (top right 3 dots button) > Preferences (at the bottom) > General > Advanced > Enable something there (I had Custom fields there)
  
• Verify you can still re-order the metaboxes either by the buttons or by drag & drop
• Change the browser size:
  • ...to mobile size (or open the browser console/inspector and use the mobile mode)
  • Verify it still looks good/as expected
  • ...to large desktop size (or use the zoom feature of the inspector "mobile" mode)
  • Verify it still looks good/as expected
• Depending on whether you have one or two rows of metabox tabs:
  • Go to the Yoast Settings and enable or disable the inclusive language analysis
  • Disable some of our plugins if still two rows?
• Go back to the post edit
• Verify the width still does not change when closing and opening sections (try closing all)
• Edit a post in the classic editor (install and set it up so you can switch)
• Verify our metabox is unchanged
• Edit a term (i.e. classic editor)
• Verify our metabox is unchanged

Relevant test scenarios

• Changes should be tested with the browser console open
• Changes should be tested on different posts/pages/taxonomies/custom post types/custom taxonomies
• Changes should be tested on different editors (Default Block/Gutenberg/Classic/Elementor/other)
• Changes should be tested on different browsers
• Changes should be tested on multisite

Test instructions for QA when the code is in the RC

• QA should use the same steps as above.

QA can test this PR by following these steps:

Impact check

This PR affects the following parts of the plugin, which may require extra testing:

UI changes

• This PR changes the UI in the plugin. I have added the 'UI change' label to this PR.

Other environments

• This PR also affects Shopify. I have added a changelog entry starting with [shopify-seo], added test instructions for Shopify and attached the Shopify label to this PR.

Documentation

• I have written documentation for this change. For example, comments in the Relevant technical choices, comments in the code, documentation on Confluence / shared Google Drive / Yoast developer portal, or other.

Quality assurance

• I have tested this code to the best of my abilities.
• During testing, I had activated all plugins that Yoast SEO provides integrations for.
• I have added unit tests to verify the code works as intended.
• If any part of the code is behind a feature flag, my test instructions also cover cases where the feature flag is switched off.
• I have written this PR in accordance with my team's definition of done.
• I have checked that the base branch is correctly set.

Innovation

• No innovation project is applicable for this PR.
• This PR falls under an innovation project. I have attached the innovation label.
• I have added my hours to the WBSO document.

Fixes #21425

[enricobattocchi]

With the approval from @uxkai and @ux-tom , let's merge