From ffc44e36db1c4d8b351acb5fe5bf48a7f1797a0d Mon Sep 17 00:00:00 2001 From: Aidan Timson Date: Wed, 19 Nov 2025 11:38:39 +0000 Subject: [PATCH 01/35] Add default padding --- src/resources/styles.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/resources/styles.ts b/src/resources/styles.ts index 553b75b55ddc..c770d379b1c1 100644 --- a/src/resources/styles.ts +++ b/src/resources/styles.ts @@ -161,9 +161,10 @@ export const haStyleDialog = css` --mdc-dialog-min-height: 100svh; --mdc-dialog-max-height: 100vh; --mdc-dialog-max-height: 100svh; - --dialog-surface-padding: var(--safe-area-inset-top) - var(--safe-area-inset-right) var(--safe-area-inset-bottom) - var(--safe-area-inset-left); + --dialog-surface-padding: var(--safe-area-inset-top, var(--ha-space-0)) + var(--safe-area-inset-right, var(--ha-space-0)) + var(--safe-area-inset-bottom, var(--ha-space-0)) + var(--safe-area-inset-left, var(--ha-space-0)); --vertical-align-dialog: flex-end; --ha-dialog-border-radius: var(--ha-border-radius-square); } From 319b56949619f643c3dcc30f0bccb71a74f52aa1 Mon Sep 17 00:00:00 2001 From: Aidan Timson Date: Wed, 19 Nov 2025 11:43:24 +0000 Subject: [PATCH 02/35] Use vars --- src/panels/config/integrations/dialog-add-integration.ts | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/panels/config/integrations/dialog-add-integration.ts b/src/panels/config/integrations/dialog-add-integration.ts index 5b6e6f3868a4..9b54a15ff4a5 100644 --- a/src/panels/config/integrations/dialog-add-integration.ts +++ b/src/panels/config/integrations/dialog-add-integration.ts @@ -462,7 +462,7 @@ class AddIntegrationDialog extends LitElement { style=${styleMap({ width: `${this._width}px`, height: this._narrow - ? "calc(100vh - 184px - var(--safe-area-inset-top, 0px) - var(--safe-area-inset-bottom, 0px))" + ? "calc(100vh - 184px - var(--safe-area-inset-top, var(--ha-space-0)) - var(--safe-area-inset-bottom, var(--ha-space-0)))" : "500px", })} @click=${this._integrationPicked} @@ -719,9 +719,6 @@ class AddIntegrationDialog extends LitElement { --mdc-dialog-min-width: 500px; } } - ha-dialog { - --dialog-content-padding: 0; - } search-input { display: block; margin: 16px 16px 0; From faebda76c31350d6f2e3029f4df99723fd39f042 Mon Sep 17 00:00:00 2001 From: Aidan Timson Date: Wed, 19 Nov 2025 11:44:46 +0000 Subject: [PATCH 03/35] Restore --- src/panels/config/integrations/dialog-add-integration.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/panels/config/integrations/dialog-add-integration.ts b/src/panels/config/integrations/dialog-add-integration.ts index 9b54a15ff4a5..0ad47fb0c1e0 100644 --- a/src/panels/config/integrations/dialog-add-integration.ts +++ b/src/panels/config/integrations/dialog-add-integration.ts @@ -719,6 +719,9 @@ class AddIntegrationDialog extends LitElement { --mdc-dialog-min-width: 500px; } } + ha-dialog { + --dialog-content-padding: 0; + } search-input { display: block; margin: 16px 16px 0; From fbd8a4a694a8a287d207ab54759ef2fea328702f Mon Sep 17 00:00:00 2001 From: Aidan Timson Date: Wed, 19 Nov 2025 12:11:38 +0000 Subject: [PATCH 04/35] Use container padding --- src/components/ha-dialog.ts | 3 ++- src/resources/styles.ts | 6 ++++++ 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/src/components/ha-dialog.ts b/src/components/ha-dialog.ts index f69ff4599a58..6033aa8dfe4e 100644 --- a/src/components/ha-dialog.ts +++ b/src/components/ha-dialog.ts @@ -100,6 +100,7 @@ export class HaDialog extends DialogBase { } .mdc-dialog__container { align-items: var(--vertical-align-dialog, center); + padding: var(--dialog-container-padding, var(--ha-space-0)); } .mdc-dialog__title { padding: 16px 16px 0 16px; @@ -133,7 +134,7 @@ export class HaDialog extends DialogBase { --ha-dialog-surface-background, var(--mdc-theme-surface, #fff) ); - padding: var(--dialog-surface-padding); + padding: var(--dialog-surface-padding, var(--ha-space-0)); } :host([flexContent]) .mdc-dialog .mdc-dialog__content { display: flex; diff --git a/src/resources/styles.ts b/src/resources/styles.ts index c770d379b1c1..e24db2f5e80b 100644 --- a/src/resources/styles.ts +++ b/src/resources/styles.ts @@ -142,6 +142,11 @@ export const haStyleDialog = css` --mdc-dialog-max-width: 600px; --mdc-dialog-max-width: min(600px, 95vw); --justify-action-buttons: space-between; + --dialog-container-padding: var(--safe-area-inset-top, var(--ha-space-0)) + var(--safe-area-inset-right, var(--ha-space-0)) + var(--safe-area-inset-bottom, var(--ha-space-0)) + var(--safe-area-inset-left, var(--ha-space-0)); + --dialog-surface-padding: var(--ha-space-0); } ha-dialog .form { @@ -161,6 +166,7 @@ export const haStyleDialog = css` --mdc-dialog-min-height: 100svh; --mdc-dialog-max-height: 100vh; --mdc-dialog-max-height: 100svh; + --dialog-container-padding: var(--ha-space-0); --dialog-surface-padding: var(--safe-area-inset-top, var(--ha-space-0)) var(--safe-area-inset-right, var(--ha-space-0)) var(--safe-area-inset-bottom, var(--ha-space-0)) From 7e7811a6bc0246dd0d0b4afd5e3296392ea7a180 Mon Sep 17 00:00:00 2001 From: Aidan Timson Date: Wed, 19 Nov 2025 13:36:58 +0000 Subject: [PATCH 05/35] Move fixed top styles to shared styles --- src/dialogs/more-info/ha-more-info-dialog.ts | 16 ++-------------- src/resources/styles.ts | 18 ++++++++++++++++++ 2 files changed, 20 insertions(+), 14 deletions(-) diff --git a/src/dialogs/more-info/ha-more-info-dialog.ts b/src/dialogs/more-info/ha-more-info-dialog.ts index 403e1581fb9e..f762c855197a 100644 --- a/src/dialogs/more-info/ha-more-info-dialog.ts +++ b/src/dialogs/more-info/ha-more-info-dialog.ts @@ -50,7 +50,7 @@ import { lightSupportsFavoriteColors } from "../../data/light"; import type { ItemType } from "../../data/search"; import { SearchableDomains } from "../../data/search"; import { getSensorNumericDeviceClasses } from "../../data/sensor"; -import { haStyleDialog } from "../../resources/styles"; +import { haStyleDialog, haStyleDialogFixedTop } from "../../resources/styles"; import "../../state-summary/state-card-content"; import type { HomeAssistant } from "../../types"; import { @@ -707,14 +707,9 @@ export class MoreInfoDialog extends LitElement { static get styles() { return [ haStyleDialog, + haStyleDialogFixedTop, css` ha-dialog { - /* Set the top top of the dialog to a fixed position, so it doesnt jump when the content changes size */ - --vertical-align-dialog: flex-start; - --dialog-surface-margin-top: max( - var(--ha-space-10), - var(--safe-area-inset-top, var(--ha-space-0)) - ); --dialog-content-padding: 0; } @@ -737,13 +732,6 @@ export class MoreInfoDialog extends LitElement { display: block; } - @media all and (max-width: 450px), all and (max-height: 500px) { - /* When in fullscreen dialog should be attached to top */ - ha-dialog { - --dialog-surface-margin-top: var(--ha-space-0); - } - } - @media all and (min-width: 600px) and (min-height: 501px) { ha-dialog { --mdc-dialog-min-width: 580px; diff --git a/src/resources/styles.ts b/src/resources/styles.ts index e24db2f5e80b..e8264715ad17 100644 --- a/src/resources/styles.ts +++ b/src/resources/styles.ts @@ -180,6 +180,24 @@ export const haStyleDialog = css` } `; +export const haStyleDialogFixedTop = css` + ha-dialog { + /* Pin dialog to top so it doesn't jump when content changes size */ + --vertical-align-dialog: flex-start; + --dialog-surface-margin-top: max( + var(--ha-space-10), + var(--safe-area-inset-top, var(--ha-space-0)) + ); + } + + @media all and (max-width: 450px), all and (max-height: 500px) { + ha-dialog { + /* When in fullscreen, dialog should be attached to top */ + --dialog-surface-margin-top: var(--ha-space-0); + } + } +`; + export const haStyleScrollbar = css` .ha-scrollbar::-webkit-scrollbar { width: 0.4rem; From 6b990efe6c3045e46524519f261357f7a850c58d Mon Sep 17 00:00:00 2001 From: Aidan Timson Date: Wed, 19 Nov 2025 13:43:25 +0000 Subject: [PATCH 06/35] Use fixed styles and adjust for safe areas on media browse dialog --- .../dialog-media-player-browse.ts | 22 +++++++++++++------ 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/src/components/media-player/dialog-media-player-browse.ts b/src/components/media-player/dialog-media-player-browse.ts index a55edd09fe4c..4b128d197793 100644 --- a/src/components/media-player/dialog-media-player-browse.ts +++ b/src/components/media-player/dialog-media-player-browse.ts @@ -19,7 +19,7 @@ import type { MediaPlayerItem, MediaPlayerLayoutType, } from "../../data/media-player"; -import { haStyleDialog } from "../../resources/styles"; +import { haStyleDialog, haStyleDialogFixedTop } from "../../resources/styles"; import type { HomeAssistant } from "../../types"; import "../ha-dialog"; import "../ha-dialog-header"; @@ -223,6 +223,7 @@ class DialogMediaPlayerBrowse extends LitElement { static get styles(): CSSResultGroup { return [ haStyleDialog, + haStyleDialogFixedTop, css` ha-dialog { --dialog-z-index: 9; @@ -230,23 +231,30 @@ class DialogMediaPlayerBrowse extends LitElement { } ha-media-player-browse { - --media-browser-max-height: calc(100vh - 65px); + --media-browser-max-height: calc( + 100vh - 65px - var(--safe-area-inset-top, 0) - + var(--safe-area-inset-bottom, 0) + ); } :host(.opened) ha-media-player-browse { - height: calc(100vh - 65px); + height: calc( + 100vh - 65px - var(--safe-area-inset-top, 0) - + var(--safe-area-inset-bottom, 0) + ); } @media (min-width: 800px) { ha-dialog { --mdc-dialog-max-width: 800px; - --dialog-surface-position: fixed; - --dialog-surface-top: 40px; - --mdc-dialog-max-height: calc(100vh - 72px); + --mdc-dialog-max-height: calc(100% - 72px); } ha-media-player-browse { position: initial; - --media-browser-max-height: calc(100vh - 145px); + --media-browser-max-height: calc( + 100vh - 145px - var(--safe-area-inset-top, 0) - + var(--safe-area-inset-bottom, 0) + ); width: 700px; } } From 95b4db9abb69a79e19e95c3daa60ad45e96b39f7 Mon Sep 17 00:00:00 2001 From: Aidan Timson Date: Wed, 19 Nov 2025 13:53:19 +0000 Subject: [PATCH 07/35] Use vars --- .../dialog-media-player-browse.ts | 21 +++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/src/components/media-player/dialog-media-player-browse.ts b/src/components/media-player/dialog-media-player-browse.ts index 4b128d197793..03debb826123 100644 --- a/src/components/media-player/dialog-media-player-browse.ts +++ b/src/components/media-player/dialog-media-player-browse.ts @@ -232,15 +232,21 @@ class DialogMediaPlayerBrowse extends LitElement { ha-media-player-browse { --media-browser-max-height: calc( - 100vh - 65px - var(--safe-area-inset-top, 0) - - var(--safe-area-inset-bottom, 0) + 100vh - + 65px - var(--safe-area-inset-top, var(--ha-space-0)) - var( + --safe-area-inset-bottom, + var(--ha-space-0) + ) ); } :host(.opened) ha-media-player-browse { height: calc( - 100vh - 65px - var(--safe-area-inset-top, 0) - - var(--safe-area-inset-bottom, 0) + 100vh - + 65px - var(--safe-area-inset-top, var(--ha-space-0)) - var( + --safe-area-inset-bottom, + var(--ha-space-0) + ) ); } @@ -252,8 +258,11 @@ class DialogMediaPlayerBrowse extends LitElement { ha-media-player-browse { position: initial; --media-browser-max-height: calc( - 100vh - 145px - var(--safe-area-inset-top, 0) - - var(--safe-area-inset-bottom, 0) + 100vh - + 145px - var(--safe-area-inset-top, var(--ha-space-0)) - var( + --safe-area-inset-bottom, + var(--ha-space-0) + ) ); width: 700px; } From bed1333ff6bd3a8bc51e1e0558864d7aef002169 Mon Sep 17 00:00:00 2001 From: Aidan Timson Date: Wed, 19 Nov 2025 13:57:51 +0000 Subject: [PATCH 08/35] Reduce --- src/components/media-player/dialog-media-player-browse.ts | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/components/media-player/dialog-media-player-browse.ts b/src/components/media-player/dialog-media-player-browse.ts index 03debb826123..041a92910a9c 100644 --- a/src/components/media-player/dialog-media-player-browse.ts +++ b/src/components/media-player/dialog-media-player-browse.ts @@ -253,7 +253,13 @@ class DialogMediaPlayerBrowse extends LitElement { @media (min-width: 800px) { ha-dialog { --mdc-dialog-max-width: 800px; - --mdc-dialog-max-height: calc(100% - 72px); + --mdc-dialog-max-height: calc( + 100vh - + 72px - var(--safe-area-inset-top, var(--ha-space-0)) - var( + --safe-area-inset-bottom, + var(--ha-space-0) + ) + ); } ha-media-player-browse { position: initial; From 75b6e2a83df6f1a56d0f79a250306ea04cdb02e7 Mon Sep 17 00:00:00 2001 From: Aidan Timson Date: Wed, 19 Nov 2025 14:03:40 +0000 Subject: [PATCH 09/35] Reuse --- .../zha/dialog-zha-manage-zigbee-device.ts | 8 +++++--- .../section-editor/hui-dialog-edit-section.ts | 18 +++++------------- .../editor/view-editor/hui-dialog-edit-view.ts | 18 +++++------------- .../view-header/hui-dialog-edit-view-header.ts | 18 +++++------------- 4 files changed, 20 insertions(+), 42 deletions(-) diff --git a/src/panels/config/integrations/integration-panels/zha/dialog-zha-manage-zigbee-device.ts b/src/panels/config/integrations/integration-panels/zha/dialog-zha-manage-zigbee-device.ts index 7af04b326f20..d6ca61ab95fb 100644 --- a/src/panels/config/integrations/integration-panels/zha/dialog-zha-manage-zigbee-device.ts +++ b/src/panels/config/integrations/integration-panels/zha/dialog-zha-manage-zigbee-device.ts @@ -12,7 +12,10 @@ import "../../../../../components/ha-tab-group"; import "../../../../../components/ha-tab-group-tab"; import type { ZHADevice, ZHAGroup } from "../../../../../data/zha"; import { fetchBindableDevices, fetchGroups } from "../../../../../data/zha"; -import { haStyleDialog } from "../../../../../resources/styles"; +import { + haStyleDialog, + haStyleDialogFixedTop, +} from "../../../../../resources/styles"; import type { HomeAssistant } from "../../../../../types"; import { sortZHADevices, sortZHAGroups } from "./functions"; import type { @@ -211,11 +214,11 @@ class DialogZHAManageZigbeeDevice extends LitElement { static get styles(): CSSResultGroup { return [ haStyleDialog, + haStyleDialogFixedTop, css` ha-dialog { --dialog-surface-position: static; --dialog-content-position: static; - --vertical-align-dialog: flex-start; } .content { @@ -229,7 +232,6 @@ class DialogZHAManageZigbeeDevice extends LitElement { ha-dialog { --mdc-dialog-min-width: 560px; --mdc-dialog-max-width: 560px; - --dialog-surface-margin-top: 40px; --mdc-dialog-max-height: calc(100% - 72px); } } diff --git a/src/panels/lovelace/editor/section-editor/hui-dialog-edit-section.ts b/src/panels/lovelace/editor/section-editor/hui-dialog-edit-section.ts index 8ce1c70e791e..c4b78c47671c 100644 --- a/src/panels/lovelace/editor/section-editor/hui-dialog-edit-section.ts +++ b/src/panels/lovelace/editor/section-editor/hui-dialog-edit-section.ts @@ -30,7 +30,10 @@ import { } from "../../../../data/lovelace/config/view"; import { showAlertDialog } from "../../../../dialogs/generic/show-dialog-box"; import type { HassDialog } from "../../../../dialogs/make-dialog-manager"; -import { haStyleDialog } from "../../../../resources/styles"; +import { + haStyleDialog, + haStyleDialogFixedTop, +} from "../../../../resources/styles"; import type { HomeAssistant } from "../../../../types"; import type { Lovelace } from "../../types"; import { addSection, deleteSection, moveSection } from "../config-util"; @@ -418,19 +421,8 @@ export class HuiDialogEditSection static get styles(): CSSResultGroup { return [ haStyleDialog, + haStyleDialogFixedTop, css` - ha-dialog { - /* Set the top top of the dialog to a fixed position, so it doesnt jump when the content changes size */ - --vertical-align-dialog: flex-start; - --dialog-surface-margin-top: 40px; - } - - @media all and (max-width: 450px), all and (max-height: 500px) { - /* When in fullscreen dialog should be attached to top */ - ha-dialog { - --dialog-surface-margin-top: 0px; - } - } ha-dialog.yaml-mode { --dialog-content-padding: 0; } diff --git a/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts b/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts index 6a52324fc343..fb98d10bec28 100644 --- a/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts +++ b/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts @@ -36,7 +36,10 @@ import { showAlertDialog, showConfirmationDialog, } from "../../../../dialogs/generic/show-dialog-box"; -import { haStyleDialog } from "../../../../resources/styles"; +import { + haStyleDialog, + haStyleDialogFixedTop, +} from "../../../../resources/styles"; import type { HomeAssistant } from "../../../../types"; import "../../components/hui-entity-editor"; import type { Lovelace } from "../../types"; @@ -631,19 +634,8 @@ export class HuiDialogEditView extends LitElement { static get styles(): CSSResultGroup { return [ haStyleDialog, + haStyleDialogFixedTop, css` - ha-dialog { - /* Set the top top of the dialog to a fixed position, so it doesnt jump when the content changes size */ - --vertical-align-dialog: flex-start; - --dialog-surface-margin-top: 40px; - } - - @media all and (max-width: 450px), all and (max-height: 500px) { - /* When in fullscreen dialog should be attached to top */ - ha-dialog { - --dialog-surface-margin-top: 0px; - } - } ha-dialog.yaml-mode { --dialog-content-padding: 0; } diff --git a/src/panels/lovelace/editor/view-header/hui-dialog-edit-view-header.ts b/src/panels/lovelace/editor/view-header/hui-dialog-edit-view-header.ts index d2b630352c16..14b2cb537ac8 100644 --- a/src/panels/lovelace/editor/view-header/hui-dialog-edit-view-header.ts +++ b/src/panels/lovelace/editor/view-header/hui-dialog-edit-view-header.ts @@ -16,7 +16,10 @@ import "../../../../components/ha-yaml-editor"; import type { HaYamlEditor } from "../../../../components/ha-yaml-editor"; import type { LovelaceViewHeaderConfig } from "../../../../data/lovelace/config/view"; import { showAlertDialog } from "../../../../dialogs/generic/show-dialog-box"; -import { haStyleDialog } from "../../../../resources/styles"; +import { + haStyleDialog, + haStyleDialogFixedTop, +} from "../../../../resources/styles"; import type { HomeAssistant } from "../../../../types"; import "./hui-view-header-settings-editor"; import type { EditViewHeaderDialogParams } from "./show-edit-view-header-dialog"; @@ -201,19 +204,8 @@ export class HuiDialogEditViewHeader extends LitElement { static get styles(): CSSResultGroup { return [ haStyleDialog, + haStyleDialogFixedTop, css` - ha-dialog { - /* Set the top top of the dialog to a fixed position, so it doesnt jump when the content changes size */ - --vertical-align-dialog: flex-start; - --dialog-surface-margin-top: 40px; - } - - @media all and (max-width: 450px), all and (max-height: 500px) { - /* When in fullscreen dialog should be attached to top */ - ha-dialog { - --dialog-surface-margin-top: 0px; - } - } ha-dialog.yaml-mode { --dialog-content-padding: 0; } From a5f69b2fac1a556c18c06ffeb42bc1ef438671aa Mon Sep 17 00:00:00 2001 From: Aidan Timson Date: Wed, 19 Nov 2025 14:05:12 +0000 Subject: [PATCH 10/35] Add to strategy editor dialog --- .../dialogs/dialog-dashboard-strategy-editor.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/panels/lovelace/editor/dashboard-strategy-editor/dialogs/dialog-dashboard-strategy-editor.ts b/src/panels/lovelace/editor/dashboard-strategy-editor/dialogs/dialog-dashboard-strategy-editor.ts index aacef90a4c79..f5dbed6eaa92 100644 --- a/src/panels/lovelace/editor/dashboard-strategy-editor/dialogs/dialog-dashboard-strategy-editor.ts +++ b/src/panels/lovelace/editor/dashboard-strategy-editor/dialogs/dialog-dashboard-strategy-editor.ts @@ -17,7 +17,10 @@ import "../../../../../components/ha-dialog-header"; import "../../../../../components/ha-icon-button"; import "../../../../../components/ha-list-item"; import type { LovelaceStrategyConfig } from "../../../../../data/lovelace/config/strategy"; -import { haStyleDialog } from "../../../../../resources/styles"; +import { + haStyleDialog, + haStyleDialogFixedTop, +} from "../../../../../resources/styles"; import type { HomeAssistant } from "../../../../../types"; import { showSaveSuccessToast } from "../../../../../util/toast-saved-success"; import { cleanLegacyStrategyConfig } from "../../../strategies/legacy-strategy"; @@ -219,6 +222,7 @@ class DialogDashboardStrategyEditor extends LitElement { static get styles(): CSSResultGroup { return [ haStyleDialog, + haStyleDialogFixedTop, css` ha-dialog { --dialog-content-padding: 0 24px; From 609c6288062e6d767b6a1c921978794b38b967cc Mon Sep 17 00:00:00 2001 From: Aidan Timson Date: Wed, 19 Nov 2025 14:16:48 +0000 Subject: [PATCH 11/35] Reuse for editors --- .../lovelace/editor/badge-editor/hui-dialog-edit-badge.ts | 8 +++++--- .../lovelace/editor/card-editor/hui-dialog-edit-card.ts | 8 +++++--- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/src/panels/lovelace/editor/badge-editor/hui-dialog-edit-badge.ts b/src/panels/lovelace/editor/badge-editor/hui-dialog-edit-badge.ts index 8f5e22fdec43..55f247efe7d8 100644 --- a/src/panels/lovelace/editor/badge-editor/hui-dialog-edit-badge.ts +++ b/src/panels/lovelace/editor/badge-editor/hui-dialog-edit-badge.ts @@ -21,7 +21,10 @@ import { } from "../../../../data/lovelace_custom_cards"; import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box"; import type { HassDialog } from "../../../../dialogs/make-dialog-manager"; -import { haStyleDialog } from "../../../../resources/styles"; +import { + haStyleDialog, + haStyleDialogFixedTop, +} from "../../../../resources/styles"; import type { HomeAssistant } from "../../../../types"; import { showSaveSuccessToast } from "../../../../util/toast-saved-success"; import "../../badges/hui-badge"; @@ -395,6 +398,7 @@ export class HuiDialogEditBadge static get styles(): CSSResultGroup { return [ haStyleDialog, + haStyleDialogFixedTop, css` :host { --code-mirror-max-height: calc(100vh - 176px); @@ -403,8 +407,6 @@ export class HuiDialogEditBadge ha-dialog { --mdc-dialog-max-width: 100px; --dialog-z-index: 6; - --dialog-surface-position: fixed; - --dialog-surface-top: 40px; --mdc-dialog-max-width: 90vw; --dialog-content-padding: 24px 12px; } diff --git a/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts b/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts index eb29fecb48cf..47bf05333030 100644 --- a/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts +++ b/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts @@ -21,7 +21,10 @@ import { } from "../../../../data/lovelace_custom_cards"; import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box"; import type { HassDialog } from "../../../../dialogs/make-dialog-manager"; -import { haStyleDialog } from "../../../../resources/styles"; +import { + haStyleDialog, + haStyleDialogFixedTop, +} from "../../../../resources/styles"; import type { HomeAssistant } from "../../../../types"; import { showToast } from "../../../../util/toast"; import { showSaveSuccessToast } from "../../../../util/toast-saved-success"; @@ -371,6 +374,7 @@ export class HuiDialogEditCard static get styles(): CSSResultGroup { return [ haStyleDialog, + haStyleDialogFixedTop, css` :host { --code-mirror-max-height: calc(100vh - 176px); @@ -379,8 +383,6 @@ export class HuiDialogEditCard ha-dialog { --mdc-dialog-max-width: 100px; --dialog-z-index: 6; - --dialog-surface-position: fixed; - --dialog-surface-top: 40px; --mdc-dialog-max-width: 90vw; --dialog-content-padding: 24px 12px; } From d10c923224a133915035c1546e4bf4058ee4f2aa Mon Sep 17 00:00:00 2001 From: Aidan Timson Date: Wed, 19 Nov 2025 14:17:10 +0000 Subject: [PATCH 12/35] Reuse for media manager --- src/components/media-player/dialog-media-manage.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/media-player/dialog-media-manage.ts b/src/components/media-player/dialog-media-manage.ts index da59c859fe60..13ed8b79c5d9 100644 --- a/src/components/media-player/dialog-media-manage.ts +++ b/src/components/media-player/dialog-media-manage.ts @@ -18,7 +18,7 @@ import { removeLocalMedia, } from "../../data/media_source"; import { showConfirmationDialog } from "../../dialogs/generic/show-dialog-box"; -import { haStyleDialog } from "../../resources/styles"; +import { haStyleDialog, haStyleDialogFixedTop } from "../../resources/styles"; import type { HomeAssistant } from "../../types"; import "../ha-button"; import "../ha-check-list-item"; @@ -305,6 +305,7 @@ class DialogMediaManage extends LitElement { static get styles(): CSSResultGroup { return [ haStyleDialog, + haStyleDialogFixedTop, css` ha-dialog { --dialog-z-index: 9; @@ -314,8 +315,6 @@ class DialogMediaManage extends LitElement { @media (min-width: 800px) { ha-dialog { --mdc-dialog-max-width: 800px; - --dialog-surface-position: fixed; - --dialog-surface-top: 40px; --mdc-dialog-max-height: calc(100vh - 72px); } } From f31259d1547902bd23d98dfb3a2d82a66033b5c5 Mon Sep 17 00:00:00 2001 From: Aidan Timson Date: Wed, 19 Nov 2025 14:17:48 +0000 Subject: [PATCH 13/35] Remove redundant code --- .../dialogs/dialog-dashboard-strategy-editor.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/panels/lovelace/editor/dashboard-strategy-editor/dialogs/dialog-dashboard-strategy-editor.ts b/src/panels/lovelace/editor/dashboard-strategy-editor/dialogs/dialog-dashboard-strategy-editor.ts index f5dbed6eaa92..0677d8e1f009 100644 --- a/src/panels/lovelace/editor/dashboard-strategy-editor/dialogs/dialog-dashboard-strategy-editor.ts +++ b/src/panels/lovelace/editor/dashboard-strategy-editor/dialogs/dialog-dashboard-strategy-editor.ts @@ -226,8 +226,6 @@ class DialogDashboardStrategyEditor extends LitElement { css` ha-dialog { --dialog-content-padding: 0 24px; - --dialog-surface-position: fixed; - --dialog-surface-top: 40px; --mdc-dialog-min-width: min(640px, calc(100% - 32px)); --mdc-dialog-max-width: min(640px, calc(100% - 32px)); --mdc-dialog-max-height: calc(100% - 80px); From 5a09c41700a832a9b5b97f7fd5ffeed48ee8c01c Mon Sep 17 00:00:00 2001 From: Aidan Timson Date: Wed, 19 Nov 2025 14:20:16 +0000 Subject: [PATCH 14/35] Reuse for quick bar --- src/dialogs/quick-bar/ha-quick-bar.ts | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/dialogs/quick-bar/ha-quick-bar.ts b/src/dialogs/quick-bar/ha-quick-bar.ts index ef1c6535cdc0..e996a5dd4b49 100644 --- a/src/dialogs/quick-bar/ha-quick-bar.ts +++ b/src/dialogs/quick-bar/ha-quick-bar.ts @@ -46,7 +46,11 @@ import { getPanelNameTranslationKey } from "../../data/panel"; import type { PageNavigation } from "../../layouts/hass-tabs-subpage"; import { configSections } from "../../panels/config/ha-panel-config"; import { HaFuse } from "../../resources/fuse"; -import { haStyleDialog, haStyleScrollbar } from "../../resources/styles"; +import { + haStyleDialog, + haStyleDialogFixedTop, + haStyleScrollbar, +} from "../../resources/styles"; import { loadVirtualizer } from "../../resources/virtualizer"; import type { HomeAssistant } from "../../types"; import { brandsUrl } from "../../util/brands-url"; @@ -986,6 +990,7 @@ export class QuickBar extends LitElement { return [ haStyleScrollbar, haStyleDialog, + haStyleDialogFixedTop, css` ha-list { position: relative; @@ -1010,8 +1015,6 @@ export class QuickBar extends LitElement { ha-dialog { --mdc-dialog-max-width: 800px; --mdc-dialog-min-width: 500px; - --dialog-surface-position: fixed; - --dialog-surface-top: var(--ha-space-10); --mdc-dialog-max-height: calc(100% - var(--ha-space-18)); } } From 14c7031110e12543d9cf7d893c8d4e5560b09218 Mon Sep 17 00:00:00 2001 From: Aidan Timson Date: Wed, 19 Nov 2025 14:28:01 +0000 Subject: [PATCH 15/35] Add --- src/resources/styles.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/resources/styles.ts b/src/resources/styles.ts index e8264715ad17..8ebeb3ba324b 100644 --- a/src/resources/styles.ts +++ b/src/resources/styles.ts @@ -186,7 +186,10 @@ export const haStyleDialogFixedTop = css` --vertical-align-dialog: flex-start; --dialog-surface-margin-top: max( var(--ha-space-10), - var(--safe-area-inset-top, var(--ha-space-0)) + calc( + var(--safe-area-inset-top, var(--ha-space-0)) + + var(--safe-area-inset-bottom, var(--ha-space-0)) + ) ); } From 1b13a4d406a1a9b3b29a1a9dbe718c0bb4dbd689 Mon Sep 17 00:00:00 2001 From: Aidan Timson Date: Wed, 19 Nov 2025 14:36:08 +0000 Subject: [PATCH 16/35] Use vars --- src/components/ha-dialog.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/ha-dialog.ts b/src/components/ha-dialog.ts index 6033aa8dfe4e..b68147acc337 100644 --- a/src/components/ha-dialog.ts +++ b/src/components/ha-dialog.ts @@ -113,10 +113,10 @@ export class HaDialog extends DialogBase { } .mdc-dialog .mdc-dialog__content { position: var(--dialog-content-position, relative); - padding: var(--dialog-content-padding, 24px); + padding: var(--dialog-content-padding, var(--ha-space-6)); } :host([hideactions]) .mdc-dialog .mdc-dialog__content { - padding-bottom: var(--dialog-content-padding, 24px); + padding-bottom: var(--dialog-content-padding, var(--ha-space-6)); } .mdc-dialog .mdc-dialog__surface { position: var(--dialog-surface-position, relative); From 67cda400015dc9e4ecfe184308fca5d79351fec1 Mon Sep 17 00:00:00 2001 From: Aidan Timson Date: Wed, 19 Nov 2025 16:06:39 +0000 Subject: [PATCH 17/35] Fix --- src/resources/styles.ts | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/resources/styles.ts b/src/resources/styles.ts index 8ebeb3ba324b..4f6195da7c6f 100644 --- a/src/resources/styles.ts +++ b/src/resources/styles.ts @@ -186,11 +186,12 @@ export const haStyleDialogFixedTop = css` --vertical-align-dialog: flex-start; --dialog-surface-margin-top: max( var(--ha-space-10), - calc( - var(--safe-area-inset-top, var(--ha-space-0)) + - var(--safe-area-inset-bottom, var(--ha-space-0)) - ) + var(--safe-area-inset-top, var(--ha-space-0)) ); + --mdc-dialog-min-height: calc(100vh - var(--dialog-surface-margin-top)); + --mdc-dialog-min-height: calc(100svh - var(--dialog-surface-margin-top)); + --mdc-dialog-max-height: calc(100vh - var(--dialog-surface-margin-top)); + --mdc-dialog-max-height: calc(100svh - var(--dialog-surface-margin-top)); } @media all and (max-width: 450px), all and (max-height: 500px) { From ac3d27eed8f4d3895515246599b82f680e593e3c Mon Sep 17 00:00:00 2001 From: Aidan Timson Date: Wed, 19 Nov 2025 16:08:23 +0000 Subject: [PATCH 18/35] Fix --- src/resources/styles.ts | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/resources/styles.ts b/src/resources/styles.ts index 4f6195da7c6f..ff413f04a803 100644 --- a/src/resources/styles.ts +++ b/src/resources/styles.ts @@ -184,10 +184,7 @@ export const haStyleDialogFixedTop = css` ha-dialog { /* Pin dialog to top so it doesn't jump when content changes size */ --vertical-align-dialog: flex-start; - --dialog-surface-margin-top: max( - var(--ha-space-10), - var(--safe-area-inset-top, var(--ha-space-0)) - ); + --dialog-surface-margin-top: var(--ha-space-10); --mdc-dialog-min-height: calc(100vh - var(--dialog-surface-margin-top)); --mdc-dialog-min-height: calc(100svh - var(--dialog-surface-margin-top)); --mdc-dialog-max-height: calc(100vh - var(--dialog-surface-margin-top)); From 64cfe3e48d165577ef80df1986e0bfc2f72c1e24 Mon Sep 17 00:00:00 2001 From: Aidan Timson Date: Wed, 19 Nov 2025 16:09:58 +0000 Subject: [PATCH 19/35] Adjust for safe area --- src/resources/styles.ts | 28 ++++++++++++++++++++++++---- 1 file changed, 24 insertions(+), 4 deletions(-) diff --git a/src/resources/styles.ts b/src/resources/styles.ts index ff413f04a803..205802e1e0e5 100644 --- a/src/resources/styles.ts +++ b/src/resources/styles.ts @@ -185,10 +185,30 @@ export const haStyleDialogFixedTop = css` /* Pin dialog to top so it doesn't jump when content changes size */ --vertical-align-dialog: flex-start; --dialog-surface-margin-top: var(--ha-space-10); - --mdc-dialog-min-height: calc(100vh - var(--dialog-surface-margin-top)); - --mdc-dialog-min-height: calc(100svh - var(--dialog-surface-margin-top)); - --mdc-dialog-max-height: calc(100vh - var(--dialog-surface-margin-top)); - --mdc-dialog-max-height: calc(100svh - var(--dialog-surface-margin-top)); + --mdc-dialog-min-height: calc( + 100vh - var(--dialog-surface-margin-top) - var( + --safe-area-inset-top, + var(--ha-space-0) + ) + ); + --mdc-dialog-min-height: calc( + 100svh - var(--dialog-surface-margin-top) - var( + --safe-area-inset-top, + var(--ha-space-0) + ) + ); + --mdc-dialog-max-height: calc( + 100vh - var(--dialog-surface-margin-top) - var( + --safe-area-inset-top, + var(--ha-space-0) + ) + ); + --mdc-dialog-max-height: calc( + 100svh - var(--dialog-surface-margin-top) - var( + --safe-area-inset-top, + var(--ha-space-0) + ) + ); } @media all and (max-width: 450px), all and (max-height: 500px) { From 6e9f3e216ebc97f6c7b4fa17b21cf76624fed9fc Mon Sep 17 00:00:00 2001 From: Aidan Timson Date: Wed, 19 Nov 2025 16:20:43 +0000 Subject: [PATCH 20/35] Fix --- src/resources/styles.ts | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/src/resources/styles.ts b/src/resources/styles.ts index 205802e1e0e5..9eb5b3a54ed6 100644 --- a/src/resources/styles.ts +++ b/src/resources/styles.ts @@ -167,10 +167,8 @@ export const haStyleDialog = css` --mdc-dialog-max-height: 100vh; --mdc-dialog-max-height: 100svh; --dialog-container-padding: var(--ha-space-0); - --dialog-surface-padding: var(--safe-area-inset-top, var(--ha-space-0)) - var(--safe-area-inset-right, var(--ha-space-0)) - var(--safe-area-inset-bottom, var(--ha-space-0)) - var(--safe-area-inset-left, var(--ha-space-0)); + --dialog-surface-padding: var(--safe-area-inset-x, var(--ha-space-0)) + var(--safe-area-inset-y, var(--ha-space-0)); --vertical-align-dialog: flex-end; --ha-dialog-border-radius: var(--ha-border-radius-square); } @@ -187,25 +185,25 @@ export const haStyleDialogFixedTop = css` --dialog-surface-margin-top: var(--ha-space-10); --mdc-dialog-min-height: calc( 100vh - var(--dialog-surface-margin-top) - var( - --safe-area-inset-top, + --safe-area-inset-y, var(--ha-space-0) ) ); --mdc-dialog-min-height: calc( 100svh - var(--dialog-surface-margin-top) - var( - --safe-area-inset-top, + --safe-area-inset-y, var(--ha-space-0) ) ); --mdc-dialog-max-height: calc( 100vh - var(--dialog-surface-margin-top) - var( - --safe-area-inset-top, + --safe-area-inset-y, var(--ha-space-0) ) ); --mdc-dialog-max-height: calc( 100svh - var(--dialog-surface-margin-top) - var( - --safe-area-inset-top, + --safe-area-inset-y, var(--ha-space-0) ) ); From 7c8255cf785d479f0ebfc4ba5cbd84965b3744fb Mon Sep 17 00:00:00 2001 From: Aidan Timson Date: Wed, 19 Nov 2025 16:22:34 +0000 Subject: [PATCH 21/35] Fix --- src/resources/styles.ts | 6 ++---- src/resources/theme/main.globals.ts | 3 +++ 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/resources/styles.ts b/src/resources/styles.ts index 9eb5b3a54ed6..e8787017cc9e 100644 --- a/src/resources/styles.ts +++ b/src/resources/styles.ts @@ -142,10 +142,8 @@ export const haStyleDialog = css` --mdc-dialog-max-width: 600px; --mdc-dialog-max-width: min(600px, 95vw); --justify-action-buttons: space-between; - --dialog-container-padding: var(--safe-area-inset-top, var(--ha-space-0)) - var(--safe-area-inset-right, var(--ha-space-0)) - var(--safe-area-inset-bottom, var(--ha-space-0)) - var(--safe-area-inset-left, var(--ha-space-0)); + --dialog-container-padding: var(--safe-area-inset-x, var(--ha-space-0)) + var(--safe-area-inset-y, var(--ha-space-0)); --dialog-surface-padding: var(--ha-space-0); } diff --git a/src/resources/theme/main.globals.ts b/src/resources/theme/main.globals.ts index 2b97b485b6d2..bfb6abc3730f 100644 --- a/src/resources/theme/main.globals.ts +++ b/src/resources/theme/main.globals.ts @@ -32,6 +32,9 @@ export const mainStyles = css` --safe-area-inset-bottom: var(--app-safe-area-inset-bottom, env(safe-area-inset-bottom, 0)); --safe-area-inset-left: var(--app-safe-area-inset-left, env(safe-area-inset-left, 0)); --safe-area-inset-right: var(--app-safe-area-inset-right, env(safe-area-inset-right, 0)); + + --safe-area-inset-y: calc(var(--safe-area-inset-top, 0) + var(--safe-area-inset-bottom, 0)); + --safe-area-inset-x: calc(var(--safe-area-inset-left, 0) + var(--safe-area-inset-right, 0)); } `; From 82ac775c3bb44ed947463db36b1280fe9fa4bbc8 Mon Sep 17 00:00:00 2001 From: Aidan Timson Date: Wed, 19 Nov 2025 16:31:08 +0000 Subject: [PATCH 22/35] Default --- src/resources/theme/main.globals.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/resources/theme/main.globals.ts b/src/resources/theme/main.globals.ts index bfb6abc3730f..d104c7c93029 100644 --- a/src/resources/theme/main.globals.ts +++ b/src/resources/theme/main.globals.ts @@ -33,8 +33,8 @@ export const mainStyles = css` --safe-area-inset-left: var(--app-safe-area-inset-left, env(safe-area-inset-left, 0)); --safe-area-inset-right: var(--app-safe-area-inset-right, env(safe-area-inset-right, 0)); - --safe-area-inset-y: calc(var(--safe-area-inset-top, 0) + var(--safe-area-inset-bottom, 0)); - --safe-area-inset-x: calc(var(--safe-area-inset-left, 0) + var(--safe-area-inset-right, 0)); + --safe-area-inset-y: calc(var(--safe-area-inset-top, 0px) + var(--safe-area-inset-bottom, 0px)); + --safe-area-inset-x: calc(var(--safe-area-inset-left, 0px) + var(--safe-area-inset-right, 0px)); } `; From 5e82ff6ff3fcc581ae1c2f0c9bc7789f486a40fe Mon Sep 17 00:00:00 2001 From: Aidan Timson Date: Wed, 19 Nov 2025 16:31:56 +0000 Subject: [PATCH 23/35] Fix --- src/resources/styles.ts | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/src/resources/styles.ts b/src/resources/styles.ts index e8787017cc9e..d2b98510be3a 100644 --- a/src/resources/styles.ts +++ b/src/resources/styles.ts @@ -142,8 +142,10 @@ export const haStyleDialog = css` --mdc-dialog-max-width: 600px; --mdc-dialog-max-width: min(600px, 95vw); --justify-action-buttons: space-between; - --dialog-container-padding: var(--safe-area-inset-x, var(--ha-space-0)) - var(--safe-area-inset-y, var(--ha-space-0)); + --dialog-container-padding: var(--safe-area-inset-top, var(--ha-space-0)) + var(--safe-area-inset-right, var(--ha-space-0)) + var(--safe-area-inset-bottom, var(--ha-space-0)) + var(--safe-area-inset-left, var(--ha-space-0)); --dialog-surface-padding: var(--ha-space-0); } @@ -165,8 +167,10 @@ export const haStyleDialog = css` --mdc-dialog-max-height: 100vh; --mdc-dialog-max-height: 100svh; --dialog-container-padding: var(--ha-space-0); - --dialog-surface-padding: var(--safe-area-inset-x, var(--ha-space-0)) - var(--safe-area-inset-y, var(--ha-space-0)); + --dialog-surface-padding: var(--safe-area-inset-top, var(--ha-space-0)) + var(--safe-area-inset-right, var(--ha-space-0)) + var(--safe-area-inset-bottom, var(--ha-space-0)) + var(--safe-area-inset-left, var(--ha-space-0)); --vertical-align-dialog: flex-end; --ha-dialog-border-radius: var(--ha-border-radius-square); } @@ -211,6 +215,10 @@ export const haStyleDialogFixedTop = css` ha-dialog { /* When in fullscreen, dialog should be attached to top */ --dialog-surface-margin-top: var(--ha-space-0); + --mdc-dialog-min-height: 100vh; + --mdc-dialog-min-height: 100svh; + --mdc-dialog-max-height: 100vh; + --mdc-dialog-max-height: 100svh; } } `; From a2436ad0e5b48f01614afce94930e68dcc9a745e Mon Sep 17 00:00:00 2001 From: Aidan Timson Date: Wed, 19 Nov 2025 16:33:37 +0000 Subject: [PATCH 24/35] Extra space at bottom --- src/resources/styles.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/resources/styles.ts b/src/resources/styles.ts index d2b98510be3a..7389e26dc2c0 100644 --- a/src/resources/styles.ts +++ b/src/resources/styles.ts @@ -186,25 +186,25 @@ export const haStyleDialogFixedTop = css` --vertical-align-dialog: flex-start; --dialog-surface-margin-top: var(--ha-space-10); --mdc-dialog-min-height: calc( - 100vh - var(--dialog-surface-margin-top) - var( + 100vh - var(--dialog-surface-margin-top) - var(--ha-space-2) - var( --safe-area-inset-y, var(--ha-space-0) ) ); --mdc-dialog-min-height: calc( - 100svh - var(--dialog-surface-margin-top) - var( + 100svh - var(--dialog-surface-margin-top) - var(--ha-space-2) - var( --safe-area-inset-y, var(--ha-space-0) ) ); --mdc-dialog-max-height: calc( - 100vh - var(--dialog-surface-margin-top) - var( + 100vh - var(--dialog-surface-margin-top) - var(--ha-space-2) - var( --safe-area-inset-y, var(--ha-space-0) ) ); --mdc-dialog-max-height: calc( - 100svh - var(--dialog-surface-margin-top) - var( + 100svh - var(--dialog-surface-margin-top) - var(--ha-space-2) - var( --safe-area-inset-y, var(--ha-space-0) ) From 03379086b7023d3486083d0319e54f57ef59a587 Mon Sep 17 00:00:00 2001 From: Aidan Timson Date: Thu, 20 Nov 2025 08:58:14 +0000 Subject: [PATCH 25/35] Remove override --- .../editor/card-editor/hui-dialog-create-card.ts | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/src/panels/lovelace/editor/card-editor/hui-dialog-create-card.ts b/src/panels/lovelace/editor/card-editor/hui-dialog-create-card.ts index e5f14f6ade43..8cb7bfb43044 100644 --- a/src/panels/lovelace/editor/card-editor/hui-dialog-create-card.ts +++ b/src/panels/lovelace/editor/card-editor/hui-dialog-create-card.ts @@ -184,19 +184,9 @@ export class HuiCreateDialogCard return [ haStyleDialog, css` - @media all and (max-width: 450px), all and (max-height: 500px) { - /* overrule the ha-style-dialog max-height on small screens */ - ha-dialog { - --mdc-dialog-max-height: 100%; - height: 100%; - } - } - @media all and (min-width: 850px) { ha-dialog { --mdc-dialog-min-width: 845px; - --mdc-dialog-min-height: calc(100vh - 72px); - --mdc-dialog-max-height: calc(100vh - 72px); } } From 46b90c6340aa418b838a7070316b7f7a201a5efb Mon Sep 17 00:00:00 2001 From: Aidan Timson Date: Thu, 20 Nov 2025 10:03:19 +0000 Subject: [PATCH 26/35] Remove --- src/resources/styles.ts | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/src/resources/styles.ts b/src/resources/styles.ts index 7389e26dc2c0..44ecf8c28f29 100644 --- a/src/resources/styles.ts +++ b/src/resources/styles.ts @@ -185,18 +185,6 @@ export const haStyleDialogFixedTop = css` /* Pin dialog to top so it doesn't jump when content changes size */ --vertical-align-dialog: flex-start; --dialog-surface-margin-top: var(--ha-space-10); - --mdc-dialog-min-height: calc( - 100vh - var(--dialog-surface-margin-top) - var(--ha-space-2) - var( - --safe-area-inset-y, - var(--ha-space-0) - ) - ); - --mdc-dialog-min-height: calc( - 100svh - var(--dialog-surface-margin-top) - var(--ha-space-2) - var( - --safe-area-inset-y, - var(--ha-space-0) - ) - ); --mdc-dialog-max-height: calc( 100vh - var(--dialog-surface-margin-top) - var(--ha-space-2) - var( --safe-area-inset-y, From ca85f8a78f0f0c4ce2baac7df2f6500f15f1cb1c Mon Sep 17 00:00:00 2001 From: Aidan Timson Date: Thu, 20 Nov 2025 10:19:32 +0000 Subject: [PATCH 27/35] Fix --- .../dialogs/dialog-dashboard-strategy-editor.ts | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/panels/lovelace/editor/dashboard-strategy-editor/dialogs/dialog-dashboard-strategy-editor.ts b/src/panels/lovelace/editor/dashboard-strategy-editor/dialogs/dialog-dashboard-strategy-editor.ts index 0677d8e1f009..ab9ad65505e7 100644 --- a/src/panels/lovelace/editor/dashboard-strategy-editor/dialogs/dialog-dashboard-strategy-editor.ts +++ b/src/panels/lovelace/editor/dashboard-strategy-editor/dialogs/dialog-dashboard-strategy-editor.ts @@ -226,8 +226,14 @@ class DialogDashboardStrategyEditor extends LitElement { css` ha-dialog { --dialog-content-padding: 0 24px; - --mdc-dialog-min-width: min(640px, calc(100% - 32px)); - --mdc-dialog-max-width: min(640px, calc(100% - 32px)); + --mdc-dialog-min-width: min( + 640px, + calc(100vw - 32px - var(--safe-area-inset-x)) + ); + --mdc-dialog-max-width: min( + 640px, + calc(100vw - 32px - var(--safe-area-inset-x)) + ); --mdc-dialog-max-height: calc(100% - 80px); } From 3ba9c4df7939ee980408785335ca2c073e43df16 Mon Sep 17 00:00:00 2001 From: Aidan Timson Date: Thu, 20 Nov 2025 10:32:02 +0000 Subject: [PATCH 28/35] Fix --- .../dialogs/dialog-dashboard-strategy-editor.ts | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/panels/lovelace/editor/dashboard-strategy-editor/dialogs/dialog-dashboard-strategy-editor.ts b/src/panels/lovelace/editor/dashboard-strategy-editor/dialogs/dialog-dashboard-strategy-editor.ts index ab9ad65505e7..b0f15e541ae1 100644 --- a/src/panels/lovelace/editor/dashboard-strategy-editor/dialogs/dialog-dashboard-strategy-editor.ts +++ b/src/panels/lovelace/editor/dashboard-strategy-editor/dialogs/dialog-dashboard-strategy-editor.ts @@ -242,9 +242,12 @@ class DialogDashboardStrategyEditor extends LitElement { ha-dialog { height: 100%; --dialog-surface-top: 0px; - --mdc-dialog-min-width: 100%; - --mdc-dialog-max-width: 100%; - --mdc-dialog-max-height: 100%; + --mdc-dialog-min-width: 100vw; + --mdc-dialog-max-width: 100vw; + --mdc-dialog-min-height: 100vh; + --mdc-dialog-min-height: 100svh; + --mdc-dialog-max-height: 100vh; + --mdc-dialog-max-height: 100svh; --dialog-content-padding: 8px; } } From 3507b936bd431eecdf6e38d3d81a129b6dcc0556 Mon Sep 17 00:00:00 2001 From: Aidan Timson Date: Thu, 20 Nov 2025 10:32:38 +0000 Subject: [PATCH 29/35] Remove --- .../dialogs/dialog-dashboard-strategy-editor.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/panels/lovelace/editor/dashboard-strategy-editor/dialogs/dialog-dashboard-strategy-editor.ts b/src/panels/lovelace/editor/dashboard-strategy-editor/dialogs/dialog-dashboard-strategy-editor.ts index b0f15e541ae1..b9af6903fe5e 100644 --- a/src/panels/lovelace/editor/dashboard-strategy-editor/dialogs/dialog-dashboard-strategy-editor.ts +++ b/src/panels/lovelace/editor/dashboard-strategy-editor/dialogs/dialog-dashboard-strategy-editor.ts @@ -228,11 +228,11 @@ class DialogDashboardStrategyEditor extends LitElement { --dialog-content-padding: 0 24px; --mdc-dialog-min-width: min( 640px, - calc(100vw - 32px - var(--safe-area-inset-x)) + calc(100vw - var(--safe-area-inset-x)) ); --mdc-dialog-max-width: min( 640px, - calc(100vw - 32px - var(--safe-area-inset-x)) + calc(100vw - var(--safe-area-inset-x)) ); --mdc-dialog-max-height: calc(100% - 80px); } From 358256b4731b1e4066e13c5f426a67202c41415b Mon Sep 17 00:00:00 2001 From: Aidan Timson Date: Thu, 20 Nov 2025 10:52:30 +0000 Subject: [PATCH 30/35] Fix --- src/components/media-player/dialog-media-manage.ts | 4 +++- .../media-player/dialog-media-player-browse.ts | 12 ++---------- src/dialogs/quick-bar/ha-quick-bar.ts | 4 +++- src/panels/config/dashboard/dialog-new-dashboard.ts | 8 ++++++-- .../zha/dialog-zha-manage-zigbee-device.ts | 4 +++- .../dialogs/dialog-dashboard-strategy-editor.ts | 4 +++- 6 files changed, 20 insertions(+), 16 deletions(-) diff --git a/src/components/media-player/dialog-media-manage.ts b/src/components/media-player/dialog-media-manage.ts index 13ed8b79c5d9..5d70708c41d4 100644 --- a/src/components/media-player/dialog-media-manage.ts +++ b/src/components/media-player/dialog-media-manage.ts @@ -315,7 +315,9 @@ class DialogMediaManage extends LitElement { @media (min-width: 800px) { ha-dialog { --mdc-dialog-max-width: 800px; - --mdc-dialog-max-height: calc(100vh - 72px); + --mdc-dialog-max-height: calc( + 100vh - var(--ha-space-18) - var(--safe-area-inset-y) + ); } } diff --git a/src/components/media-player/dialog-media-player-browse.ts b/src/components/media-player/dialog-media-player-browse.ts index 041a92910a9c..b39bc1470535 100644 --- a/src/components/media-player/dialog-media-player-browse.ts +++ b/src/components/media-player/dialog-media-player-browse.ts @@ -254,21 +254,13 @@ class DialogMediaPlayerBrowse extends LitElement { ha-dialog { --mdc-dialog-max-width: 800px; --mdc-dialog-max-height: calc( - 100vh - - 72px - var(--safe-area-inset-top, var(--ha-space-0)) - var( - --safe-area-inset-bottom, - var(--ha-space-0) - ) + 100vh - var(--ha-space-18) - var(--safe-area-inset-y) ); } ha-media-player-browse { position: initial; --media-browser-max-height: calc( - 100vh - - 145px - var(--safe-area-inset-top, var(--ha-space-0)) - var( - --safe-area-inset-bottom, - var(--ha-space-0) - ) + 100vh - 145px - var(--safe-area-inset-y) ); width: 700px; } diff --git a/src/dialogs/quick-bar/ha-quick-bar.ts b/src/dialogs/quick-bar/ha-quick-bar.ts index e996a5dd4b49..a3890da0bfd1 100644 --- a/src/dialogs/quick-bar/ha-quick-bar.ts +++ b/src/dialogs/quick-bar/ha-quick-bar.ts @@ -1015,7 +1015,9 @@ export class QuickBar extends LitElement { ha-dialog { --mdc-dialog-max-width: 800px; --mdc-dialog-min-width: 500px; - --mdc-dialog-max-height: calc(100% - var(--ha-space-18)); + --mdc-dialog-max-height: calc( + 100vh - var(--ha-space-18) - var(--safe-area-inset-y) + ); } } diff --git a/src/panels/config/dashboard/dialog-new-dashboard.ts b/src/panels/config/dashboard/dialog-new-dashboard.ts index 3a28c9b27bd0..d7212021e006 100644 --- a/src/panels/config/dashboard/dialog-new-dashboard.ts +++ b/src/panels/config/dashboard/dialog-new-dashboard.ts @@ -281,8 +281,12 @@ class DialogNewDashboard extends LitElement implements HassDialog { @media all and (min-width: 850px) { ha-dialog { --mdc-dialog-min-width: 845px; - --mdc-dialog-min-height: calc(100vh - 72px); - --mdc-dialog-max-height: calc(100vh - 72px); + --mdc-dialog-min-height: calc( + 100vh - var(--ha-space-18) - var(--safe-area-inset-y) + ); + --mdc-dialog-max-height: calc( + 100vh - var(--ha-space-18) - var(--safe-area-inset-y) + ); } } diff --git a/src/panels/config/integrations/integration-panels/zha/dialog-zha-manage-zigbee-device.ts b/src/panels/config/integrations/integration-panels/zha/dialog-zha-manage-zigbee-device.ts index d6ca61ab95fb..5f5c3b902db3 100644 --- a/src/panels/config/integrations/integration-panels/zha/dialog-zha-manage-zigbee-device.ts +++ b/src/panels/config/integrations/integration-panels/zha/dialog-zha-manage-zigbee-device.ts @@ -232,7 +232,9 @@ class DialogZHAManageZigbeeDevice extends LitElement { ha-dialog { --mdc-dialog-min-width: 560px; --mdc-dialog-max-width: 560px; - --mdc-dialog-max-height: calc(100% - 72px); + --mdc-dialog-max-height: calc( + 100vh - var(--ha-space-18) - var(--safe-area-inset-y) + ); } } diff --git a/src/panels/lovelace/editor/dashboard-strategy-editor/dialogs/dialog-dashboard-strategy-editor.ts b/src/panels/lovelace/editor/dashboard-strategy-editor/dialogs/dialog-dashboard-strategy-editor.ts index b9af6903fe5e..26f36d62b3b6 100644 --- a/src/panels/lovelace/editor/dashboard-strategy-editor/dialogs/dialog-dashboard-strategy-editor.ts +++ b/src/panels/lovelace/editor/dashboard-strategy-editor/dialogs/dialog-dashboard-strategy-editor.ts @@ -234,7 +234,9 @@ class DialogDashboardStrategyEditor extends LitElement { 640px, calc(100vw - var(--safe-area-inset-x)) ); - --mdc-dialog-max-height: calc(100% - 80px); + --mdc-dialog-max-height: calc( + 100vh - var(--ha-space-20) - var(--safe-area-inset-y) + ); } @media all and (max-width: 450px), all and (max-height: 500px) { From fa3e5d5789cda80ab93b55acbfbbafd18e6c8be0 Mon Sep 17 00:00:00 2001 From: Aidan Timson Date: Thu, 20 Nov 2025 10:53:33 +0000 Subject: [PATCH 31/35] Fix --- .../lovelace/editor/card-editor/hui-dialog-create-card.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/panels/lovelace/editor/card-editor/hui-dialog-create-card.ts b/src/panels/lovelace/editor/card-editor/hui-dialog-create-card.ts index 8cb7bfb43044..3b0bc9760c65 100644 --- a/src/panels/lovelace/editor/card-editor/hui-dialog-create-card.ts +++ b/src/panels/lovelace/editor/card-editor/hui-dialog-create-card.ts @@ -187,6 +187,12 @@ export class HuiCreateDialogCard @media all and (min-width: 850px) { ha-dialog { --mdc-dialog-min-width: 845px; + --mdc-dialog-min-height: calc( + 100vh - var(--ha-space-18) - var(--safe-area-inset-y) + ); + --mdc-dialog-max-height: calc( + 100vh - var(--ha-space-18) - var(--safe-area-inset-y) + ); } } From 8c06f08e0c4689df7d1b955130c88212330d231e Mon Sep 17 00:00:00 2001 From: Aidan Timson Date: Thu, 20 Nov 2025 12:13:17 +0000 Subject: [PATCH 32/35] Use y inset Co-authored-by: Petar Petrov --- src/components/media-player/dialog-media-player-browse.ts | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/src/components/media-player/dialog-media-player-browse.ts b/src/components/media-player/dialog-media-player-browse.ts index b39bc1470535..33c0126c6484 100644 --- a/src/components/media-player/dialog-media-player-browse.ts +++ b/src/components/media-player/dialog-media-player-browse.ts @@ -231,13 +231,7 @@ class DialogMediaPlayerBrowse extends LitElement { } ha-media-player-browse { - --media-browser-max-height: calc( - 100vh - - 65px - var(--safe-area-inset-top, var(--ha-space-0)) - var( - --safe-area-inset-bottom, - var(--ha-space-0) - ) - ); + --media-browser-max-height: calc(100vh - 65px - var(--safe-area-inset-y)); } :host(.opened) ha-media-player-browse { From 99c491c9821aac72db992dffd528b6c19b2d6c3a Mon Sep 17 00:00:00 2001 From: Aidan Timson Date: Thu, 20 Nov 2025 12:13:57 +0000 Subject: [PATCH 33/35] Format --- src/components/media-player/dialog-media-player-browse.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/media-player/dialog-media-player-browse.ts b/src/components/media-player/dialog-media-player-browse.ts index 33c0126c6484..8648b7c48cad 100644 --- a/src/components/media-player/dialog-media-player-browse.ts +++ b/src/components/media-player/dialog-media-player-browse.ts @@ -231,7 +231,9 @@ class DialogMediaPlayerBrowse extends LitElement { } ha-media-player-browse { - --media-browser-max-height: calc(100vh - 65px - var(--safe-area-inset-y)); + --media-browser-max-height: calc( + 100vh - 65px - var(--safe-area-inset-y) + ); } :host(.opened) ha-media-player-browse { From d846a39dc337d0ccd1c928ec8dd12d59cddfa2a6 Mon Sep 17 00:00:00 2001 From: Petar Petrov Date: Thu, 20 Nov 2025 14:25:46 +0200 Subject: [PATCH 34/35] Update src/components/media-player/dialog-media-player-browse.ts --- src/components/media-player/dialog-media-player-browse.ts | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/components/media-player/dialog-media-player-browse.ts b/src/components/media-player/dialog-media-player-browse.ts index 8648b7c48cad..344606456003 100644 --- a/src/components/media-player/dialog-media-player-browse.ts +++ b/src/components/media-player/dialog-media-player-browse.ts @@ -238,11 +238,7 @@ class DialogMediaPlayerBrowse extends LitElement { :host(.opened) ha-media-player-browse { height: calc( - 100vh - - 65px - var(--safe-area-inset-top, var(--ha-space-0)) - var( - --safe-area-inset-bottom, - var(--ha-space-0) - ) + 100vh - 65px - var(--safe-area-inset-y) ); } From 8cc80ac79db87bbef506f177e73214b01f88e782 Mon Sep 17 00:00:00 2001 From: Aidan Timson Date: Thu, 20 Nov 2025 14:08:05 +0000 Subject: [PATCH 35/35] Format --- src/components/media-player/dialog-media-player-browse.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/media-player/dialog-media-player-browse.ts b/src/components/media-player/dialog-media-player-browse.ts index 344606456003..17dbf7eb3589 100644 --- a/src/components/media-player/dialog-media-player-browse.ts +++ b/src/components/media-player/dialog-media-player-browse.ts @@ -237,9 +237,7 @@ class DialogMediaPlayerBrowse extends LitElement { } :host(.opened) ha-media-player-browse { - height: calc( - 100vh - 65px - var(--safe-area-inset-y) - ); + height: calc(100vh - 65px - var(--safe-area-inset-y)); } @media (min-width: 800px) {