SharePoint 2016 Logo

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.