Fix background and padding on dashboard views

src/panels/lovelace/hui-root.ts

@@ -1049,13 +1049,6 @@ class HUIRoot extends LitElement {
         #view {
           margin-top: calc(var(--header-height) + env(safe-area-inset-top));
           height: calc(100vh - var(--header-height) - env(safe-area-inset-top));
-          padding-left: env(safe-area-inset-left);
-          padding-right: env(safe-area-inset-right);
-          background: var(
-            --lovelace-background,
-            var(--primary-background-color)
-          );
-          overflow: auto;
           transform: translateZ(0);
           display: flex;
         }
@@ -1079,11 +1072,15 @@ class HUIRoot extends LitElement {
           *
           * https://github.com/home-assistant/home-assistant-polymer/pull/3806
           */
-          flex: 1 1 100%;
+          padding-left: env(safe-area-inset-left);
+          padding-right: env(safe-area-inset-right);
+          background: var(
+            --lovelace-background,
+            var(--primary-background-color)
+          );
+          overflow: auto;
+          width: 100%;
           height: 100%;
-          max-width: 100%;
-          padding-bottom: env(safe-area-inset-bottom);
-          display: block;
         }
         .hide-tab {
           display: none;

src/panels/lovelace/views/hui-masonry-view.ts

@@ -298,8 +298,8 @@ export class MasonryView extends LitElement implements LovelaceViewElement {
       :host {
         display: block;
         padding-top: 4px;
-        height: 100%;
         box-sizing: border-box;
+        padding-bottom: env(safe-area-inset-bottom);
       }
 
       .badges {

src/panels/lovelace/views/hui-sidebar-view.ts

@@ -196,8 +196,8 @@ export class SideBarView extends LitElement implements LovelaceViewElement {
       :host {
         display: block;
         padding-top: 4px;
-        height: 100%;
         box-sizing: border-box;
+        padding-bottom: env(safe-area-inset-bottom);
       }
 
       .container {