Use the Full Page Canvas in modern SharePoint Online sites

A common requirement in the past with classic SharePoint solutions was to create start pages utilizing the full canvas of the page. In classic SharePoint this could easily be accomplished by adding a few lines of CSS in a Page Layout.

For modern pages we don't have Page Layouts anymore, and to accomplish the same result a SPFx Extention can be used. This is more spesific a Application Customizer registering one simple CSS override in the top placeholder of the page.

This solution will work with both Communication and Team Sites, but is recommended to be used with Communication Sites. This template will give us full control of the page canvas below the Office 365 suite bar. Using it on a Team Site will not make much sense as we have a different layout with a left navigation bar etc.

Common usage scenarios

Example of communication site before the app is added

Example of communication site after the app is added

The solution

I have created an example solution for this that can be found at Github:

https://github.com/aflyen/spfx-extension-fullpagecanvas