Custom sidebar pannel is not taking full width

### Description

I have created a meta field for the post and want to create a select dropdown meta box on a single blog page using Gutenberg components but it's not taking the full width of the sidebar panel.


### Step-by-step reproduction instructions

1. register meta field for post.
```php
add_action( 'init', function() {
	register_post_meta( 'post', 'blog_date_info', array(
		'show_in_rest' => true,
		'single' => true,
		'type' => 'string',
		'default' => 'default',
	) );
} );
```

2. using Gutenberg `registerPlugin` create metabox for blog editor.

### unbuilt version of JS code
```js
/**
 * WordPress dependencies
 */
const { useSelect, useDispatch } = wp.data;
const { SelectControl } = wp.components;
const { PluginPostStatusInfo } = wp.editPost;
const { registerPlugin } = wp.plugins;
const { __ } = wp.i18n;

/**
 * Component to render the date selection dropdown.
 *
 * @return {JSX.Element} JSX Element
 */
const RenderBlogDateInfoMeta = () => {
	/**
	 * Get the current value of the blog_date_info meta field.
	 */
	const { blogDateInfo } = useSelect( ( select ) => {
		const meta = select( 'core/editor' ).getEditedPostAttribute( 'meta' );
		return {
			blogDateInfo: meta?.blog_date_info || 'default',
		};
	} );

	/**
	 * Dispatch the action to update the blog_date_info meta field.
	 */
	const { editPost } = useDispatch( 'core/editor' );
	const onDateInfoChange = ( newValue ) => {
		editPost( { meta: { blog_date_info: newValue } } );
	};

	return (
		<SelectControl
			label={ __( 'Display Date Format', 'features' ) }
			value={ blogDateInfo }
			options={ [
				{ label: __( 'Default', 'features' ), value: 'default' },
				{ label: __( 'Last updated on', 'features' ), value: 'updated' },
				{ label: __( 'Published on', 'features' ), value: 'published' },
			] }
			onChange={ onDateInfoChange }
		/>
	);
};

/**
 * Main component to render the PluginPostStatusInfo sidebar.
 *
 * @return {JSX.Element} JSX Element
 */
const BlogDateInfoSidebar = () => (
	<PluginPostStatusInfo>
		<RenderBlogDateInfoMeta />
	</PluginPostStatusInfo>
);

/**
 * Register the plugin to add the date selection sidebar.
 */
registerPlugin( 'blog-date-info-sidebar', {
	render: BlogDateInfoSidebar,
	icon: null,
} );
```

### built JS code

```js
(()=>{var e={686:()=>{var e=wp.data,t=e.useSelect,a=e.useDispatch,r=wp.components.SelectControl,o=wp.editPost.PluginPostStatusInfo,n=wp.plugins.registerPlugin,__=wp.i18n.__,l=function(){var e=t((function(e){var t=e("core/editor").getEditedPostAttribute("meta");return{blogDateInfo:(null==t?void 0:t.blog_date_info)||"default"}})).blogDateInfo,o=a("core/editor").editPost;return React.createElement(r,{label:__("Display Date Format","features"),value:e,options:[{label:__("Default","features"),value:"default"},{label:__("Last updated on","features"),value:"updated"},{label:__("Published on","features"),value:"published"}],onChange:function(e){o({meta:{blog_date_info:e}})}})};n("blog-date-info-sidebar",{render:function(){return React.createElement(o,null,React.createElement(l,null))},icon:null})}},t={};function a(r){var o=t[r];if(void 0!==o)return o.exports;var n=t[r]={exports:{}};return e[r](n,n.exports,a),n.exports}a.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return a.d(t,{a:t}),t},a.d=(e,t)=>{for(var r in t)a.o(t,r)&&!a.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},a.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),(()=>{"use strict";a(686)})()})();
```

3. Enqueue JS file

```php
add_action( 'enqueue_block_editor_assets', function(){
	wp_enqueue_script( 'date-info', plugin_dir_url( __FILE__ ) . 'test.js', array( 'wp-plugins', 'wp-edit-post', 'wp-element', 'wp-components', 'wp-data' ) );
} );
```

### Screenshots, screen recording, code snippet

_No response_

### Environment info

