From 9dc809cdb9898b77ea07cbe0b9d2490392caaef2 Mon Sep 17 00:00:00 2001
From: NovapaX <maarten@oosterwijkbrandpreventie.nl>
Date: Wed, 14 Mar 2018 19:42:10 +0100
Subject: [PATCH] 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         |  4 +--
 src/dialogs/ha-more-info-dialog.html          |  6 +---
 src/dialogs/more-info/more-info-controls.html |  4 ---
 src/resources/ha-style.html                   | 29 +++++++++++++++++--
 src/state-summary/state-card-display.html     | 17 ++++++-----
 5 files changed, 39 insertions(+), 21 deletions(-)

diff --git a/src/components/entity/state-info.html b/src/components/entity/state-info.html
index bfb01b22f7..cdab3fa548 100644
--- a/src/components/entity/state-info.html
+++ b/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>
 
diff --git a/src/dialogs/ha-more-info-dialog.html b/src/dialogs/ha-more-info-dialog.html
index ec785fda05..3b7c29826e 100644
--- a/src/dialogs/ha-more-info-dialog.html
+++ b/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);
         }
       }
 
diff --git a/src/dialogs/more-info/more-info-controls.html b/src/dialogs/more-info/more-info-controls.html
index 516ef89f70..25c137aff9 100644
--- a/src/dialogs/more-info/more-info-controls.html
+++ b/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;
       }
diff --git a/src/resources/ha-style.html b/src/resources/ha-style.html
index b932abdb6b..d956eedd4c 100644
--- a/src/resources/ha-style.html
+++ b/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>
diff --git a/src/state-summary/state-card-display.html b/src/state-summary/state-card-display.html
index 1eb0f0deea..9998d9a474 100644
--- a/src/state-summary/state-card-display.html
+++ b/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>