Make Experiments Table Experiments Column Sticky (#1825)

* Add variable for row borders

* Make experiments column sticky and rework borders to keep things
looking okay

Author: rogermparent

webview/src/experiments/components/table/styles.module.scss

@@ -3,6 +3,7 @@
 @import '../../../shared/variables.scss';
 
 $nested-row-padding: 1.35rem;
+$row-border: 1px solid $border-color;
 
 $edge-padding: 0.8rem;
 $cell-padding: 0.5rem;
@@ -229,11 +230,21 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding;
   }
 
   .thead {
-    border-bottom: 1px solid $border-color;
+    border-bottom: $row-border;
   }
 
   .tr {
     position: relative;
+    & > *:first-child {
+      background-color: $row-bg-color;
+      position: sticky;
+      left: 0;
+      z-index: 3;
+    }
+
+    &.oddRow > *:first-child {
+      background-color: $row-bg-alt-color;
+    }
   }
 
   .headerRow {
@@ -291,10 +302,20 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding;
     margin: 0.5rem 0;
   }
   .normalRowGroup {
-    border: 1px solid $border-color;
+    border-top: $row-border;
+    border-bottom: $row-border;
     .oddRow {
       background-color: $row-bg-alt-color;
     }
+    .td {
+      &:first-child {
+        border-left: $row-border;
+      }
+
+      &:last-child {
+        border-right: $row-border;
+      }
+    }
   }
   .workspaceRowGroup {
     border: none;
@@ -304,15 +325,15 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding;
         padding-left: $workspace-row-edge-margin;
         .innerCell {
           padding-left: $cell-padding;
-          border-left: 1px solid $border-color;
+          border-left: $row-border;
         }
       }
 
       &:last-child {
         padding-right: $workspace-row-edge-margin;
         .innerCell {
           padding-right: $cell-padding;
-          border-right: 1px solid $border-color;
+          border-right: $row-border;
         }
       }
     }
@@ -322,8 +343,8 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding;
       height: 100%;
       width: 100%;
       background-color: none;
-      border-top: 1px solid $border-color;
-      border-bottom: 1px solid $border-color;
+      border-top: $row-border;
+      border-bottom: $row-border;
     }
   }
 
@@ -529,6 +550,6 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding;
 .thead {
   position: sticky;
   top: 0;
-  z-index: 3;
+  z-index: 4;
   background-color: $bg-color;
 }