tabs+data-table: add safe-area padding and heights; group header row class; row/header paddings; empty row includes bottom inset

src/components/data-table/ha-data-table.ts

@@ -533,7 +533,11 @@ export class HaDataTable extends LitElement {
       return nothing;
     }
     if (row.append) {
-      return html`<div class="mdc-data-table__row">${row.content}</div>`;
+      return html`<div
+        class=${`mdc-data-table__row append${row.groupHeader ? " group-header" : ""}`}
+      >
+        ${row.content}
+      </div>`;
     }
     if (row.empty) {
       return html`<div class="mdc-data-table__row empty-row"></div>`;
@@ -768,8 +772,9 @@ export class HaDataTable extends LitElement {
             groupedItems.push({
               append: true,
               selectable: false,
+              groupHeader: true,
               content: html`<div
-                class="mdc-data-table__cell group-header"
+                class="mdc-data-table__cell"
                 role="cell"
                 .group=${groupName}
                 @click=${this._collapseGroup}
@@ -1071,12 +1076,18 @@ export class HaDataTable extends LitElement {
           display: flex;
           height: var(--data-table-row-height, 52px);
           width: var(--table-row-width, 100%);
+          box-sizing: border-box;
+          padding-left: var(--data-row-padding-left);
+          padding-right: var(--data-row-padding-right);
         }
 
         .mdc-data-table__row.empty-row {
-          height: var(
-            --data-table-empty-row-height,
-            var(--data-table-row-height, 52px)
+          height: calc(
+            var(
+                --data-table-empty-row-height,
+                var(--data-table-row-height, 52px)
+              ) +
+              var(--safe-area-inset-bottom)
           );
         }
 
@@ -1103,6 +1114,9 @@ export class HaDataTable extends LitElement {
           display: flex;
           border-bottom: 1px solid var(--divider-color);
           overflow: auto;
+          box-sizing: border-box;
+          padding-left: var(--data-row-padding-left);
+          padding-right: var(--data-row-padding-right);
         }
 
         /* Hide scrollbar for Chrome, Safari and Opera */
@@ -1305,6 +1319,10 @@ export class HaDataTable extends LitElement {
         /* custom from here */
 
         .group-header {
+          background-color: var(--primary-background-color);
+        }
+
+        .group-header .mdc-data-table__cell {
           padding-top: 12px;
           height: var(--data-table-row-height, 52px);
           padding-left: 12px;
@@ -1315,7 +1333,6 @@ export class HaDataTable extends LitElement {
           display: flex;
           align-items: center;
           cursor: pointer;
-          background-color: var(--primary-background-color);
         }
 
         .group-header ha-icon-button {

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;

src/layouts/hass-tabs-subpage-data-table.ts

@@ -697,14 +697,24 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
       height: 100%;
     }
 
+    hass-tabs-subpage {
+      background: var(--data-table-background-color);
+      --tabs-subpage-content-padding-left: 0;
+      --tabs-subpage-content-padding-right: 0;
+    }
+
     ha-data-table {
       width: 100%;
       height: 100%;
       --data-table-border-width: 0;
+      --data-row-padding-left: var(--safe-area-inset-left);
+      --data-row-padding-right: var(--safe-area-inset-right);
     }
     :host(:not([narrow])) ha-data-table,
     .pane {
-      height: calc(100vh - 1px - var(--header-height));
+      height: calc(
+        100vh - 1px - var(--header-height) - var(--safe-area-inset-top)
+      );
       display: block;
     }
 
@@ -727,7 +737,8 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
       height: 56px;
       width: 100%;
       justify-content: space-between;
-      padding: 0 16px;
+      padding-left: max(16px, var(--safe-area-content-inset-left));
+      padding-right: max(16px, var(--safe-area-content-inset-right));
       gap: 16px;
       box-sizing: border-box;
       background: var(--primary-background-color);

src/layouts/hass-tabs-subpage.ts

@@ -225,7 +225,9 @@ class HassTabsSubpage extends LitElement {
 
         .container {
           display: flex;
-          height: calc(100% - var(--header-height));
+          height: calc(
+            100% - var(--header-height) - var(--safe-area-inset-top)
+          );
         }
 
         :host([narrow]) .container {
@@ -240,7 +242,10 @@ class HassTabsSubpage extends LitElement {
 
         .toolbar {
           font-size: var(--ha-font-size-xl);
-          height: var(--header-height);
+          height: calc(var(--header-height) + var(--safe-area-inset-top));
+          padding-top: var(--safe-area-inset-top);
+          padding-right: var(--safe-area-inset-right);
+          padding-left: var(--safe-area-content-inset-left);
           background-color: var(--sidebar-background-color);
           font-weight: var(--ha-font-weight-normal);
           border-bottom: 1px solid var(--divider-color);
@@ -320,13 +325,16 @@ class HassTabsSubpage extends LitElement {
 
         .content {
           position: relative;
-          width: calc(
-            100% - var(--safe-area-inset-left) - var(--safe-area-inset-right)
+          width: 100%;
+          box-sizing: border-box;
+          padding-left: var(
+            --tabs-subpage-content-padding-left,
+            var(--safe-area-content-inset-left)
+          );
+          padding-right: var(
+            --tabs-subpage-content-padding-right,
+            var(--safe-area-content-inset-right)
           );
-          margin-left: var(--safe-area-inset-left);
-          margin-right: var(--safe-area-inset-right);
-          margin-inline-start: var(--safe-area-inset-left);
-          margin-inline-end: var(--safe-area-inset-right);
           overflow: auto;
           -webkit-overflow-scrolling: touch;
         }