State display wrapping and fix full screen more-info (#991)

* state-info lower min-width, remove unnesecary wrapping div

* State normal line height, align flex baseline. Get rid of wrapping div

* fix full screen more-info-dialog

src/components/entity/state-info.html

@@ -9,7 +9,7 @@
     <style>
     :host {
       @apply --paper-font-body1;
-      min-width: 150px;
+      min-width: 120px;
       white-space: nowrap;
     }
 
@@ -37,7 +37,6 @@
     }
     </style>
 
-    <div>
       <state-badge state-obj='[[stateObj]]'></state-badge>
 
       <div class='info'>
@@ -52,7 +51,6 @@
           <slot>
         </template>
       </div>
-    </div>
   </template>
 </dom-module>
 

src/dialogs/ha-more-info-dialog.html

@@ -17,9 +17,6 @@
         font-size: 14px;
         width: 365px;
         border-radius: 2px;
-        --paper-dialog-scrollable: {
-          -webkit-overflow-scrolling: auto;
-        }
       }
 
       more-info-controls, more-info-settings {
@@ -34,8 +31,7 @@
           --more-info-header-color: var(--text-primary-color);
         }
         :host {
-          max-height: 100%;
-          height: 100%;
+          @apply(--ha-dialog-fullscreen);
         }
       }
 

src/dialogs/more-info/more-info-controls.html

@@ -32,10 +32,6 @@
         margin-bottom: 16px;
       }
 
-      paper-dialog-scrollable {
-        margin-bottom: 16px;
-      }
-
       :host([domain=camera]) paper-dialog-scrollable {
         margin: 0 -24px -5px;
       }

src/resources/ha-style.html

@@ -148,8 +148,8 @@
 <dom-module id='ha-style-dialog'>
   <template>
     <style>
-      @media all and (max-width: 450px), all and (max-height: 500px) {
-        paper-dialog {
+      :host {
+        --ha-dialog-narrow: {
           margin: 0;
           width: 100% !important;
           max-height: calc(100% - 64px);
@@ -162,6 +162,31 @@
           border-bottom-left-radius: 0px;
           border-bottom-right-radius: 0px;
         }
+
+        --ha-dialog-fullscreen: {
+          min-height: 100% !important;
+          width: 100% !important;
+          border-radius: 0px;
+          position: fixed !important;
+          margin: 0;
+        }
+
+        --paper-dialog-scrollable: {
+          -webkit-overflow-scrolling: auto;
+          margin-bottom: 16px;
+        }
+      }
+
+      @media all and (max-width: 450px), all and (max-height: 500px) {
+        paper-dialog {
+          @apply(--ha-dialog-narrow);
+        }
+        :host {
+          --paper-dialog-scrollable: {
+            -webkit-overflow-scrolling: auto;
+            margin-bottom: 0px;
+          }
+        }
       }
     </style>
   </template>

src/state-summary/state-card-display.html

@@ -8,25 +8,28 @@
 
 <dom-module id="state-card-display">
   <template>
-    <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
     <style>
+
+      :host {
+        @apply(--layout-horizontal);
+        @apply(--layout-justified);
+        @apply(--layout-baseline);
+      }
+
       .state {
         @apply --paper-font-body1;
         color: var(--primary-text-color);
-
         margin-left: 16px;
         text-align: right;
-        line-height: 40px;
+        flex: 1 0 50px;
       }
       .state.has-unit_of_measurement {
         white-space: nowrap;
       }
     </style>
 
-    <div class='horizontal justified layout'>
-      <state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
-      <div class$='[[computeClassNames(stateObj)]]'>[[computeStateDisplay(localize, stateObj, language)]]</div>
-    </div>
+    <state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
+    <div class$='[[computeClassNames(stateObj)]]'>[[computeStateDisplay(localize, stateObj, language)]]</div>
   </template>
 </dom-module>