Home-Assistant
/
frontend
mirror of https://github.com/home-assistant/frontend.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update safe areas for dialogs (#27008)

pull/27122/head
Aidan Timson 2025-09-22 14:38:39 +01:00 committed by GitHub
parent 6aa89cb532
commit 1e2d144d26
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 25 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/ha-dialog.ts
View File

@ -100,8 +100,6 @@ export class HaDialog extends DialogBase {
}
.mdc-dialog__container {
align-items: var(--vertical-align-dialog, center);
padding-top: var(--safe-area-inset-top);
padding-bottom: var(--safe-area-inset-bottom);
}
.mdc-dialog__title {
padding: 16px 16px 0 16px;
@ -123,11 +121,7 @@ export class HaDialog extends DialogBase {
position: var(--dialog-surface-position, relative);
top: var(--dialog-surface-top);
margin-top: var(--dialog-surface-margin-top);
min-width: calc(
var(--mdc-dialog-min-width, 100vw) - var(
--safe-area-inset-left
) - var(--safe-area-inset-right)
);
min-width: var(--mdc-dialog-min-width, 100vw);
min-height: var(--mdc-dialog-min-height, auto);
border-radius: var(--ha-dialog-border-radius, 24px);
-webkit-backdrop-filter: var(--ha-dialog-surface-backdrop-filter, none);
@ -144,18 +138,12 @@ export class HaDialog extends DialogBase {
@media all and (max-width: 450px), all and (max-height: 500px) {
.mdc-dialog .mdc-dialog__surface {
min-height: calc(
100vh - var(--safe-area-inset-top, 0px) - var(
--safe-area-inset-bottom,
0px
)
);
max-height: calc(
100vh - var(--safe-area-inset-top, 0px) - var(
--safe-area-inset-bottom,
0px
)
);
min-height: 100vh;
max-height: 100vh;
padding-top: var(--safe-area-inset-top);
padding-bottom: var(--safe-area-inset-bottom);
padding-left: var(--safe-area-inset-left);
padding-right: var(--safe-area-inset-right);
}
}

14
src/components/ha-md-dialog.ts
View File

@ -168,16 +168,18 @@ export class HaMdDialog extends Dialog {
@media all and (max-width: 450px), all and (max-height: 500px) {
:host(:not([type="alert"])) {
min-width: calc(
100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left)
);
max-width: calc(
100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left)
);
min-width: var(--mdc-dialog-min-width, 100vw);
min-height: 100%;
max-height: 100%;
--md-dialog-container-shape: 0;
}
.container {
padding-top: var(--safe-area-inset-top);
padding-bottom: var(--safe-area-inset-bottom);
padding-left: var(--safe-area-inset-left);
padding-right: var(--safe-area-inset-right);
}
}
::slotted(ha-dialog-header[slot="headline"]) {

8
src/layouts/hass-tabs-subpage-data-table.ts
View File

@ -882,12 +882,8 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
}
ha-dialog {
--mdc-dialog-min-width: calc(
100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left)
);
--mdc-dialog-max-width: calc(
100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left)
);
--mdc-dialog-min-width: 100vw;
--mdc-dialog-max-width: 100vw;
--mdc-dialog-min-height: 100%;
--mdc-dialog-max-height: 100%;
--vertical-align-dialog: flex-end;

8
src/panels/config/integrations/integration-panels/matter/dialog-matter-add-device.ts
View File

@ -221,12 +221,8 @@ class DialogMatterAddDevice extends LitElement {
--horizontal-padding: 16px;
}
ha-dialog {
--mdc-dialog-min-width: calc(
100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left)
);
--mdc-dialog-max-width: calc(
100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left)
);
--mdc-dialog-min-width: 100vw;
--mdc-dialog-max-width: 100vw;
}
}
.loading {

8
src/panels/config/integrations/integration-panels/zwave_js/add-node/dialog-zwave_js-add-node.ts
View File

@ -1111,12 +1111,8 @@ class DialogZWaveJSAddNode extends SubscribeMixin(LitElement) {
}
@media all and (max-width: 500px), all and (max-height: 500px) {
ha-dialog {
--mdc-dialog-min-width: calc(
100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left)
);
--mdc-dialog-max-width: calc(
100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left)
);
--mdc-dialog-min-width: 100vw;
--mdc-dialog-max-width: 100vw;
--mdc-dialog-min-height: 100%;
--mdc-dialog-max-height: 100%;
--vertical-align-dialog: flex-end;

8
src/panels/developer-tools/statistics/developer-tools-statistics.ts
View File

@ -802,12 +802,8 @@ class HaPanelDevStatistics extends KeyboardShortcutMixin(LitElement) {
}
ha-dialog {
--mdc-dialog-min-width: calc(
100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left)
);
--mdc-dialog-max-width: calc(
100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left)
);
--mdc-dialog-min-width: 100vw;
--mdc-dialog-max-width: 100vw;
--mdc-dialog-min-height: 100%;
--mdc-dialog-max-height: 100%;
--vertical-align-dialog: flex-end;

8
src/resources/styles.ts
View File

@ -155,12 +155,8 @@ export const haStyleDialog = css`
/* make dialog fullscreen on small screens */
@media all and (max-width: 450px), all and (max-height: 500px) {
ha-dialog {
--mdc-dialog-min-width: calc(
100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left)
);
--mdc-dialog-max-width: calc(
100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left)
);
--mdc-dialog-min-width: 100vw;
--mdc-dialog-max-width: 100vw;
--mdc-dialog-min-height: 100%;
--mdc-dialog-max-height: 100%;
--vertical-align-dialog: flex-end;