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

Fix ha dialog default size (#27415)

Browse Source 
* Don't hardcode width height on mobile for all dialogs

* Don't set min width on desktop
This commit is contained in:
Paul Bottein
2025-10-08 17:39:15 +02:00
committed by Bram Kragten
parent 84c4396c13
commit 8ae9edb1ef
2 changed files with 5 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -121,7 +121,7 @@ export class HaDialog extends DialogBase {
position: var(--dialog-surface-position, relative); position: var(--dialog-surface-position, relative);
top: var(--dialog-surface-top); top: var(--dialog-surface-top);
margin-top: var(--dialog-surface-margin-top); margin-top: var(--dialog-surface-margin-top);
min-width: var(--mdc-dialog-min-width, 100vw); min-width: var(--mdc-dialog-min-width, auto);
min-height: var(--mdc-dialog-min-height, auto); min-height: var(--mdc-dialog-min-height, auto);
border-radius: var(--ha-dialog-border-radius, 24px); border-radius: var(--ha-dialog-border-radius, 24px);
-webkit-backdrop-filter: var(--ha-dialog-surface-backdrop-filter, none); -webkit-backdrop-filter: var(--ha-dialog-surface-backdrop-filter, none);
@@ -130,25 +130,13 @@ export class HaDialog extends DialogBase {
--ha-dialog-surface-background, --ha-dialog-surface-background,
var(--mdc-theme-surface, #fff) var(--mdc-theme-surface, #fff)
); );
padding: var(--dialog-surface-padding);
} }
:host([flexContent]) .mdc-dialog .mdc-dialog__content { :host([flexContent]) .mdc-dialog .mdc-dialog__content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
@media all and (max-width: 450px), all and (max-height: 500px) {
.mdc-dialog .mdc-dialog__surface {
min-height: 100vh;
min-height: 100svh;
max-height: 100vh;
max-height: 100svh;
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);
}
}
.header_title { .header_title {
display: flex; display: flex;
align-items: center; align-items: center;

3
src/resources/styles.ts
View File

@@ -161,6 +161,9 @@ export const haStyleDialog = css`
--mdc-dialog-min-height: 100svh; --mdc-dialog-min-height: 100svh;
--mdc-dialog-max-height: 100vh; --mdc-dialog-max-height: 100vh;
--mdc-dialog-max-height: 100svh; --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);
--vertical-align-dialog: flex-end; --vertical-align-dialog: flex-end;
--ha-dialog-border-radius: 0; --ha-dialog-border-radius: 0;
} }