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(
+          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-automation-row.ts

@@ -25,8 +25,6 @@ export class HaAutomationRow extends LitElement {
   @property({ type: Boolean, reflect: true, attribute: "building-block" })
   public buildingBlock = false;
 
-  @property({ type: Boolean, reflect: true }) public highlight?: boolean;
-
   @query(".row")
   private _rowElement?: HTMLDivElement;
 
@@ -170,20 +168,9 @@ export class HaAutomationRow extends LitElement {
       margin: 0 12px;
     }
     :host([sort-selected]) .row {
-      outline: solid;
-      outline-color: rgba(var(--rgb-accent-color), 0.6);
-      outline-offset: -2px;
-      outline-width: 2px;
-      background-color: rgba(var(--rgb-accent-color), 0.08);
-    }
-    .row:hover {
-      background-color: rgba(var(--rgb-primary-text-color), 0.04);
-    }
-    :host([highlight]) .row {
-      background-color: rgba(var(--rgb-primary-color), 0.08);
-    }
-    :host([highlight]) .row:hover {
-      background-color: rgba(var(--rgb-primary-color), 0.16);
+      box-shadow:
+        0px 0px 8px 4px rgba(var(--rgb-accent-color), 0.8),
+        inset 0px 2px 8px 4px rgba(var(--rgb-accent-color), 0.4);
     }
   `;
 }

src/components/ha-items-display-editor.ts

@@ -393,13 +393,10 @@ export class HaItemDisplayEditor extends LitElement {
       --md-list-item-one-line-container-height: 48px;
     }
     ha-md-list-item.drag-selected {
-      --md-focus-ring-color: rgba(var(--rgb-accent-color), 0.6);
+      box-shadow:
+        0px 0px 8px 4px rgba(var(--rgb-accent-color), 0.8),
+        inset 0px 2px 8px 4px rgba(var(--rgb-accent-color), 0.4);
       border-radius: 8px;
-      outline: solid;
-      outline-color: rgba(var(--rgb-accent-color), 0.6);
-      outline-offset: -2px;
-      outline-width: 2px;
-      background-color: rgba(var(--rgb-accent-color), 0.08);
     }
     ha-md-list-item ha-icon-button {
       margin-left: -12px;

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;
         }

src/panels/config/automation/action/ha-automation-action-row.ts

@@ -151,8 +151,6 @@ export default class HaAutomationActionRow extends LitElement {
 
   @property({ type: Boolean }) public last?: boolean;
 
-  @property({ type: Boolean }) public highlight?: boolean;
-
   @property({ type: Boolean, attribute: "sidebar" })
   public optionsInSidebar = false;
 
@@ -449,7 +447,6 @@ export default class HaAutomationActionRow extends LitElement {
                 ))}
               .collapsed=${this._collapsed}
               .selected=${this._selected}
-              .highlight=${this.highlight}
               @toggle-collapsed=${this._toggleCollapse}
               .buildingBlock=${[
                 ...ACTION_BUILDING_BLOCKS,

src/panels/config/automation/action/ha-automation-action.ts

@@ -97,7 +97,7 @@ export default class HaAutomationAction extends LitElement {
                 @move-up=${this._moveUp}
                 @value-changed=${this._actionChanged}
                 .hass=${this.hass}
-                .highlight=${this.highlightedActions?.includes(action)}
+                ?highlight=${this.highlightedActions?.includes(action)}
                 .optionsInSidebar=${this.optionsInSidebar}
                 .sortSelected=${this._rowSortSelected === idx}
                 @stop-sort-selection=${this._stopSortSelection}

src/panels/config/automation/condition/ha-automation-condition-row.ts

@@ -116,8 +116,6 @@ export default class HaAutomationConditionRow extends LitElement {
 
   @property({ type: Boolean }) public narrow = false;
 
-  @property({ type: Boolean }) public highlight?: boolean;
-
   @property({ type: Boolean, attribute: "sort-selected" })
   public sortSelected = false;
 
@@ -357,7 +355,6 @@ export default class HaAutomationConditionRow extends LitElement {
               )}
               .collapsed=${this._collapsed}
               .selected=${this._selected}
-              .highlight=${this.highlight}
               @click=${this._toggleSidebar}
               @toggle-collapsed=${this._toggleCollapse}
               .buildingBlock=${CONDITION_BUILDING_BLOCKS.includes(

src/panels/config/automation/condition/ha-automation-condition.ts

@@ -175,7 +175,7 @@ export default class HaAutomationCondition extends LitElement {
                 @move-up=${this._moveUp}
                 @value-changed=${this._conditionChanged}
                 .hass=${this.hass}
-                .highlight=${this.highlightedConditions?.includes(cond)}
+                ?highlight=${this.highlightedConditions?.includes(cond)}
                 .optionsInSidebar=${this.optionsInSidebar}
                 .sortSelected=${this._rowSortSelected === idx}
                 @stop-sort-selection=${this._stopSortSelection}

src/panels/config/automation/styles.ts

@@ -37,6 +37,12 @@ export const rowStyles = css`
   ha-tooltip {
     cursor: default;
   }
+  :host([highlight]) ha-card {
+    --shadow-default: var(--ha-card-box-shadow, 0 0 0 0 transparent);
+    --shadow-focus: 0 0 0 1px var(--state-inactive-color);
+    border-color: var(--state-inactive-color);
+    box-shadow: var(--shadow-default), var(--shadow-focus);
+  }
   .hidden {
     display: none;
   }

src/panels/config/automation/trigger/ha-automation-trigger-row.ts

@@ -113,8 +113,6 @@ export default class HaAutomationTriggerRow extends LitElement {
 
   @property({ type: Boolean }) public last?: boolean;
 
-  @property({ type: Boolean }) public highlight?: boolean;
-
   @property({ type: Boolean, attribute: "sidebar" })
   public optionsInSidebar = false;
 
@@ -351,7 +349,6 @@ export default class HaAutomationTriggerRow extends LitElement {
               this.trigger.enabled === false}
               @click=${this._toggleSidebar}
               .selected=${this._selected}
-              .highlight=${this.highlight}
               .sortSelected=${this.sortSelected}
               >${this._selected
                 ? "selected"

src/panels/config/automation/trigger/ha-automation-trigger.ts

@@ -92,7 +92,7 @@ export default class HaAutomationTrigger extends LitElement {
                 .hass=${this.hass}
                 .disabled=${this.disabled}
                 .narrow=${this.narrow}
-                .highlight=${this.highlightedTriggers?.includes(trg)}
+                ?highlight=${this.highlightedTriggers?.includes(trg)}
                 .optionsInSidebar=${this.optionsInSidebar}
                 .sortSelected=${this._rowSortSelected === idx}
                 @stop-sort-selection=${this._stopSortSelection}

src/panels/config/script/ha-script-field-row.ts

@@ -32,8 +32,6 @@ export default class HaScriptFieldRow extends LitElement {
 
   @property({ type: Boolean }) public narrow = false;
 
-  @property({ type: Boolean }) public highlight?: boolean;
-
   @state() private _yamlMode = false;
 
   @state() private _selected = false;
@@ -63,7 +61,6 @@ export default class HaScriptFieldRow extends LitElement {
           left-chevron
           @toggle-collapsed=${this._toggleCollapse}
           .collapsed=${this._collapsed}
-          .highlight=${this.highlight}
         >
           <h3 slot="header">${this.key}</h3>
 
@@ -86,7 +83,6 @@ export default class HaScriptFieldRow extends LitElement {
             .leftChevron=${SELECTOR_SELECTOR_BUILDING_BLOCKS.includes(
               Object.keys(this.field.selector)[0]
             )}
-            .highlight=${this.highlight}
           >
             <h3 slot="header">
               ${this.hass.localize(
@@ -335,6 +331,13 @@ export default class HaScriptFieldRow extends LitElement {
         li[role="separator"] {
           border-bottom-color: var(--divider-color);
         }
+        :host([highlight]) ha-card {
+          --shadow-default: var(--ha-card-box-shadow, 0 0 0 0 transparent);
+          --shadow-focus: 0 0 0 1px var(--state-inactive-color);
+          border-color: var(--state-inactive-color);
+          box-shadow: var(--shadow-default), var(--shadow-focus);
+        }
+
         .selector-row {
           padding: 12px 0 16px 16px;
         }

src/panels/config/script/ha-script-fields.ts

@@ -43,7 +43,7 @@ export default class HaScriptFields extends LitElement {
                   .disabled=${this.disabled}
                   @value-changed=${this._fieldChanged}
                   .hass=${this.hass}
-                  .highlight=${this.highlightedFields?.[key] !== undefined}
+                  ?highlight=${this.highlightedFields?.[key] !== undefined}
                   .narrow=${this.narrow}
                 >
                 </ha-script-field-row>