From 928b4d229c4fa12bd606d791ce4823218dbd8613 Mon Sep 17 00:00:00 2001
From: Romein van Buren <romein@vburen.nl>
Date: Tue, 17 Jan 2023 16:22:49 +0100
Subject: [PATCH] Fixed layout and overflow

---
 frontend/src/app.svelte                                |  5 +++++
 frontend/src/components/grid.svelte                    |  6 +-----
 frontend/src/components/objectgrid.svelte              |  2 --
 .../src/organisms/connection/collection/find.svelte    |  6 ++++++
 .../src/organisms/connection/collection/index.svelte   |  3 +++
 .../src/organisms/connection/collection/indexes.svelte | 10 +++++++++-
 6 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/frontend/src/app.svelte b/frontend/src/app.svelte
index 3efb24b..3f1d28b 100644
--- a/frontend/src/app.svelte
+++ b/frontend/src/app.svelte
@@ -88,6 +88,11 @@
     grid-template: 3rem auto / 1fr;
   }
 
+  main > :global(*) {
+    overflow: auto;
+    min-height: 0;
+    min-width: 0;
+  }
   main > :global(.addressbar) {
     grid-column: 1 / 3;
   }
diff --git a/frontend/src/components/grid.svelte b/frontend/src/components/grid.svelte
index 675c495..a41e51a 100644
--- a/frontend/src/components/grid.svelte
+++ b/frontend/src/components/grid.svelte
@@ -11,7 +11,6 @@
   export let activeChildKey = '';
   export let showHeaders = true;
   export let level = 0;
-  export let contained = false;
 
   const dispatch = createEventDispatcher();
   let childrenOpen = {};
@@ -87,7 +86,7 @@
   }
 </script>
 
-<div class:grid={level === 0} class:subgrid={level > 0} class:contained>
+<div class:grid={level === 0} class:subgrid={level > 0}>
   {#if actions?.length}
     <div class="actions">
       {#each actions as action}
@@ -170,9 +169,6 @@
     height: 100%;
     background-color: #fff;
   }
-  .grid.contained {
-    border: 1px solid #ccc;
-  }
   .subgrid {
     width: 100%;
   }
diff --git a/frontend/src/components/objectgrid.svelte b/frontend/src/components/objectgrid.svelte
index 7e3ea46..bb76b8a 100644
--- a/frontend/src/components/objectgrid.svelte
+++ b/frontend/src/components/objectgrid.svelte
@@ -4,7 +4,6 @@
   export let data = [];
   export let key = '_id';
   export let showHeaders = false;
-  export let contained = true;
   export let activeKey = '';
 
   const columns = [
@@ -78,5 +77,4 @@
   {columns}
   {items}
   {showHeaders}
-  {contained}
 />
diff --git a/frontend/src/organisms/connection/collection/find.svelte b/frontend/src/organisms/connection/collection/find.svelte
index 8156151..c50812b 100644
--- a/frontend/src/organisms/connection/collection/find.svelte
+++ b/frontend/src/organisms/connection/collection/find.svelte
@@ -160,9 +160,15 @@
     display: grid;
     grid-template: 1fr auto / 1fr;
     gap: 0.5rem;
+    overflow: auto;
+    min-height: 0;
+    min-width: 0;
   }
   .result > .grid {
     overflow: auto;
+    min-height: 0;
+    min-width: 0;
+    border: 1px solid #ccc;
   }
   .result > .controls {
     display: flex;
diff --git a/frontend/src/organisms/connection/collection/index.svelte b/frontend/src/organisms/connection/collection/index.svelte
index cb78495..15b6cd5 100644
--- a/frontend/src/organisms/connection/collection/index.svelte
+++ b/frontend/src/organisms/connection/collection/index.svelte
@@ -70,6 +70,9 @@
     padding: 0 0.5rem;
     display: flex;
     align-items: stretch;
+    overflow: auto;
+    min-height: 0;
+    min-width: 0;
   }
   .container > :global(*) {
     width: 100%;
diff --git a/frontend/src/organisms/connection/collection/indexes.svelte b/frontend/src/organisms/connection/collection/indexes.svelte
index 7968413..744f7e7 100644
--- a/frontend/src/organisms/connection/collection/indexes.svelte
+++ b/frontend/src/organisms/connection/collection/indexes.svelte
@@ -29,7 +29,9 @@
     <button class="btn">Create&hellip;</button>
   </div>
 
-  <ObjectGrid key="name" data={indexes} bind:activeKey on:trigger={e => openJson(e.detail)} />
+  <div class="grid">
+    <ObjectGrid key="name" data={indexes} bind:activeKey on:trigger={e => openJson(e.detail)} />
+  </div>
 </div>
 
 <CodeViewer bind:code={json} language="json" />
@@ -40,4 +42,10 @@
     gap: 0.5rem;
     grid-template: auto 1fr / 1fr;
   }
+
+  .indexes .grid {
+    min-height: 0;
+    min-width: 0;
+    border: 1px solid #ccc;
+  }
 </style>