From ad68a07ae611e98fb07289f944a7e44468ee4564 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 11 Jul 2022 19:42:04 +0100
Subject: [PATCH 1/9] Remove back button while loading app overview

---
 .../pages/builder/portal/overview/[application]/index.svelte | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/packages/builder/src/pages/builder/portal/overview/[application]/index.svelte b/packages/builder/src/pages/builder/portal/overview/[application]/index.svelte
index 83d5b35af2..5ff22f11c6 100644
--- a/packages/builder/src/pages/builder/portal/overview/[application]/index.svelte
+++ b/packages/builder/src/pages/builder/portal/overview/[application]/index.svelte
@@ -207,11 +207,6 @@
 <span class="overview-wrap">
   <Page wide noPadding>
     {#await promise}
-      <span class="page-header">
-        <ActionButton secondary icon={"ArrowLeft"} on:click={backToAppList}>
-          Back
-        </ActionButton>
-      </span>
       <div class="loading">
         <ProgressCircle size="XL" />
       </div>

From c469dbe0ace15d21fb00c174faf0758294d8eb82 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 11 Jul 2022 19:53:14 +0100
Subject: [PATCH 2/9] Increase spacing on automation run log tab and move
 pagination control to bottom right of table

---
 .../overview/automation/HistoryTab.svelte     | 55 ++++++++++---------
 1 file changed, 29 insertions(+), 26 deletions(-)

diff --git a/packages/builder/src/components/portal/overview/automation/HistoryTab.svelte b/packages/builder/src/components/portal/overview/automation/HistoryTab.svelte
index 49788ed954..3c266eb478 100644
--- a/packages/builder/src/components/portal/overview/automation/HistoryTab.svelte
+++ b/packages/builder/src/components/portal/overview/automation/HistoryTab.svelte
@@ -119,7 +119,7 @@
 </script>
 
 <div class="root" class:panelOpen={showPanel}>
-  <Layout paddingX="XL" gap="S" alignContent="start">
+  <Layout noPadding gap="M" alignContent="start">
     <div class="search">
       <div class="select">
         <Select
@@ -147,16 +147,27 @@
       </div>
     </div>
     {#if runHistory}
-      <Table
-        on:click={viewDetails}
-        schema={runHistorySchema}
-        allowSelectRows={false}
-        allowEditColumns={false}
-        allowEditRows={false}
-        data={runHistory}
-        {customRenderers}
-        placeholderText="No history found"
-      />
+      <div>
+        <Table
+          on:click={viewDetails}
+          schema={runHistorySchema}
+          allowSelectRows={false}
+          allowEditColumns={false}
+          allowEditRows={false}
+          data={runHistory}
+          {customRenderers}
+          placeholderText="No history found"
+        />
+        <div class="pagination">
+          <Pagination
+            page={$pageInfo.pageNumber}
+            hasPrevPage={$pageInfo.loading ? false : $pageInfo.hasPrevPage}
+            hasNextPage={$pageInfo.loading ? false : $pageInfo.hasNextPage}
+            goToPrevPage={pageInfo.prevPage}
+            goToNextPage={pageInfo.nextPage}
+          />
+        </div>
+      </div>
     {/if}
   </Layout>
   <div class="panel" class:panelShow={showPanel}>
@@ -169,26 +180,18 @@
     />
   </div>
 </div>
-<div class="pagination">
-  <Pagination
-    page={$pageInfo.pageNumber}
-    hasPrevPage={$pageInfo.loading ? false : $pageInfo.hasPrevPage}
-    hasNextPage={$pageInfo.loading ? false : $pageInfo.hasNextPage}
-    goToPrevPage={pageInfo.prevPage}
-    goToNextPage={pageInfo.nextPage}
-  />
-</div>
 
 <style>
   .root {
     display: grid;
     grid-template-columns: 1fr;
     height: 100%;
+    padding: var(--spacing-xl) var(--spectrum-alias-grid-gutter-large);
   }
 
   .search {
     display: flex;
-    gap: var(--spacing-l);
+    gap: var(--spacing-xl);
     width: 100%;
     align-items: flex-end;
   }
@@ -198,15 +201,15 @@
   }
 
   .pagination {
-    position: absolute;
-    bottom: 0;
-    margin-bottom: var(--spacing-xl);
-    margin-left: var(--spacing-l);
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    margin-top: var(--spacing-xl);
   }
 
   .panel {
     display: none;
-    background-color: var(--background);
+    margin-top: calc(-1 * var(--spacing-xl));
   }
 
   .panelShow {

From 45f166b3f4718e030db4b20adf2137aef72d42aa Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 11 Jul 2022 20:03:33 +0100
Subject: [PATCH 3/9] Update automation run log detail panel padding

---
 .../portal/overview/automation/HistoryDetailsPanel.svelte   | 3 +--
 .../components/portal/overview/automation/HistoryTab.svelte | 6 ++++--
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/builder/src/components/portal/overview/automation/HistoryDetailsPanel.svelte b/packages/builder/src/components/portal/overview/automation/HistoryDetailsPanel.svelte
index 76e2095e64..e32669067e 100644
--- a/packages/builder/src/components/portal/overview/automation/HistoryDetailsPanel.svelte
+++ b/packages/builder/src/components/portal/overview/automation/HistoryDetailsPanel.svelte
@@ -23,7 +23,7 @@
         <ActionButton noPadding size="S" icon="Close" quiet on:click={close} />
       </div>
     </div>
-    <Layout paddingX="XL" gap="S">
+    <Layout paddingY="XL" paddingX="XL" gap="S">
       <div class="icon">
         <Icon name="Clock" />
         <DateTimeRenderer value={history.createdAt} />
@@ -71,7 +71,6 @@
   }
 
   .bottom {
-    margin-top: var(--spacing-m);
     border-top: var(--border-light);
     padding-top: calc(var(--spacing-xl) * 2);
     padding-bottom: calc(var(--spacing-xl) * 2);
diff --git a/packages/builder/src/components/portal/overview/automation/HistoryTab.svelte b/packages/builder/src/components/portal/overview/automation/HistoryTab.svelte
index 3c266eb478..c676e00d2d 100644
--- a/packages/builder/src/components/portal/overview/automation/HistoryTab.svelte
+++ b/packages/builder/src/components/portal/overview/automation/HistoryTab.svelte
@@ -157,6 +157,7 @@
           data={runHistory}
           {customRenderers}
           placeholderText="No history found"
+          border={false}
         />
         <div class="pagination">
           <Pagination
@@ -186,7 +187,8 @@
     display: grid;
     grid-template-columns: 1fr;
     height: 100%;
-    padding: var(--spacing-xl) var(--spectrum-alias-grid-gutter-large);
+    padding: var(--spectrum-alias-grid-gutter-medium)
+      var(--spectrum-alias-grid-gutter-large);
   }
 
   .search {
@@ -209,7 +211,7 @@
 
   .panel {
     display: none;
-    margin-top: calc(-1 * var(--spacing-xl));
+    margin-top: calc(-1 * var(--spectrum-alias-grid-gutter-medium));
   }
 
   .panelShow {

From 79d31702b83c894ae9c6d626f44b781b8fe85543 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 11 Jul 2022 20:04:35 +0100
Subject: [PATCH 4/9] Add hover effect to automation item header expand icon

---
 .../AutomationBuilder/FlowChart/FlowItemHeader.svelte           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte
index e8b61d7402..99c6f251f9 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte
@@ -96,7 +96,7 @@
           onSelect(block)
         }}
       >
-        <Icon name={blockComplete ? "ChevronUp" : "ChevronDown"} />
+        <Icon hoverable name={blockComplete ? "ChevronUp" : "ChevronDown"} />
       </div>
     </div>
   </div>

From 46f3ec8c46aa0ea5ad4669e8519e9475143c4ff7 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 11 Jul 2022 20:16:22 +0100
Subject: [PATCH 5/9] Improve automation test display layout and spacing

---
 .../AutomationBuilder/TestDisplay.svelte      | 32 ++++++++-----------
 .../overview/[application]/index.svelte       |  2 +-
 2 files changed, 14 insertions(+), 20 deletions(-)

diff --git a/packages/builder/src/components/automation/AutomationBuilder/TestDisplay.svelte b/packages/builder/src/components/automation/AutomationBuilder/TestDisplay.svelte
index a2eb904c94..c6585b0bce 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/TestDisplay.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/TestDisplay.svelte
@@ -67,27 +67,20 @@
           {/if}
 
           <div class="tabs">
-            <Tabs quiet noPadding selected="Input">
+            <Tabs noHorizPadding selected="Input">
               <Tab title="Input">
-                <div style="padding: 10px 10px 10px 10px;">
-                  <TextArea
-                    minHeight="80px"
-                    disabled
-                    value={textArea(filteredResults?.[idx]?.inputs, "No input")}
-                  />
-                </div></Tab
-              >
+                <TextArea
+                  minHeight="80px"
+                  disabled
+                  value={textArea(filteredResults?.[idx]?.inputs, "No input")}
+                />
+              </Tab>
               <Tab title="Output">
-                <div style="padding: 10px 10px 10px 10px;">
-                  <TextArea
-                    minHeight="100px"
-                    disabled
-                    value={textArea(
-                      filteredResults?.[idx]?.outputs,
-                      "No output"
-                    )}
-                  />
-                </div>
+                <TextArea
+                  minHeight="100px"
+                  disabled
+                  value={textArea(filteredResults?.[idx]?.outputs, "No output")}
+                />
               </Tab>
             </Tabs>
           </div>
@@ -113,6 +106,7 @@
     align-items: stretch;
     position: relative;
     flex: 1 1 auto;
+    padding: 0 var(--spacing-xl) var(--spacing-xl) var(--spacing-xl);
   }
 
   .block {
diff --git a/packages/builder/src/pages/builder/portal/overview/[application]/index.svelte b/packages/builder/src/pages/builder/portal/overview/[application]/index.svelte
index 5ff22f11c6..293f19ebe4 100644
--- a/packages/builder/src/pages/builder/portal/overview/[application]/index.svelte
+++ b/packages/builder/src/pages/builder/portal/overview/[application]/index.svelte
@@ -395,7 +395,7 @@
     line-height: 1em;
     margin-bottom: var(--spacing-s);
   }
