Merge pull request #6682 from Budibase/cheeks-fixes

Design polish + misc fixes

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>

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 {

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

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,28 @@
       </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"
+          border={false}
+        />
+        <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 +181,19 @@
     />
   </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(--spectrum-alias-grid-gutter-medium)
+      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 +203,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(--spectrum-alias-grid-gutter-medium));
   }
 
   .panelShow {

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>
@@ -400,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);
   }

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

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 {

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

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