From 6f1265f05a346a7d8f22c2c2dbd0407acb709a09 Mon Sep 17 00:00:00 2001
From: Nick Gottlieb <ngottlieb@gmail.com>
Date: Mon, 3 Jun 2024 10:58:50 -0700
Subject: [PATCH] tweak display of new state reach table

---
 src/app/views/river-index/rivers-by-state.vue | 30 +++++++++++++++----
 1 file changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/app/views/river-index/rivers-by-state.vue b/src/app/views/river-index/rivers-by-state.vue
index 643f4ee6..8a7086b3 100644
--- a/src/app/views/river-index/rivers-by-state.vue
+++ b/src/app/views/river-index/rivers-by-state.vue
@@ -30,7 +30,7 @@
                     <span v-if="reach.altname">({{ reach.altname }})</span>
                   </router-link>
                 </td>
-                <td>
+                <td class="reach-flow">
                   <template v-if="reach.loading">
                     <cv-inline-loading
                       small
@@ -125,11 +125,6 @@ export default {
 }
 </script>
 <style lang="scss">
-@each $class, $color in $flow-map {
-  tr.reach.#{$class} td {
-    background-color: $color;
-  }
-}
 .bx--tag--stale {
   background-color: #dfe3e6;
 
@@ -137,4 +132,27 @@ export default {
     background-color: $stale;
   }
 }
+
+#rivers-by-state {
+  thead {
+    position: sticky;
+    top: 51px;
+  }
+
+  tr {
+    border-left: 0.5rem solid $ui-03;
+
+    @each $class, $color in $flow-map {
+      &.#{$class} {
+        td:first-child {
+          border-left: 0.5rem solid $color;
+        }
+
+        td.reach-flow {
+          background: $color;
+        }
+      }
+    }
+  }
+}
 </style>
\ No newline at end of file