Skip to content

Fix ha-wa-dialog fullscreen and make alerts not fullscreen #28175

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
piitaya merged 31 commits into from
Nov 27, 2025
Merged

Fix ha-wa-dialog fullscreen and make alerts not fullscreen #28175

Show file tree
Hide file tree
Changes from 16 commits
Commits
Show all changes
31 commits
Select commit Hold shift + click to select a range
c8e2a2a
Set minimum safe areas in ha-wa-dialog
timmo001 Nov 27, 2025
57a5b6e
Add debug section to dialog
timmo001 Nov 27, 2025
eb92e3a
Add type to wa-dialog
timmo001 Nov 27, 2025
b11f866
Move custom logic for close button to alert type in wa
timmo001 Nov 27, 2025
6db2b02
Safe width
timmo001 Nov 27, 2025
9f2abcf
Safe width on standard dialog
timmo001 Nov 27, 2025
64b6411
Flip
timmo001 Nov 27, 2025
a337d4d
Safe area on standard dialog (actual)
timmo001 Nov 27, 2025
e5d33ee
Move safe area 0px clamp to globals
timmo001 Nov 27, 2025
d7238a0
Create safe width and height globals
timmo001 Nov 27, 2025
5302eb9
Dont rely on ha-vars
timmo001 Nov 27, 2025
d5a8511
Remove use of svh/svw, use globals
timmo001 Nov 27, 2025
53b66db
Fix
timmo001 Nov 27, 2025
2b89e31
Fix
timmo001 Nov 27, 2025
9c22e3a
Remove test
timmo001 Nov 27, 2025
888f055
Revert "Add debug section to dialog"
timmo001 Nov 27, 2025
dc17ac6
Apply suggestion from @bramkragten
timmo001 Nov 27, 2025
1e947a4
Use transform to move dialog based on offset x
timmo001 Nov 27, 2025
e38a31a
Translate X and Y
timmo001 Nov 27, 2025
a261696
Revert unwanted changes to dialog-box
timmo001 Nov 27, 2025
eceec1a
Remove extra fallback
timmo001 Nov 27, 2025
32dbd2a
Format
timmo001 Nov 27, 2025
0b6abb5
Cleanup
timmo001 Nov 27, 2025
1844680
Explain
timmo001 Nov 27, 2025
9dfe9f4
Align title to content
timmo001 Nov 27, 2025
20fc34d
Remove clamp on safe areas
timmo001 Nov 27, 2025
c7a9553
Fix fullscreen
timmo001 Nov 27, 2025
2ee6b2c
Explain transform
timmo001 Nov 27, 2025
af7c6d9
Restore old fullscreen heights
timmo001 Nov 27, 2025
44c366f
Add rtl support
piitaya Nov 27, 2025
71ad83b
Compensate mobile margin
piitaya Nov 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 32 additions & 36 deletions src/components/ha-wa-dialog.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { css, html, LitElement } from "lit";
import { css, html, LitElement, nothing } from "lit";
import {
customElement,
eventOptions,
Expand Down Expand Up @@ -53,6 +53,7 @@ export type DialogWidth = "small" | "medium" | "large" | "full";
* @cssprop --dialog-surface-margin-top - Top margin for the dialog surface.
*
* @attr {boolean} open - Controls the dialog open state.
* @attr {("alert"|"standard")} type - Dialog type. Defaults to "standard".
* @attr {("small"|"medium"|"large"|"full")} width - Preferred dialog width preset. Defaults to "medium".
* @attr {boolean} prevent-scrim-close - Prevents closing the dialog by clicking the scrim/overlay. Defaults to false.
* @attr {string} header-title - Header title text. If not set, the headerTitle slot is used.
Expand Down Expand Up @@ -84,6 +85,9 @@ export class HaWaDialog extends LitElement {
@property({ type: Boolean, reflect: true })
public open = false;

@property({ type: String, reflect: true, attribute: "type" })
public type: "alert" | "standard" = "standard";

@property({ type: String, reflect: true, attribute: "width" })
public width: DialogWidth = "medium";

Expand Down Expand Up @@ -141,11 +145,13 @@ export class HaWaDialog extends LitElement {
.showBorder=${this._bodyScrolled}
>
<slot name="headerNavigationIcon" slot="navigationIcon">
<ha-icon-button
data-dialog="close"
.label=${this.hass?.localize("ui.common.close") ?? "Close"}
.path=${mdiClose}
></ha-icon-button>
${this.type === "alert"
? nothing
: html`<ha-icon-button
data-dialog="close"
.label=${this.hass?.localize("ui.common.close") ?? "Close"}
.path=${mdiClose}
></ha-icon-button>`}
</slot>
${this.headerTitle !== undefined
? html`<span slot="title" class="title" id="ha-wa-dialog-title">
Expand Down Expand Up @@ -198,18 +204,7 @@ export class HaWaDialog extends LitElement {
haStyleScrollbar,
css`
wa-dialog {
--full-width: var(
--ha-dialog-width-full,
min(
95vw,
calc(
100vw - var(--safe-area-inset-left, var(--ha-space-0)) - var(
--safe-area-inset-right,
var(--ha-space-0)
)
)
)
);
--full-width: var(--ha-dialog-width-full, min(95vw, var(--safe-width)));
--width: min(var(--ha-dialog-width-md, 580px), var(--full-width));
--spacing: var(--dialog-content-padding, var(--ha-space-6));
--show-duration: var(--ha-dialog-show-duration, 200ms);
Expand All @@ -226,8 +221,7 @@ export class HaWaDialog extends LitElement {
--ha-dialog-border-radius,
var(--ha-border-radius-3xl)
);
max-width: var(--ha-dialog-max-width, 100vw);
max-width: var(--ha-dialog-max-width, 100svw);
max-width: var(--ha-dialog-max-width, var(--safe-width));
}

:host([width="small"]) wa-dialog {
Expand All @@ -247,7 +241,7 @@ export class HaWaDialog extends LitElement {
max-width: var(--width, var(--full-width));
max-height: var(
--ha-dialog-max-height,
calc(100% - var(--ha-space-20))
calc(var(--safe-height) - var(--ha-space-20))
);
min-height: var(--ha-dialog-min-height);
position: var(--dialog-surface-position, relative);
Expand All @@ -258,23 +252,25 @@ export class HaWaDialog extends LitElement {
}

@media all and (max-width: 450px), all and (max-height: 500px) {
:host {
:host([type="standard"]) {
--ha-dialog-border-radius: var(--ha-space-0);
}

wa-dialog {
--full-width: var(--ha-dialog-width-full, 100vw);
}

wa-dialog::part(dialog) {
min-height: var(--ha-dialog-min-height, 100vh);
min-height: var(--ha-dialog-min-height, 100svh);
max-height: var(--ha-dialog-max-height, 100vh);
max-height: var(--ha-dialog-max-height, 100svh);
padding-top: var(--safe-area-inset-top, var(--ha-space-0));
padding-bottom: var(--safe-area-inset-bottom, var(--ha-space-0));
padding-left: var(--safe-area-inset-left, var(--ha-space-0));
padding-right: var(--safe-area-inset-right, var(--ha-space-0));
wa-dialog {
/* Make the container fill the whole screen width and not the safe width */
--full-width: var(--ha-dialog-width-full, 100vw);
--width: var(--full-width);
}

wa-dialog::part(dialog) {
/* Make the dialog fill the whole screen height and not the safe height */
min-height: var(--ha-dialog-min-height, 100vh);
max-height: var(--ha-dialog-max-height, 100vh);
/* Use safe area as padding instead of the container size */
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);
}
}
}

Expand Down
43 changes: 22 additions & 21 deletions src/dialogs/generic/dialog-box.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
import { mdiAlertOutline, mdiClose } from "@mdi/js";
import { mdiAlertOutline } from "@mdi/js";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, query, state } from "lit/decorators";
import { ifDefined } from "lit/directives/if-defined";
import { fireEvent } from "../../common/dom/fire_event";
import "../../components/ha-button";
import "../../components/ha-dialog-footer";
import "../../components/ha-dialog-header";
import "../../components/ha-svg-icon";
import "../../components/ha-textfield";
import type { HaTextField } from "../../components/ha-textfield";
Expand Down Expand Up @@ -60,35 +59,32 @@ class DialogBox extends LitElement {
(this._params.confirmation &&
this.hass.localize("ui.dialogs.generic.default_confirmation_title"));

const titleId = this._params.warning ? "dialog-box-title" : undefined;

return html`
<ha-wa-dialog
.hass=${this.hass}
.open=${this._open}
type=${confirmPrompt ? "alert" : "standard"}
?prevent-scrim-close=${confirmPrompt}
aria-labelledby=${ifDefined(titleId)}
@closed=${this._dialogClosed}
aria-labelledby="dialog-box-title"
aria-describedby="dialog-box-description"
header-title=${ifDefined(
!this._params.warning ? (dialogTitle ?? undefined) : undefined
)}
>
<ha-dialog-header slot="header">
${!confirmPrompt
? html`<slot name="headerNavigationIcon" slot="navigationIcon">
<ha-icon-button
data-dialog="close"
.label=${this.hass?.localize("ui.common.close") ?? "Close"}
.path=${mdiClose}
></ha-icon-button
></slot>`
: nothing}
<span slot="title" id="dialog-box-title">
${this._params.warning
? html`<ha-svg-icon
${this._params.warning
? html`
<span slot="headerTitle" id="dialog-box-title" class="title-icon">
<ha-svg-icon
.path=${mdiAlertOutline}
style="color: var(--warning-color)"
></ha-svg-icon> `
: nothing}
${dialogTitle}
</span>
</ha-dialog-header>
></ha-svg-icon>
${dialogTitle}
</span>
`
: nothing}
<div id="dialog-box-description">
${this._params.text ? html` <p>${this._params.text}</p> ` : ""}
${this._params.prompt
Expand Down Expand Up @@ -196,6 +192,11 @@ class DialogBox extends LitElement {
.secondary {
color: var(--secondary-text-color);
}
.title-icon {
display: inline-flex;
align-items: center;
gap: var(--ha-space-2, 8px);
}
ha-textfield {
width: 100%;
}
Expand Down
11 changes: 7 additions & 4 deletions src/resources/theme/main.globals.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,13 +28,16 @@ export const mainStyles = css`
--margin-title-rtl: 0 24px 0 0;

/* safe-area-insets */
--safe-area-inset-top: var(--app-safe-area-inset-top, env(safe-area-inset-top, 0));
--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-top: max(var(--app-safe-area-inset-top, env(safe-area-inset-top, 0)), 0px);
Copy link
Member

@bramkragten bramkragten Nov 27, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why the max? safe area can never be negative right?

Copy link
Member Author

@timmo001 timmo001 Nov 27, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I didn't think this either, this is the main potential fix for iOS (will need testing as I only have android or desktop)

From @piitaya :
image
image

Copy link
Member

@piitaya piitaya Nov 27, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it's not because of negative margin, Looks like the dialog is push from the bottom (there is a grey bar)

Copy link
Member Author

@timmo001 timmo001 Nov 27, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah this makes more sense

Copy link
Member Author

@timmo001 timmo001 Nov 27, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

OK reverted.

Reproduced this in android too, it has the same effect on the fullscreen dialog of pushing the header/dialog up with the nav bar

Screenshot_20251127-155433.png

--safe-area-inset-bottom: max(var(--app-safe-area-inset-bottom, env(safe-area-inset-bottom, 0)), 0px);
--safe-area-inset-left: max(var(--app-safe-area-inset-left, env(safe-area-inset-left, 0)), 0px);
--safe-area-inset-right: max(var(--app-safe-area-inset-right, env(safe-area-inset-right, 0)), 0px);

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

--safe-width: calc(100vw - var(--safe-area-inset-left, 0px) - var(--safe-area-inset-right, 0px));
--safe-height: calc(100vh - var(--safe-area-inset-top, 0px) - var(--safe-area-inset-bottom, 0px));
}
`;

Expand Down