From c6c1eecef0f038e39b7f3f45c2e7a307bdecb5a0 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 29 Jul 2022 14:20:35 +0100
Subject: [PATCH] Reduce gap between users in assignment modal

---
 .../_components/AssignmentModal.svelte        | 40 ++++++++++---------
 1 file changed, 21 insertions(+), 19 deletions(-)

diff --git a/packages/builder/src/pages/builder/portal/overview/_components/AssignmentModal.svelte b/packages/builder/src/pages/builder/portal/overview/_components/AssignmentModal.svelte
index f102160007..d1efcb3ad8 100644
--- a/packages/builder/src/pages/builder/portal/overview/_components/AssignmentModal.svelte
+++ b/packages/builder/src/pages/builder/portal/overview/_components/AssignmentModal.svelte
@@ -3,6 +3,7 @@
     ModalContent,
     PickerDropdown,
     ActionButton,
+    Layout,
     notifications,
   } from "@budibase/bbui"
   import { roles } from "stores/backend"
@@ -79,25 +80,26 @@
   onConfirm={() => addData(appData)}
   showCloseIcon={false}
 >
-  {#each appData as input, index}
-    <PickerDropdown
-      autocomplete
-      primaryOptions={optionSections}
-      placeholder={"Search users"}
-      secondaryPlaceholder="Access"
-      secondaryOptions={$roles}
-      bind:primaryValue={input.id}
-      bind:secondaryValue={input.role}
-      getPrimaryOptionLabel={group => group.name}
-      getPrimaryOptionValue={group => group.name}
-      getPrimaryOptionIcon={group => group.icon}
-      getPrimaryOptionColour={group => group.colour}
-      getSecondaryOptionLabel={role => role.name}
-      getSecondaryOptionValue={role => role._id}
-      getSecondaryOptionColour={role => RoleUtils.getRoleColour(role._id)}
-    />
-  {/each}
-
+  <Layout noPadding gap="XS">
+    {#each appData as input, index}
+      <PickerDropdown
+        autocomplete
+        primaryOptions={optionSections}
+        placeholder={"Search users"}
+        secondaryPlaceholder="Access"
+        secondaryOptions={$roles}
+        bind:primaryValue={input.id}
+        bind:secondaryValue={input.role}
+        getPrimaryOptionLabel={group => group.name}
+        getPrimaryOptionValue={group => group.name}
+        getPrimaryOptionIcon={group => group.icon}
+        getPrimaryOptionColour={group => group.colour}
+        getSecondaryOptionLabel={role => role.name}
+        getSecondaryOptionValue={role => role._id}
+        getSecondaryOptionColour={role => RoleUtils.getRoleColour(role._id)}
+      />
+    {/each}
+  </Layout>
   <div>
     <ActionButton on:click={addNewInput} icon="Add">Add email</ActionButton>
   </div>