Fixed layout and overflow

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;
   }

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%;
   }

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}
 />

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;

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%;

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>