subpage: include safe-area top inset in toolbar height; add content/toolbar paddings; adjust content height

src/components/ha-sidebar.ts

@@ -707,7 +707,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
           box-sizing: border-box;
         }
         .menu {
-          height: var(--header-height);
+          height: calc(var(--header-height) + var(--safe-area-inset-top));
           box-sizing: border-box;
           display: flex;
           padding: 0 4px;
@@ -728,6 +728,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
           padding-left: calc(4px + var(--safe-area-inset-left));
           padding-inline-start: calc(4px + var(--safe-area-inset-left));
           padding-inline-end: initial;
+          padding-top: var(--safe-area-inset-top);
         }
         :host([expanded]) .menu {
           width: calc(256px + var(--safe-area-inset-left));
@@ -755,8 +756,11 @@ class HaSidebar extends SubscribeMixin(LitElement) {
 
         ha-fade-in,
         ha-md-list {
+          padding: 4px 0;
+          box-sizing: border-box;
           height: calc(
-            100% - var(--header-height) - 132px - var(--safe-area-inset-bottom)
+            100% - var(--header-height) - var(--safe-area-inset-top) -
+              132px - var(--safe-area-inset-bottom)
           );
         }
 
@@ -767,8 +771,6 @@ class HaSidebar extends SubscribeMixin(LitElement) {
         }
 
         ha-md-list {
-          padding: 4px 0;
-          box-sizing: border-box;
           overflow-x: hidden;
           background: none;
           margin-left: var(--safe-area-inset-left);

src/layouts/hass-subpage.ts

@@ -98,8 +98,11 @@ class HassSubpage extends LitElement {
           display: flex;
           align-items: center;
           font-size: var(--ha-font-size-xl);
-          height: var(--header-height);
+          height: calc(var(--header-height) + var(--safe-area-inset-top));
           padding: 8px 12px;
+          padding-top: max(8px, var(--safe-area-inset-top));
+          padding-right: max(12px, var(--safe-area-content-inset-right));
+          padding-left: max(12px, var(--safe-area-content-inset-left));
           background-color: var(--app-header-background-color);
           font-weight: var(--ha-font-weight-normal);
           color: var(--app-header-text-color, white);
@@ -109,6 +112,9 @@ class HassSubpage extends LitElement {
         @media (max-width: 599px) {
           .toolbar {
             padding: 4px;
+            padding-top: max(4px, var(--safe-area-inset-top));
+            padding-right: max(4px, var(--safe-area-inset-right));
+            padding-left: max(4px, var(--safe-area-inset-left));
           }
         }
         .toolbar a {
@@ -140,7 +146,9 @@ class HassSubpage extends LitElement {
         .content {
           position: relative;
           width: 100%;
-          height: calc(100% - 1px - var(--header-height));
+          height: calc(
+            100% - 1px - var(--header-height) - var(--safe-area-inset-top)
+          );
           overflow-y: auto;
           overflow: auto;
           -webkit-overflow-scrolling: touch;