spfx webpart Canvas size on Modern Page

Question

I've created an spfx webpart using the react-office-ui-fabric DetailsList. It works fine, but the details list is quite wide. On a modern page the framework is rendeing my webpart in a div that is set to max-width 1280ox which causes a horizontal scroll bar to appear.

It seems to do that for all webparts. Is there a way to override the max-width on a modern page? Works fine on a classic page/

Answer 1

I have added the following styles in my module.scss file and it worked perfectly for me.

 :global {
      #workbenchPageContent, .CanvasComponent.LCS .CanvasZone {
        max-width: 100% !important;
      }
    
    }

Answer 2

If you increase CSS Specificity you can set your own max-width:

.Canvas.Canvas{
    max-width:initial;
}

or

.Canvas.Canvas{
    max-width:100vw;
}

See: https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/

Answer 3

you could use a script Editor for modern pages form bitalus.com in example and input:

<style>
   .Canvas{
       max-width:100% !important;
   }
</style>

this is working for me like a cham!