Fix large table overflow (#1446)

levkk · web-flow · commit 26e845704cf6 · 2024-05-09T07:24:43.000-07:00
diff --git a/pgml-dashboard/src/components/pages/demo/template.html b/pgml-dashboard/src/components/pages/demo/template.html
@@ -1,4 +1,4 @@
-<% use crate::components::tables::small::*; %>
+<% use crate::components::tables::{small as small_table, large as large_table}; %>
 <% use crate::components::headings::{Green, Blue, Gray}; %>
 <% use crate::components::inputs::text::EditableHeader; %>
 <% use crate::components::inputs::text::{Input, search::{Search, search::SearchOptions}}; %>
@@ -12,17 +12,42 @@
 
 <div class="container" data-controller="pages-demo">
   <div class="py-5">
-    <%+ Table::new(&["Model", "Performance", "Cost"], &[
-      Row::new(&[
+    <%+ small_table::Table::new(&["Model", "Performance", "Cost"], &[
+      small_table::Row::new(&[
         "intfloat/e5-small".into(),
         "5ms/embedding".into(),
         "$0.0000000001/embedding".into(),
       ]).into(),
-      Row::new(&[
+      small_table::Row::new(&[
         "intfloat/e5-large".into(),
         "10ms/embedding".into(),
         "$0.0000000002/embedding".into(),
       ]).into(),
+      small_table::Row::new(&[
+        "intfloat/e5-large-with-overflow-intfloat/e5-large-with-overflow-intfloat/e5-large-with-overflow".into(),
+        "10ms/embedding".into(),
+        "$0.0000000002/embedding-intfloat/e5-large-with-overflow-intfloat/e5-large-with-overflow".into(),
+      ]).into(),
+    ]) %>
+  </div>
+
+  <div class="py-5">
+    <%+ large_table::Table::new(&["Model", "Performance", "Cost"], &[
+      large_table::Row::new(&[
+        "intfloat/e5-small".into(),
+        "5ms/embedding".into(),
+        "$0.0000000001/embedding".into(),
+      ]).into(),
+      large_table::Row::new(&[
+        "intfloat/e5-large".into(),
+        "10ms/embedding".into(),
+        "$0.0000000002/embedding".into(),
+      ]).into(),
+      large_table::Row::new(&[
+        "intfloat/e5-large-with-overflow-intfloat/e5-large-with-overflow-intfloat/e5-large-with-overflow".into(),
+        "10ms/embedding".into(),
+        "$0.0000000002/embedding-intfloat/e5-large-with-overflow-intfloat/e5-large-with-overflow".into(),
+      ]).into(),
     ]) %>
   </div>
 
diff --git a/pgml-dashboard/src/components/tables/large/table/table.scss b/pgml-dashboard/src/components/tables/large/table/table.scss
@@ -14,7 +14,7 @@ table.table.table-lg {
       background: #{$gray-800};
       text-transform: uppercase;
       font-size: 0.75rem;
-      padding: 16px 0;
+      padding: 16px 12px 16px 0;
 
       &:first-of-type {
         padding-left: 67px;
@@ -42,7 +42,7 @@ table.table.table-lg {
       td {
         background: #{$gray-600};
         vertical-align: middle;
-        padding: 20px 0;
+        padding: 20px 12px 20px 0;
 
         &:first-of-type {
           padding-left: 67px;