-  .tab-wrap :global(.spectrum-Tabs) {
+  .tab-wrap :global(> .spectrum-Tabs) {
     padding-left: var(--spectrum-alias-grid-gutter-large);
     padding-right: var(--spectrum-alias-grid-gutter-large);
   }

From 1cd20dddc7462add45598caf120343685208512b Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 11 Jul 2022 20:23:46 +0100
Subject: [PATCH 6/9] Fix spacing in overview settings tab

---
 .../builder/portal/overview/_components/SettingsTab.svelte  | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/builder/src/pages/builder/portal/overview/_components/SettingsTab.svelte b/packages/builder/src/pages/builder/portal/overview/_components/SettingsTab.svelte
index 2409579c68..a00694624b 100644
--- a/packages/builder/src/pages/builder/portal/overview/_components/SettingsTab.svelte
+++ b/packages/builder/src/pages/builder/portal/overview/_components/SettingsTab.svelte
@@ -58,16 +58,16 @@
         </Layout>
       </span>
       <span class="version-section">
-        <Layout gap="XS" paddingY="XXL" paddingX="">
+        <Layout gap="XS" noPadding>
           <Heading size="S">App version</Heading>
           <Divider />
           <Body>
             {#if updateAvailable}
-              <p class="version-status">
+              <Body>
                 The app is currently using version
                 <strong>{$store.version}</strong>
                 but version <strong>{clientPackage.version}</strong> is available.
-              </p>
+              </Body>
             {:else}
               <p class="version-status">
                 The app is currently using version

From 3996aad9e9946aece64f545ccae60d690caa6ccd Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 13 Jul 2022 12:12:30 +0100
Subject: [PATCH 7/9] Update table block filter limit to 5

---
 packages/client/src/components/app/blocks/TableBlock.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/components/app/blocks/TableBlock.svelte b/packages/client/src/components/app/blocks/TableBlock.svelte
index 4f5e0e1114..4ae169ca72 100644
--- a/packages/client/src/components/app/blocks/TableBlock.svelte
+++ b/packages/client/src/components/app/blocks/TableBlock.svelte
@@ -89,7 +89,7 @@
         })
       }
     })
