From 6b1d04584e79e210a2ca94baa67b3d6b2836196b Mon Sep 17 00:00:00 2001
From: c727 <crusader727@gmx.de>
Date: Sat, 21 Jul 2018 03:10:42 +0200
Subject: [PATCH] Improve CSS for entity rows (#1491)

---
 .../lovelace/cards/hui-entities-card.js       |  4 ++++
 .../components/hui-generic-entity-row.js      | 22 ++++++++++++-------
 .../entity-rows/hui-text-entity-row.js        |  5 +++++
 3 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/src/panels/lovelace/cards/hui-entities-card.js b/src/panels/lovelace/cards/hui-entities-card.js
index 9cd625f818..e7a1952370 100644
--- a/src/panels/lovelace/cards/hui-entities-card.js
+++ b/src/panels/lovelace/cards/hui-entities-card.js
@@ -28,6 +28,10 @@ class HuiEntitiesCard extends EventsMixin(PolymerElement) {
       #states > div {
         margin: 4px 0;
       }
+      #states > div > * {
+        display: block;
+        overflow: hidden;
+      }
       .header {
         @apply --paper-font-headline;
         /* overwriting line-height +8 because entity-toggle can be 40px height,
diff --git a/src/panels/lovelace/components/hui-generic-entity-row.js b/src/panels/lovelace/components/hui-generic-entity-row.js
index f6c9a5bdce..b14a656e70 100644
--- a/src/panels/lovelace/components/hui-generic-entity-row.js
+++ b/src/panels/lovelace/components/hui-generic-entity-row.js
@@ -6,24 +6,30 @@ import '../../../components/ha-relative-time.js';
 
 import computeStateName from '../../../common/entity/compute_state_name.js';
 
-import EventsMixin from '../../../mixins/events-mixin.js';
-
-/*
- * @appliesMixin EventsMixin
- */
-class HuiGenericEntityRow extends EventsMixin(PolymerElement) {
+class HuiGenericEntityRow extends PolymerElement {
   static get template() {
     return html`
       <style>
         :host {
           display: flex;
+          align-items: center;
         }
         .flex {
-          margin-left: 16px;
           flex: 1;
+          overflow: hidden;
+          margin-left: 16px;
           display: flex;
-          align-items: center;
           justify-content: space-between;
+          align-items: center;
+        }
+        .info,
+        .info > * {
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+        .flex ::slotted(*) {
+          margin-left: 8px;
         }
         .secondary,
         ha-relative-time {
diff --git a/src/panels/lovelace/entity-rows/hui-text-entity-row.js b/src/panels/lovelace/entity-rows/hui-text-entity-row.js
index 6f5debe34e..c748e0d166 100644
--- a/src/panels/lovelace/entity-rows/hui-text-entity-row.js
+++ b/src/panels/lovelace/entity-rows/hui-text-entity-row.js
@@ -13,6 +13,11 @@ import LocalizeMixin from '../../../mixins/localize-mixin.js';
 class HuiTextEntityRow extends LocalizeMixin(PolymerElement) {
   static get template() {
     return html`
+      <style>
+        div {
+          text-align: right;
+        }
+      </style>
       <hui-generic-entity-row
         hass="[[hass]]"
         config="[[_config]]"