Improve CSS for entity rows (#1491)

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,

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';
+class HuiGenericEntityRow extends PolymerElement {
-
-/*
- * @appliesMixin EventsMixin
- */
-class HuiGenericEntityRow extends EventsMixin(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 {

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]]"