`
### wp-core ###

version: 6.6.2
site_language: en_US
user_language: en_US
timezone: +00:00
permalink: undefined
https_status: false
multisite: false
user_registration: 0
blog_public: 1
default_comment_status: open
environment_type: local
user_count: 2
dotorg_communication: true

### wp-paths-sizes ###

wordpress_path: /var/www/html
wordpress_size: loading...
uploads_path: /var/www/html/wp-content/uploads
uploads_size: loading...
themes_path: /var/www/html/wp-content/themes
themes_size: loading...
plugins_path: /var/www/html/wp-content/plugins
plugins_size: loading...
fonts_path: /var/www/html/wp-content/uploads/fonts
fonts_size: loading...
database_size: loading...
total_size: loading...

### wp-active-theme ###

name: Twenty Twenty-Five (twentytwentyfive)
version: 1.0
author: the WordPress team
author_website: https://wordpress.org
parent_theme: none
theme_features: core-block-patterns, post-thumbnails, responsive-embeds, editor-styles, html5, automatic-feed-links, widgets-block-editor, block-templates, post-formats, editor-style
theme_path: /var/www/html/wp-content/themes/twentytwentyfive
auto_update: Disabled

### wp-themes-inactive (15) ###

Emptytheme: version: 1.0, author: the WordPress team, Auto-updates disabled
Twenty Eleven: version: 4.7, author: the WordPress team, Auto-updates disabled
Twenty Fifteen: version: 3.8, author: the WordPress team, Auto-updates disabled
Twenty Fourteen: version: 4.0, author: the WordPress team, Auto-updates disabled
Twenty Nineteen: version: 2.9, author: the WordPress team, Auto-updates disabled
Twenty Seventeen: version: 3.7, author: the WordPress team, Auto-updates disabled
Twenty Sixteen: version: 3.3, author: the WordPress team, Auto-updates disabled
Twenty Ten: version: 4.2, author: the WordPress team, Auto-updates disabled
Twenty Thirteen: version: 4.2, author: the WordPress team, Auto-updates disabled
Twenty Twelve: version: 4.3, author: the WordPress team, Auto-updates disabled
Twenty Twenty: version: 2.7, author: the WordPress team, Auto-updates disabled
Twenty Twenty-Four: version: 1.2, author: the WordPress team, Auto-updates disabled
Twenty Twenty-One: version: 2.3, author: the WordPress team, Auto-updates disabled
Twenty Twenty-Three: version: 1.5, author: the WordPress team, Auto-updates disabled
Twenty Twenty-Two: version: 1.8, author: the WordPress team, Auto-updates disabled

### wp-plugins-active (1) ###

Gutenberg: version: 19.6.0-rc.3, author: Gutenberg Team, Auto-updates disabled

### wp-plugins-inactive (1) ###

Hello Dolly: version: 1.7.2, author: Matt Mullenweg, Auto-updates disabled

### wp-media ###

image_editor: WP_Image_Editor_Imagick
imagick_module_version: 1691
imagemagick_version: ImageMagick 6.9.11-60 Q16 aarch64 2021-01-25 https://imagemagick.org
imagick_version: 3.7.0
file_uploads: 1
post_max_size: 1G
upload_max_filesize: 1G
max_effective_size: 1 GB
max_file_uploads: 20
imagick_limits: 
	imagick::RESOURCETYPE_AREA: 122 MB
	imagick::RESOURCETYPE_DISK: 1073741824
	imagick::RESOURCETYPE_FILE: 786432
	imagick::RESOURCETYPE_MAP: 512 MB
	imagick::RESOURCETYPE_MEMORY: 256 MB
	imagick::RESOURCETYPE_THREAD: 1
	imagick::RESOURCETYPE_TIME: 9.2233720368548E+18
imagemagick_file_formats: 3FR, 3G2, 3GP, AAI, AI, APNG, ART, ARW, AVI, AVIF, AVS, BGR, BGRA, BGRO, BIE, BMP, BMP2, BMP3, BRF, CAL, CALS, CANVAS, CAPTION, CIN, CIP, CLIP, CMYK, CMYKA, CR2, CR3, CRW, CUR, CUT, DATA, DCM, DCR, DCX, DDS, DFONT, DNG, DPX, DXT1, DXT5, EPDF, EPI, EPS, EPS2, EPS3, EPSF, EPSI, EPT, EPT2, EPT3, ERF, FAX, FILE, FITS, FRACTAL, FTP, FTS, G3, G4, GIF, GIF87, GRADIENT, GRAY, GRAYA, GROUP4, H, HALD, HDR, HEIC, HISTOGRAM, HRZ, HTM, HTML, HTTP, HTTPS, ICB, ICO, ICON, IIQ, INFO, INLINE, IPL, ISOBRL, ISOBRL6, J2C, J2K, JBG, JBIG, JNG, JNX, JP2, JPC, JPE, JPEG, JPG, JPM, JPS, JPT, JSON, K25, KDC, LABEL, M2V, M4V, MAC, MAGICK, MAP, MASK, MAT, MATTE, MEF, MIFF, MKV, MNG, MONO, MOV, MP4, MPC, MPG, MRW, MSL, MTV, MVG, NEF, NRW, NULL, ORF, OTB, OTF, PAL, PALM, PAM, PATTERN, PBM, PCD, PCDS, PCL, PCT, PCX, PDB, PDF, PDFA, PEF, PES, PFA, PFB, PFM, PGM, PGX, PICON, PICT, PIX, PJPEG, PLASMA, PNG, PNG00, PNG24, PNG32, PNG48, PNG64, PNG8, PNM, POCKETMOD, PPM, PREVIEW, PS, PS2, PS3, PSB, PSD, PTIF, PWP, RADIAL-GRADIENT, RAF, RAS, RAW, RGB, RGBA, RGBO, RGF, RLA, RLE, RMF, RW2, SCR, SCT, SFW, SGI, SHTML, SIX, SIXEL, SPARSE-COLOR, SR2, SRF, STEGANO, SUN, TEXT, TGA, THUMBNAIL, TIFF, TIFF64, TILE, TIM, TTC, TTF, TXT, UBRL, UBRL6, UIL, UYVY, VDA, VICAR, VID, VIDEO, VIFF, VIPS, VST, WBMP, WEBM, WEBP, WMV, WPG, X, X3F, XBM, XC, XCF, XPM, XPS, XV, XWD, YCbCr, YCbCrA, YUV
gd_version: bundled (2.1.0 compatible)
gd_formats: GIF, JPEG, PNG, WebP, BMP, AVIF
ghostscript_version: 10.00.0

### wp-server ###

server_architecture: Linux 6.6.32-linuxkit aarch64
httpd_software: Apache/2.4.62 (Debian)
php_version: 8.2.24 64bit
php_sapi: apache2handler
max_input_variables: 1000
time_limit: 30
memory_limit: 128M
admin_memory_limit: 256M
max_input_time: -1
upload_max_filesize: 1G
php_post_max_size: 1G
curl_version: 7.88.1 OpenSSL/3.0.14
suhosin: false
imagick_availability: true
pretty_permalinks: true
current: 2024-11-04T18:02:27+00:00
utc-time: Monday, 04-Nov-24 18:02:27 UTC
server-time: 2024-11-04T18:02:24+00:00

### wp-database ###

extension: mysqli
server_version: 11.4.3-MariaDB-ubu2404
client_version: mysqlnd 8.2.24
max_allowed_packet: 16777216
max_connections: 151

### wp-constants ###

WP_HOME: http://localhost:8888
WP_SITEURL: http://localhost:8888
WP_CONTENT_DIR: /var/www/html/wp-content
WP_PLUGIN_DIR: /var/www/html/wp-content/plugins
WP_MEMORY_LIMIT: 40M
WP_MAX_MEMORY_LIMIT: 256M
WP_DEBUG: true
WP_DEBUG_DISPLAY: true
WP_DEBUG_LOG: false
SCRIPT_DEBUG: true
WP_CACHE: false
CONCATENATE_SCRIPTS: undefined
COMPRESS_SCRIPTS: undefined
COMPRESS_CSS: undefined
WP_ENVIRONMENT_TYPE: local
WP_DEVELOPMENT_MODE: undefined
DB_CHARSET: utf8
DB_COLLATE: undefined

### wp-filesystem ###

wordpress: writable
wp-content: writable
uploads: writable
plugins: writable
themes: writable
fonts: not writable

`

