@@ -678,8 +678,8 @@ export class MoreInfoDialog extends LitElement {
678678 /* Set the top top of the dialog to a fixed position, so it doesnt jump when the content changes size */
679679 --vertical-align-dialog : flex-start;
680680 --dialog-surface-margin-top : max (
681- 40 px ,
682- var (--safe-area-inset-top , 0 px )
681+ var ( --ha-space-10 ) ,
682+ var (--safe-area-inset-top , var ( --ha-space-0 ) )
683683 );
684684 --dialog-content-padding : 0 ;
685685 }
@@ -698,14 +698,15 @@ export class MoreInfoDialog extends LitElement {
698698 }
699699
700700 ha-more-info-history-and-logbook {
701- padding : 8px 24px 24px 24px ;
701+ padding : var (--ha-space-2 ) var (--ha-space-6 ) var (--ha-space-6 )
702+ var (--ha-space-6 );
702703 display : block;
703704 }
704705
705706 @media all and (max-width : 450px ), all and (max-height : 500px ) {
706707 /* When in fullscreen dialog should be attached to top */
707708 ha-dialog {
708- --dialog-surface-margin-top : 0 px ;
709+ --dialog-surface-margin-top : var ( --ha-space-0 ) ;
709710 }
710711 }
711712
@@ -730,7 +731,8 @@ export class MoreInfoDialog extends LitElement {
730731 display : flex;
731732 flex-direction : column;
732733 align-items : flex-start;
733- margin : 0 0 -10px 0 ;
734+ margin : var (--ha-space-0 ) var (--ha-space-0 )
735+ calc (var (--ha-space-2 ) * -1 ) var (--ha-space-0 );
734736 }
735737
736738 .title p {
@@ -752,9 +754,9 @@ export class MoreInfoDialog extends LitElement {
752754 font-size : var (--ha-font-size-m );
753755 line-height : 16px ;
754756 --mdc-icon-size : 16px ;
755- padding : 4 px ;
756- margin : -4 px ;
757- margin-top : -10 px ;
757+ padding : var ( --ha-space-1 ) ;
758+ margin : calc ( var ( --ha-space-1 ) * -1 ) ;
759+ margin-top : calc ( var ( --ha-space-2 ) * -1 ) ;
758760 background : none;
759761 border : none;
760762 outline : none;
0 commit comments