Fix table (#997)

levkk · web-flow · commit 40a13e92b8fa · 2023-09-07T15:07:15.000-07:00
diff --git a/pgml-dashboard/src/components/tables/large/row/row.scss b/pgml-dashboard/src/components/tables/large/row/row.scss
@@ -1,45 +0,0 @@
-table.table.table-lg {
-    tr {
-        &:first-of-type {
-            td {
-                padding-top: 16px;
-            }
-        }
-
-        &:hover, &.active {
-            div.table-cell-content {
-                background: #{$gray-800};
-            }
-        }
-
-        td {
-            vertical-align: middle;
-            padding: 8px 0;
-
-            div.table-cell-content {
-                background: #{$gray-600};
-                padding: 20px 0;
-            }
-
-            &:first-of-type {
-                div.table-cell-content {
-                    padding-left: 67px;
-                }
-            }
-
-            &:last-of-type {
-                div.table-cell-content {
-                    padding-right: 67px;    
-                }
-            }
-        }
-    }
-
-    &.selectable {
-        tbody {
-            tr:hover {
-                cursor: pointer;
-            }
-        }
-    }
-}
diff --git a/pgml-dashboard/src/components/tables/large/row/template.html b/pgml-dashboard/src/components/tables/large/row/template.html
@@ -7,9 +7,7 @@
 >
   <% for column in columns { %>
   <td>
-    <div class="table-cell-content">
-      <%+ column %>
-    </div>
+    <%+ column %>
   </td>
   <% } %>
 </tr>
diff --git a/pgml-dashboard/src/components/tables/large/table/table.scss b/pgml-dashboard/src/components/tables/large/table/table.scss
@@ -1,8 +1,11 @@
 table.table.table-lg {
-    * {
+    td, tr, th {
         border-width: 0;
     }
 
+    border-collapse: separate;
+    border-spacing: 0 16px;
+
     thead {
         th {
             color: #{$slate-shade-100};
@@ -16,4 +19,36 @@ table.table.table-lg {
             }
         }
     }
+
+    tbody {
+         tr {
+            &:hover, &.active {
+                td {
+                    background: #{$gray-800};
+                }
+            }
+
+            td {
+                background: #{$gray-600};
+                vertical-align: middle;
+                padding: 20px 0;
+
+                &:first-of-type {
+                    padding-left: 67px;
+                }
+            }
+        }
+    }
+
+    &.selectable {
+        tbody {
+            tr:hover {
+                cursor: pointer;
+            }
+        }
+    }
+
+    .table-cell-content {
+        height: 100%;
+    }
 }
