By adding the class
.full-width to the
<body> tag the layout of the website will change quite a bit for larger screens.
This class affects the navigation drawer, bottom navigation, tabs and the main content.
What it basically does is make website look as if it was used on a smaller screen.
This means that the components named before will become full screen or disappear of screen.
The advantage of this is that You have even more space to show your content.
By wrapping the
.appbar, .drawer, main elements inside a
element you're able to make a small screen layout.
In this case small screen doesn't mean mobile screen but a layout that is about 80% of the screens width.
This means that you have some room left on the sides.