jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-11-09 02:49:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix mobile ha-dialog height in Browser (#27298)

Browse Source 
Enhance dialog responsiveness by adjusting min/max height to use svh units
This commit is contained in:
Wendelin
2025-10-03 12:48:08 +02:00
committed by Bram Kragten
parent c9feb0b75f
commit e899587307
2 changed files with 6 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -139,7 +139,9 @@ export class HaDialog extends DialogBase {
@media all and (max-width: 450px), all and (max-height: 500px) { @media all and (max-width: 450px), all and (max-height: 500px) {
.mdc-dialog .mdc-dialog__surface { .mdc-dialog .mdc-dialog__surface {
min-height: 100vh; min-height: 100vh;
min-height: 100svh;
max-height: 100vh; max-height: 100vh;
max-height: 100svh;
padding-top: var(--safe-area-inset-top); padding-top: var(--safe-area-inset-top);
padding-bottom: var(--safe-area-inset-bottom); padding-bottom: var(--safe-area-inset-bottom);
padding-left: var(--safe-area-inset-left); padding-left: var(--safe-area-inset-left);

6
src/resources/styles.ts
View File

@@ -157,8 +157,10 @@ export const haStyleDialog = css`
ha-dialog { ha-dialog {
--mdc-dialog-min-width: 100vw; --mdc-dialog-min-width: 100vw;
--mdc-dialog-max-width: 100vw; --mdc-dialog-max-width: 100vw;
--mdc-dialog-min-height: 100%; --mdc-dialog-min-height: 100vh;
--mdc-dialog-max-height: 100%; --mdc-dialog-min-height: 100svh;
--mdc-dialog-max-height: 100vh;
--mdc-dialog-max-height: 100svh;
--vertical-align-dialog: flex-end; --vertical-align-dialog: flex-end;
--ha-dialog-border-radius: 0; --ha-dialog-border-radius: 0;
} }