From f5bd0816a801fa0bee5f4af78b0b671343360084 Mon Sep 17 00:00:00 2001
From: Aidan Timson <aidan@timmo.dev>
Date: Mon, 8 Dec 2025 14:05:49 +0000
Subject: [PATCH] Fix more info entity settings bottom fade (#28437)

* Use space tokens

* Fix settings bottom fade issue

* Space token

* Restore
---
 src/dialogs/more-info/ha-more-info-dialog.ts         | 12 +++++++++++-
 .../entities/entity-registry-settings-editor.ts      | 10 +++++-----
 .../config/entities/entity-registry-settings.ts      |  7 ++++---
 3 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/dialogs/more-info/ha-more-info-dialog.ts b/src/dialogs/more-info/ha-more-info-dialog.ts
index 6e490b583d..edb81a1600 100644
--- a/src/dialogs/more-info/ha-more-info-dialog.ts
+++ b/src/dialogs/more-info/ha-more-info-dialog.ts
@@ -16,6 +16,7 @@ import type { PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { cache } from "lit/directives/cache";
+import { classMap } from "lit/directives/class-map";
 import { keyed } from "lit/directives/keyed";
 import { dynamicElement } from "../../common/dom/dynamic-element-directive";
 import { fireEvent } from "../../common/dom/fire_event";
@@ -607,7 +608,12 @@ export class MoreInfoDialog extends ScrollableFadeMixin(LitElement) {
                 `
               : nothing}
         </ha-dialog-header>
-        <div class="content-wrapper">
+        <div
+          class=${classMap({
+            "content-wrapper": true,
+            "settings-view": this._currView === "settings",
+          })}
+        >
           ${keyed(
             this._entityId,
             html`
@@ -759,6 +765,10 @@ export class MoreInfoDialog extends ScrollableFadeMixin(LitElement) {
           overflow: auto;
         }
 
+        .content-wrapper.settings-view .fade-bottom {
+          bottom: var(--ha-space-18);
+        }
+
         .child-view {
           display: flex;
           flex-direction: column;
diff --git a/src/panels/config/entities/entity-registry-settings-editor.ts b/src/panels/config/entities/entity-registry-settings-editor.ts
index 546c01ad85..5b92198ba7 100644
--- a/src/panels/config/entities/entity-registry-settings-editor.ts
+++ b/src/panels/config/entities/entity-registry-settings-editor.ts
@@ -1525,17 +1525,17 @@ export class EntityRegistrySettingsEditor extends LitElement {
         }
         ha-textfield.entityId ha-icon-button {
           position: relative;
-          right: -8px;
+          right: calc(var(--ha-space-2) * -1);
           --mdc-icon-button-size: 36px;
           --mdc-icon-size: 20px;
           color: var(--secondary-text-color);
           inset-inline-start: initial;
-          inset-inline-end: -8px;
+          inset-inline-end: calc(var(--ha-space-2) * -1);
           direction: var(--direction);
         }
         ha-switch {
-          margin-right: 16px;
-          margin-inline-end: 16px;
+          margin-right: var(--ha-space-4);
+          margin-inline-end: var(--ha-space-4);
           margin-inline-start: initial;
         }
         ha-settings-row ha-switch {
@@ -1548,7 +1548,7 @@ export class EntityRegistrySettingsEditor extends LitElement {
         ha-select,
         ha-area-picker {
           display: block;
-          margin: 8px 0;
+          margin: var(--ha-space-2) 0;
           width: 100%;
         }
         li[divider] {
diff --git a/src/panels/config/entities/entity-registry-settings.ts b/src/panels/config/entities/entity-registry-settings.ts
index d6d78229bc..48e472863c 100644
--- a/src/panels/config/entities/entity-registry-settings.ts
+++ b/src/panels/config/entities/entity-registry-settings.ts
@@ -244,14 +244,15 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
           display: block;
         }
         .container {
-          padding: 8px 24px 20px 24px;
+          padding: var(--ha-space-2) var(--ha-space-6) var(--ha-space-5)
+            var(--ha-space-6);
         }
         .buttons {
           box-sizing: border-box;
           display: flex;
-          padding: 16px;
+          padding: var(--ha-space-4);
           justify-content: space-between;
-          padding-bottom: max(var(--safe-area-inset-bottom), 16px);
+          padding-bottom: max(var(--safe-area-inset-bottom), var(--ha-space-4));
           background-color: var(--mdc-theme-surface, #fff);
           border-top: 1px solid var(--divider-color);
           position: sticky;