From 44c325a9295cb6dab5db6662d51ad5d08dac3970 Mon Sep 17 00:00:00 2001
From: NovapaX <maarten@oosterwijkbrandpreventie.nl>
Date: Tue, 27 Feb 2018 07:10:05 +0100
Subject: [PATCH] prevent state display line-wrapping (#932)

* prevent state display line-wrapping
Only for applies to default statecards (state-card-display), not for
component specific statecards.

* compute class names function

* apply style to calculated class

* var -> const
---
 src/state-summary/state-card-display.html | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/state-summary/state-card-display.html b/src/state-summary/state-card-display.html
index 4ab15fe771..1eb0f0deea 100644
--- a/src/state-summary/state-card-display.html
+++ b/src/state-summary/state-card-display.html
@@ -18,11 +18,14 @@
         text-align: right;
         line-height: 40px;
       }
+      .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='state'>[[computeStateDisplay(localize, stateObj, language)]]</div>
+      <div class$='[[computeClassNames(stateObj)]]'>[[computeStateDisplay(localize, stateObj, language)]]</div>
     </div>
   </template>
 </dom-module>
@@ -45,6 +48,14 @@ class StateCardDisplay extends window.hassMixins.LocalizeMixin(Polymer.Element)
   computeStateDisplay(localize, stateObj, language) {
     return window.hassUtil.computeStateDisplay(localize, stateObj, language);
   }
+
+  computeClassNames(stateObj) {
+    const classes = [
+      'state',
+      window.hassUtil.attributeClassNames(stateObj, ['unit_of_measurement']),
+    ];
+    return classes.join(' ');
+  }
 }
 customElements.define(StateCardDisplay.is, StateCardDisplay);
 </script>