From d32cde3cf8099b6afaa9c78c665cb2d90ea8d600 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Wed, 1 Mar 2023 14:42:42 +0100 Subject: [PATCH] Fix more info position (#15650) --- src/dialogs/more-info/ha-more-info-dialog.ts | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/dialogs/more-info/ha-more-info-dialog.ts b/src/dialogs/more-info/ha-more-info-dialog.ts index 6b4f412ce7..04ebaeebf2 100644 --- a/src/dialogs/more-info/ha-more-info-dialog.ts +++ b/src/dialogs/more-info/ha-more-info-dialog.ts @@ -428,10 +428,12 @@ export class MoreInfoDialog extends LitElement { haStyleDialog, css` ha-dialog { + /* Set the top top of the dialog to a fixed position, so it doesnt jump when the content changes size */ + --vertical-align-dialog: flex-start; + --dialog-surface-margin-top: 40px; /* This is needed for the tooltip of the history charts to be positioned correctly */ --dialog-surface-position: static; --dialog-content-position: static; - --vertical-align-dialog: flex-start; --dialog-content-padding: 0; } @@ -469,11 +471,17 @@ export class MoreInfoDialog extends LitElement { text-overflow: ellipsis; } + @media all and (max-width: 450px), all and (max-height: 500px) { + /* When in fullscreen dialog should be attached to top */ + ha-dialog { + --dialog-surface-margin-top: 0px; + } + } + @media all and (min-width: 600px) and (min-height: 501px) { ha-dialog { --mdc-dialog-min-width: 560px; --mdc-dialog-max-width: 580px; - --dialog-surface-margin-top: 40px; --mdc-dialog-max-height: calc(100% - 72px); }