From 093a954e68c52aa9af591f1608420e47e9fcafe4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Romain=20Tarti=C3=A8re?= <romain@blogreen.org>
Date: Thu, 21 Nov 2024 13:07:59 -1000
Subject: [PATCH] Improve readability of large grid with a lot of data

When a large table is displayed and is larger than the screen size, it
is not possible to scroll to see *all* the data.  One can zoom-out to
have a accomodate more data, but this does not fix the issue as:
  1. The displayed data is smaller, making it harder to read it beyond
     checking the color that represent the state of the metric;
  2. Zooming out is limited and at some point more data is still out of
     sight.

This make the table scrollable in its container.  Both horizontal and
vertical headers stick to their position to make it easier to track what
is being viewed.
---
 lib/riemann/dash/views/css.scss | 25 ++++++++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/lib/riemann/dash/views/css.scss b/lib/riemann/dash/views/css.scss
index 66fe72e..27ee94a 100644
--- a/lib/riemann/dash/views/css.scss
+++ b/lib/riemann/dash/views/css.scss
@@ -441,6 +441,7 @@ h2 {
     left: 0;
     right: 0;
     bottom: 0;
+    overflow: auto;
   }
 
   .bar {
@@ -468,6 +469,7 @@ h2 {
     
     th {
       text-align: right;
+      background-color: #fff;
     }
 
     thead {
@@ -475,11 +477,28 @@ h2 {
       padding: 0;
 
       th {
-        // Work around https://bugs.webkit.org/show_bug.cgi?id=20040
-        position: relative;
-        top: 3px;
         vertical-align: bottom;
         text-align: left;
+        position: sticky;
+        top: 0;
+        z-index: 1;
+
+        &:first-child {
+	  left: 0;
+	  z-index: 2;
+        }
+      }
+    }
+
+    tbody {
+      tr:hover, tr:hover th {
+        background-color: $cream;
+      }
+
+      th {
+        position: sticky;
+	left: 0;
+	z-index: 1;
       }
     }
   }