Tried to fix grid height

frontend/src/app.svelte

@@ -93,25 +93,25 @@
 <style>
   main {
     height: 100vh;
-    max-height: 100vh;
     display: flex;
-    flex-direction: column;
+    flex-flow: column;
   }
 
   .columns {
     display: flex;
     gap: 1rem;
     flex: 1;
+    height: 100%;
   }
   .columns > :global(*) {
     height: 100%;
     display: flex;
-    flex-direction: column;
+    flex-flow: column;
   }
 
   .hostlist {
     flex: 0 0 250px;
-    overflow-y: scroll;
+    overflow: scroll;
   }
   .collection {
     flex: 1;

frontend/src/components/grid.svelte

@@ -65,7 +65,7 @@
       {#each _items as item (item[key])}
         <tr on:click={() => select(item[key])} class:selected={activeKey === item[key] && !activeChildKey}>
           <td class="has-toggle">
-            {#if item.children}
+            {#if item.children?.length}
               <button class="toggle" on:click={() => toggleChildren(item[key])}>
                 <Icon name={childrenOpen[item[key]] ? 'chev-d' : 'chev-r'} />
               </button>
@@ -106,9 +106,9 @@
 <style>
   .grid {
     background-color: #fff;
-    height: 100%;
     width: 100%;
     overflow: scroll;
+    max-height: 400px; /* fixme */
   }
   .grid.contained {
     border: 1px solid #ccc;
@@ -126,7 +126,7 @@
     border-bottom: 2px solid #ccc;
   }
 
-  table th {
+  th {
     font-weight: 600;
     text-align: left;
   }
@@ -137,7 +137,6 @@
 
   td, th {
     padding: 0.3rem;
-    height: 100%;
   }
   td.has-toggle {
     width: calc(20px + 0.3rem);
@@ -146,7 +145,7 @@
     padding: 0;
   }
 
-  table tbody tr.selected td {
+  tbody tr.selected td {
     background-color: #00008b;
     color: #fff;
   }

frontend/src/components/icon.svelte

@@ -4,6 +4,8 @@
 
 {#if name === 'radio'}
   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-radio"><circle cx="12" cy="12" r="2"></circle><path d="M16.24 7.76a6 6 0 0 1 0 8.49m-8.48-.01a6 6 0 0 1 0-8.49m11.31-2.82a10 10 0 0 1 0 14.14m-14.14 0a10 10 0 0 1 0-14.14"></path></svg>
+{:else if name === 'chev-l'}
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-left"><polyline points="15 18 9 12 15 6"></polyline></svg>
 {:else if name === 'chev-r'}
   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>
 {:else if name === 'chev-d'}

frontend/src/components/modal.svelte

@@ -53,7 +53,7 @@
     width: 100%;
     border-radius: 10px;
     display: flex;
-    flex-direction: column;
+    flex-flow: column;
     cursor: auto;
   }
   .inner > :global(*:first-child) {

frontend/src/components/objectgrid.svelte

@@ -6,8 +6,6 @@
   export let showHeaders = false;
   export let contained = true;
 
-  console.log(data);
-
   let items = [];
 
   $: if (data) {
@@ -31,6 +29,12 @@
     if (Array.isArray(value)) {
       return `array (${value.length} item${value.length === 1 ? '' : 's'})`;
     }
+    else if (typeof value === 'number') {
+      if (value.toString().includes('.')) {
+        return 'double';
+      }
+      return 'integer';
+    }
     else if (new Date(value).toString() !== 'Invalid Date') {
       return 'date';
     }

frontend/src/organisms/collection-detail/find.svelte

@@ -4,6 +4,7 @@
   import { onMount } from 'svelte';
   import { input } from '../../actions';
   import ObjectGrid from '../../components/objectgrid.svelte';
+  import Icon from '../../components/icon.svelte';
 
   export let collection;
 
@@ -33,6 +34,8 @@
 
   async function submitQuery() {
     result = await PerformFind(collection.hostKey, collection.dbKey, collection.key, JSON.stringify(form));
+    queryField?.focus();
+    queryField?.select();
   }
 
   onMount(() => {
@@ -75,7 +78,21 @@
 </form>
 
 <CodeExample {code} />
-<ObjectGrid data={result} />
+
+<div class="result">
+  <ObjectGrid data={result} />
+  <div class="controls">
+    <div>
+      {#if result}
+        Results: {result.length}
+      {/if}
+    </div>
+    <div>
+      <button class="btn"><Icon name="chev-l" /></button>
+      <button class="btn"><Icon name="chev-r" /></button>
+    </div>
+  </div>
+</div>
 
 <style>
   .row-one {
@@ -90,4 +107,20 @@
     grid-template-columns: 5fr 1fr 1fr 1fr;
     margin-bottom: 0.5rem;
   }
+
+  .result {
+    flex: 1;
+    display: flex;
+    flex-flow: column;
+    margin-top: 0.5rem;
+    gap: 0.5rem;
+  }
+  .result > :global(.grid) {
+    flex: 1;
+  }
+  .result > .controls {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
 </style>

frontend/src/organisms/collection-detail/index.svelte

@@ -56,13 +56,13 @@
     margin: 1rem 1rem 1rem 0;
     height: 100%;
     display: flex;
-    flex-direction: column;
+    flex-flow: column;
   }
 
   .container {
     padding: 0.5rem 0.5rem 0;
     flex: 1;
     display: flex;
-    flex-direction: column;
+    flex-flow: column;
   }
 </style>

frontend/src/style.css

@@ -1,7 +1,6 @@
 html,
 body {
     height: 100vh;
-    max-height: 100vh;
     overflow: hidden;
     font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
     margin: 0;