From 071e9c3421fcc6c20b585b89cd2a3c4ab91976e7 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Thu, 19 May 2022 09:56:47 +0100
Subject: [PATCH] Minor reflow of the overview tab cards and layout

---
 .../src/components/common/DashCard.svelte     |  4 +--
 .../overview/_components/OverviewTab.svelte   | 27 ++++++++++---------
 2 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/packages/builder/src/components/common/DashCard.svelte b/packages/builder/src/components/common/DashCard.svelte
index b3a2ac7d69..800001a614 100644
--- a/packages/builder/src/components/common/DashCard.svelte
+++ b/packages/builder/src/components/common/DashCard.svelte
@@ -33,13 +33,13 @@
     min-height: 150px;
   }
   .dash-card-header {
-    padding: var(--spacing-l);
+    padding: var(--spacing-xl) calc(var(--spacing-xl) * 2);
     border-bottom: 1px solid var(--spectrum-global-color-gray-300);
     display: flex;
     justify-content: space-between;
   }
   .dash-card-body {
-    padding: var(--spacing-l);
+    padding: var(--spacing-xl) calc(var(--spacing-xl) * 2);
   }
   .dash-card-title :global(.spectrum-Detail) {
     color: var(
diff --git a/packages/builder/src/pages/builder/portal/overview/_components/OverviewTab.svelte b/packages/builder/src/pages/builder/portal/overview/_components/OverviewTab.svelte
index 7100b4d725..aa2a55ad02 100644
--- a/packages/builder/src/pages/builder/portal/overview/_components/OverviewTab.svelte
+++ b/packages/builder/src/pages/builder/portal/overview/_components/OverviewTab.svelte
@@ -62,7 +62,7 @@
             {/if}
           </div>
 
-          <p class="status-text">
+          <div class="status-text">
             {#if deployments?.length}
               {processStringSync(
                 "Last published {{ duration time 'millisecond' }} ago",
@@ -76,7 +76,7 @@
             {#if !deployments?.length}
               -
             {/if}
-          </p>
+          </div>
         </div>
       </DashCard>
       <DashCard title={"Last Edited"} dataCy={"edited-by"}>
@@ -95,7 +95,7 @@
           {:catch error}
             <p>Could not fetch user: {error.message}</p>
           {/await}
-          <p class="last-edit-text">
+          <div class="last-edit-text">
             {#if app}
               {processStringSync(
                 "Last edited {{ duration time 'millisecond' }} ago",
@@ -105,7 +105,7 @@
                 }
               )}
             {/if}
-          </p>
+          </div>
         </div>
       </DashCard>
       <DashCard
@@ -119,7 +119,7 @@
         <div class="version-content" data-cy={$store.version}>
           <Heading size="XS">{$store.version}</Heading>
           {#if updateAvailable}
-            <p class="version-status">
+            <div class="version-status">
               New version <strong>{clientPackage.version}</strong> is available
               -
               <Link
@@ -131,9 +131,9 @@
               >
                 Update
               </Link>
-            </p>
+            </div>
           {:else}
-            <p class="version-status">You're running the latest!</p>
+            <div class="version-status">You're running the latest!</div>
           {/if}
         </div>
       </DashCard>
@@ -181,29 +181,25 @@
 </div>
 
 <style>
-  /* Add in size checks */
   .overview-tab {
     display: grid;
     grid-gap: var(--spacing-xl);
   }
+
   .overview-tab .top {
     display: grid;
-    grid-gap: var(--spacing-xl);
+    grid-gap: calc(var(--spacing-xl) * 2);
     grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
   }
 
   @media (max-width: 1000px) {
     .overview-tab .top {
-      display: grid;
-      grid-gap: var(--spacing-xl);
       grid-template-columns: 1fr 1fr;
     }
   }
 
   @media (max-width: 800px) {
     .overview-tab .top {
-      display: grid;
-      grid-gap: var(--spacing-xl);
       grid-template-columns: 1fr;
     }
   }
@@ -242,4 +238,9 @@
     gap: var(--spacing-l);
     margin-top: var(--spacing-s);
   }
+  .version-status,
+  .last-edit-text,
+  .status-text {
+    padding-top: var(--spacing-xl);
+  }
 </style>