From ebb622097b173800a5428ff7576c8cf7c2dcc8e7 Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Wed, 17 Aug 2022 23:17:10 +0100
Subject: [PATCH] Fixing issue with single custom datasource being full width
 in creation modal.

---
 .../modals/CreateDatasourceModal.svelte       | 20 ++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte b/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte
index 945cd574d8..a500c6a5b3 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte
@@ -164,14 +164,16 @@
         {/each}
       </div>
       <Body size="S">Custom data source</Body>
-      {#each Object.entries(integrations).filter(entry => entry[1].custom) as [integrationType, schema]}
-        <DatasourceCard
-          on:selected={evt => selectIntegration(evt.detail)}
-          {schema}
-          bind:integrationType
-          {integration}
-        />
-      {/each}
+      <div class="item-list">
+        {#each Object.entries(integrations).filter(entry => entry[1].custom) as [integrationType, schema]}
+          <DatasourceCard
+            on:selected={evt => selectIntegration(evt.detail)}
+            {schema}
+            bind:integrationType
+            {integration}
+          />
+        {/each}
+      </div>
     </Layout>
   </ModalContent>
 </Modal>
@@ -179,7 +181,7 @@
 <style>
   .item-list {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    grid-template-columns: repeat(2, minmax(150px, 1fr));
     grid-gap: var(--spectrum-alias-grid-baseline);
   }
 
