From ae23c019a4a868e10a0c33ff6b9c8a8e0164c049 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 23 Sep 2022 15:40:58 +0100
Subject: [PATCH] Update app overview tile size and wrapping

---
 .../src/components/common/DashCard.svelte     |  2 +-
 .../overview/_components/OverviewTab.svelte   | 21 ++-----------------
 2 files changed, 3 insertions(+), 20 deletions(-)

diff --git a/packages/builder/src/components/common/DashCard.svelte b/packages/builder/src/components/common/DashCard.svelte
index f4e562859f..40c7133c42 100644
--- a/packages/builder/src/components/common/DashCard.svelte
+++ b/packages/builder/src/components/common/DashCard.svelte
@@ -30,7 +30,7 @@
     background: var(--spectrum-alias-background-color-primary);
     border-radius: var(--border-radius-s);
     overflow: hidden;
-    min-height: 150px;
+    min-height: 170px;
   }
   .dash-card-header {
     padding: var(--spacing-xl) var(--spectrum-global-dimension-static-size-400);
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 854fb3cce6..b121e04c7b 100644
--- a/packages/builder/src/pages/builder/portal/overview/_components/OverviewTab.svelte
+++ b/packages/builder/src/pages/builder/portal/overview/_components/OverviewTab.svelte
@@ -256,7 +256,7 @@
   .overview-tab .top {
     display: grid;
     grid-gap: var(--spectrum-alias-grid-gutter-medium);
-    grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
   }
 
   .access-tab-content {
@@ -276,7 +276,7 @@
   }
   .access-tab-content .text {
     color: var(--spectrum-global-color-gray-600);
-    margin-top: var(--spacing-s);
+    margin-top: var(--spacing-xl);
   }
 
   .overview-tab .bottom,
@@ -286,23 +286,6 @@
     grid-template-columns: 1fr 1fr;
   }
 
-  @media (max-width: 1000px) {
-    .overview-tab .top {
-      grid-template-columns: 1fr 1fr;
-    }
-
-    .overview-tab .bottom {
-      grid-template-columns: 1fr;
-    }
-  }
-
-  @media (max-width: 800px) {
-    .overview-tab .top,
-    .overview-tab .bottom {
-      grid-template-columns: 1fr;
-    }
-  }
-
   .status-display {
     display: flex;
     align-items: center;