From 3be2972166d9d872cff4dce69425e01271cd2ccd Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 1 Aug 2022 10:31:28 +0100
Subject: [PATCH] Reduce space between users and add secondary placeholder

---
 .../_components/AssignmentModal.svelte        | 38 ++++++++++---------
 1 file changed, 21 insertions(+), 17 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 9de1ce98a0..2f0688097d 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"
@@ -78,23 +79,26 @@
   onConfirm={() => addData(appData)}
   showCloseIcon={false}
 >
-  {#each appData as input, index}
-    <PickerDropdown
-      autocomplete
-      primaryOptions={optionSections}
-      secondaryOptions={$roles}
-      bind:primaryValue={input.id}
-      bind:secondaryValue={input.role}
-      bind:searchTerm={search}
-      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}
+        secondaryOptions={$roles}
+        secondaryPlaceholder="Access"
+        bind:primaryValue={input.id}
+        bind:secondaryValue={input.role}
+        bind:searchTerm={search}
+        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>