From 49b2f52af873aa12050c3ac2c3670848999df14a Mon Sep 17 00:00:00 2001
From: Romein van Buren <romein@vburen.nl>
Date: Tue, 17 Jan 2023 16:45:22 +0100
Subject: [PATCH] Updated stats grid too

---
 frontend/src/components/grid.svelte                  | 10 +++++++++-
 .../src/organisms/connection/collection/stats.svelte | 12 +++++++++++-
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/grid.svelte b/frontend/src/components/grid.svelte
index a41e51a..f747d97 100644
--- a/frontend/src/components/grid.svelte
+++ b/frontend/src/components/grid.svelte
@@ -136,7 +136,7 @@
           {#each columns as column}
             {@const value = item[column.key]}
             <td class:right={column.right} title={value}>
-              {formatValue(value)}
+              <div class="value">{formatValue(value)}</div>
             </td>
           {/each}
         </tr>
@@ -212,6 +212,14 @@
     padding: 0;
   }
 
+  td .value {
+    height: 2.1ex;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 25em;
+  }
+
   tbody tr.selected td {
     background-color: #00008b;
     color: #fff;
diff --git a/frontend/src/organisms/connection/collection/stats.svelte b/frontend/src/organisms/connection/collection/stats.svelte
index b1e6563..427240f 100644
--- a/frontend/src/organisms/connection/collection/stats.svelte
+++ b/frontend/src/organisms/connection/collection/stats.svelte
@@ -7,7 +7,10 @@
 
 <div class="stats">
   <CodeExample code="db.stats()" />
-  <ObjectGrid data={collection.stats} />
+
+  <div class="grid">
+    <ObjectGrid data={collection.stats} />
+  </div>
 </div>
 
 <style>
@@ -16,4 +19,11 @@
     gap: 0.5rem;
     grid-template: auto 1fr / 1fr;
   }
+
+  .stats .grid {
+    overflow: auto;
+    min-height: 0;
+    min-width: 0;
+    border: 1px solid #ccc;
+  }
 </style>