### Please confirm that you have searched existing issues in the repo.

- [x] Yes

### Please confirm that you have tested with all plugins deactivated except Gutenberg.

- [x] Yes

### Please confirm which theme type you used for testing.

- [x] Block
- [ ] Classic
- [ ] Hybrid (e.g. classic with theme.json)
- [ ] Not sure

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Custom sidebar pannel is not taking full width #66724

Description

Step-by-step reproduction instructions

unbuilt version of JS code

built JS code

Screenshots, screen recording, code snippet

Environment info

wp-core

wp-paths-sizes

wp-active-theme

wp-themes-inactive (15)

wp-plugins-active (1)

wp-plugins-inactive (1)

wp-media

wp-server

wp-database

wp-constants

wp-filesystem

Please confirm that you have searched existing issues in the repo.

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Please confirm which theme type you used for testing.

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Custom sidebar pannel is not taking full width #66724

Description

Description

Step-by-step reproduction instructions

unbuilt version of JS code

built JS code

Screenshots, screen recording, code snippet

Environment info

wp-core

wp-paths-sizes

wp-active-theme

wp-themes-inactive (15)

wp-plugins-active (1)

wp-plugins-inactive (1)

wp-media

wp-server

wp-database

wp-constants

wp-filesystem

Please confirm that you have searched existing issues in the repo.

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Please confirm which theme type you used for testing.

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions