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

Safe area: dialogs (#26814)

Browse Source 
* dialogs: apply safe-area insets (content padding, header mobile insets, more-info top margin)

* Set default (40px prio if not set)

* Set default (default padding prio if not set)

* Set default to avoid issues

* Set on container

* Sort

* No longer needed

* No longer needed

* No longer needed

* Remove

* Restore

* Restore

* Move to padding

* Switch to margins, set min and max height

* Set default

* Account for insets to remove extra scrollbars

* Fix content for filter dialog

* Move margins outside of media check

* Use padding instead

* use min-width instead

* Use padding for just top and bottom

* Calculate lit-virtualizer to include safe areas

* Calculate lit-virtualizer to include safe areas

* Fix double scrollbar from previous

* Remove calculation

* Default

* Remove double calculation

* Remove double calculation
This commit is contained in:
Aidan Timson
2025-09-08 08:39:27 +01:00
committed by GitHub
parent 07fdd5b7af
commit 62714b2b68
11 changed files with 66 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -90,7 +90,7 @@ export class HaDialog extends DialogBase {
}
.mdc-dialog__actions {
justify-content: var(--justify-action-buttons, flex-end);
padding: 12px 16px max(var(--safe-area-inset-bottom), 16px) 16px;
padding: 12px 16px 16px 16px;
}
.mdc-dialog__actions span:nth-child(1) {
flex: var(--secondary-action-button-flex, unset);
@@ -100,6 +100,8 @@ 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;
@@ -115,15 +117,17 @@ export class HaDialog extends DialogBase {
padding: var(--dialog-content-padding, 24px);
}
:host([hideactions]) .mdc-dialog .mdc-dialog__content {
padding-bottom: max(
var(--dialog-content-padding, 24px),
var(--safe-area-inset-bottom)
);
padding-bottom: var(--dialog-content-padding, 24px);
}
.mdc-dialog .mdc-dialog__surface {
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-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);
@@ -137,6 +141,24 @@ export class HaDialog extends DialogBase {
display: flex;
flex-direction: column;
}
@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
)
);
}
}
.header_title {
display: flex;
align-items: center;