From e458cf1388e78fded6912e0adc011c91f2f8f33e Mon Sep 17 00:00:00 2001
From: quthla <quthla@users.noreply.github.com>
Date: Thu, 26 Jul 2018 00:56:25 +0200
Subject: [PATCH] Fix name styling (#1522)

* Fix name styling

* Update hui-glance-card.js

* Demo

* Update demo-hui-glance-card.js

* Update hui-glance-card.js
---
 gallery/src/demos/demo-hui-glance-card.js    | 14 ++++++++++++++
 src/panels/lovelace/cards/hui-glance-card.js |  5 ++++-
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/gallery/src/demos/demo-hui-glance-card.js b/gallery/src/demos/demo-hui-glance-card.js
index bdb94cca9e..6ba056d32a 100644
--- a/gallery/src/demos/demo-hui-glance-card.js
+++ b/gallery/src/demos/demo-hui-glance-card.js
@@ -127,6 +127,20 @@ const CONFIGS = [
     - light.kitchen_lights
     `
   },
+  {
+    heading: 'Selectively hidden name',
+    config: `
+- type: glance
+  entities:
+    - device_tracker.demo_paulus
+    - entity: media_player.living_room
+      name:
+    - sun.sun
+    - entity: cover.kitchen_window
+      name:
+    - light.kitchen_lights
+    `
+  },
 ];
 
 class DemoPicEntity extends PolymerElement {
diff --git a/src/panels/lovelace/cards/hui-glance-card.js b/src/panels/lovelace/cards/hui-glance-card.js
index 159e7f1034..34bb2c7750 100644
--- a/src/panels/lovelace/cards/hui-glance-card.js
+++ b/src/panels/lovelace/cards/hui-glance-card.js
@@ -54,6 +54,9 @@ class HuiGlanceCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
           overflow: hidden;
           text-overflow: ellipsis;
         }
+        .name {
+          min-height: var(--paper-font-body1_-_line-height, 20px);
+        }
       </style>
 
       <ha-card header$="[[_config.title]]">
@@ -62,7 +65,7 @@ class HuiGlanceCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
             <template is="dom-if" if="[[_showEntity(item, hass.states)]]">
               <div class="entity" on-click="_handleClick">
                 <template is="dom-if" if="[[_showInfo(_config.show_name)]]">
-                  <div>[[_computeName(item, hass.states)]]</div>
+                  <div class="name">[[_computeName(item, hass.states)]]</div>
                 </template>
                 <template is="dom-if" if="[[!item.icon]]">
                   <state-badge state-obj="[[_computeStateObj(item, hass.states)]]"></state-badge>