How to adapt SharePoint online workbench.aspx for a full width solution
When you are developing SPFX application for SharePoint online, you use a page https://{sharepoint_url}/sites/{some_subsite}/_layouts/15/workbench.aspx. For non-fullwidth webparts it fits normally, but if you need to create a wide or full-width webpart, it's not very comfortable.
If you make a short analysis for the DOM objects of the page, you will find, that you need to change the property for several classes - object #workbenchPageContent, .CanvasComponent.LCS and .CanvasZone. You can add the CSS code to the top of scss file '{app_name}.module.scss'.
:global {
#workbenchPageContent,
.CanvasComponent.LCS .CanvasZone {
max-width: 100% !important;
}
}
You can leave it even when you make the package of the solution.