From d6d62e8fa72573c565e3efd3380c17a995e30ab1 Mon Sep 17 00:00:00 2001
From: Sean Dague <sean@dague.net>
Date: Thu, 13 Oct 2016 11:42:02 -0400
Subject: [PATCH] Make dev-state panel more readable (#127)

With a lot dev-states, especially ones that have large 3rd column
content, the visual display of what col #1 goes with which col #3 is
not always clear. This does 2 things.

Vertical align all rows, so the top alignment is a clear guide.

Color all even rows to #eee, so we get a stipple effect which makes it
clear which things group together.
---
 panels/dev-state/ha-panel-dev-state.html | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/panels/dev-state/ha-panel-dev-state.html b/panels/dev-state/ha-panel-dev-state.html
index 3da5a06db7..ac5fc330ad 100644
--- a/panels/dev-state/ha-panel-dev-state.html
+++ b/panels/dev-state/ha-panel-dev-state.html
@@ -31,6 +31,14 @@
         text-align: left;
       }
 
+      .entities tr {
+        vertical-align: top;
+      }
+
+      .entities tr:nth-child(even) {
+        background-color: #eee;
+      }
+
       .entities td:nth-child(3) {
         white-space: pre-wrap;
         word-break: break-word;