-    return enrichedColumns.slice(0, 3)
+    return enrichedColumns.slice(0, 5)
   }
 
   // Load the datasource schema so we can determine column types

From 610a64eec009dc85c574e8f264b3eb1791877183 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 13 Jul 2022 12:19:24 +0100
Subject: [PATCH 8/9] Remove layout padding when using max width screens

---
 packages/client/src/components/app/Layout.svelte | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/client/src/components/app/Layout.svelte b/packages/client/src/components/app/Layout.svelte
index 58b2797162..e58d4ece0c 100644
--- a/packages/client/src/components/app/Layout.svelte
+++ b/packages/client/src/components/app/Layout.svelte
@@ -323,6 +323,9 @@
     position: relative;
     padding: 32px;
   }
+  .main.size--max {
+    padding: 0;
+  }
   .layout--none .main {
     padding: 0;
   }
@@ -465,6 +468,9 @@
   .mobile:not(.layout--none) .main {
     padding: 16px;
   }
+  .mobile .main.size--max {
+    padding: 0;
+  }
 
   /* Transform links into drawer */
   .mobile .links {

From 2a9c32368988cd19ea9f4a764e810bc8c6314335 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 13 Jul 2022 12:54:04 +0100
Subject: [PATCH 9/9] Update cards block filter limit to 5

---
 packages/client/src/components/app/blocks/CardsBlock.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/components/app/blocks/CardsBlock.svelte b/packages/client/src/components/app/blocks/CardsBlock.svelte
index 392af5411e..f6aed54760 100644
--- a/packages/client/src/components/app/blocks/CardsBlock.svelte
+++ b/packages/client/src/components/app/blocks/CardsBlock.svelte
@@ -98,7 +98,7 @@
         })
       }
     })
-    return enrichedColumns.slice(0, 3)
+    return enrichedColumns.slice(0, 5)
   }
 
   // Builds a full details page URL for the card title