Fix styles

packages/builder/src/components/integration/QueryViewerSidePanel/PreviewPanel.svelte

@@ -7,20 +7,10 @@
   export let maxRowsToDisplay = 5
 
   let rowsToDisplay
-  $: {
+  $: rowsToDisplay = [...cloneDeep(rows).slice(0, maxRowsToDisplay)]
-    rowsToDisplay = [
+
-      ...cloneDeep(rows).slice(0, maxRowsToDisplay),
+  $: additionalRows = rows.length - maxRowsToDisplay
-      // { [Object.keys(schema)[0]]: "1" },
-    ]
 
-    if (rows.length - maxRowsToDisplay) {
-      rowsToDisplay.push({
-        [Object.keys(schema)[0]]: `...${
-          rows.length - maxRowsToDisplay
-        } further items`,
-      })
-    }
-  }
   // Cast field in query preview response to number if specified by schema
   $: {
     for (let i = 0; i < rowsToDisplay.length; i++) {
@@ -38,10 +28,26 @@
 
 <div class="table">
   <Table {schema} data={rowsToDisplay} allowEditing={false} />
+  {#if additionalRows > 0}
+    <div class="show-more">
+      ...{additionalRows} further items
+    </div>
+  {/if}
 </div>
 
 <style>
-  .table :global(.spectrum-Table-cell) {
+  .table :global(.spectrum-Table-cell),
+  .show-more {
     min-width: 100px;
   }
+
+  .show-more {
+    display: flex;
+    padding: 16px;
+    justify-content: center;
+
+    background-color: var(--spectrum-global-color-gray-50);
+    border: 1px solid var(--spectrum-alias-border-color-mid);
+    border-top: 0;
+  }
 </style>