Update spacing, borders and sizing

packages/bbui/src/Form/Core/Picker.svelte

@@ -33,6 +33,8 @@
   export let sort = false
   export let fetchTerm = null
   export let customPopoverHeight
+  export let align = "left"
+
   const dispatch = createEventDispatcher()
 
   let searchTerm = null
@@ -131,7 +133,7 @@
 
 <Popover
   anchor={button}
-  align="left"
+  align={align || "left"}
   bind:this={popover}
   {open}
   on:close={() => (open = false)}

packages/bbui/src/Form/Core/Select.svelte

@@ -18,6 +18,7 @@
   export let autoWidth = false
   export let autocomplete = false
   export let sort = false
+  export let align
 
   const dispatch = createEventDispatcher()
 
@@ -66,6 +67,7 @@
   {fieldColour}
   {options}
   {autoWidth}
+  {align}
   {getOptionLabel}
   {getOptionValue}
   {getOptionIcon}

packages/bbui/src/Form/Select.svelte

@@ -22,6 +22,7 @@
   export let tooltip = ""
   export let autocomplete = false
   export let customPopoverHeight
+  export let align
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -48,6 +49,7 @@
     {placeholder}
     {autoWidth}
     {sort}
+    {align}
     {getOptionLabel}
     {getOptionValue}
     {getOptionIcon}

packages/builder/src/components/common/RoleSelect.svelte

@@ -11,6 +11,8 @@
   export let quiet = false
   export let allowPublic = true
   export let allowRemove = false
+  export let disabled = false
+  export let align
 
   const dispatch = createEventDispatcher()
   const RemoveID = "remove"
@@ -59,6 +61,8 @@
 <Select
   {autoWidth}
   {quiet}
+  {disabled}
+  {align}
   bind:value
   on:change={onChange}
   {options}

packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte

@@ -81,7 +81,16 @@
     await usersFetch.refresh()
 
     filteredUsers = $usersFetch.rows.map(user => {
+      const isBuilderOrAdmin = user.admin?.global || user.builder?.global
+      let role = undefined
+      if (isBuilderOrAdmin) {
+        role = "ADMIN"
+      } else {
         const appRole = Object.keys(user.roles).find(x => x === prodAppId)
+        if (appRole) {
+          role = user.roles[appRole]
+        }
+      }
 
       // if (
       //   !appRole &&
@@ -94,7 +103,8 @@
 
       return {
         ...user,
-        role: !appRole ? undefined : user.roles[appRole],
+        role,
+        isBuilderOrAdmin,
       }
     })
   }
@@ -423,6 +433,7 @@
     </span>
   </div>
 
+  <div class="body">
     {#if promptInvite && !userOnboardResponse}
       <Layout gap="S" paddingX="XL">
         <div class="invite-header">
@@ -558,6 +569,9 @@
                     on:remove={() => {
                       onUpdateUser(user)
                     }}
+                    disabled={user.isBuilderOrAdmin}
+                    autoWidth
+                    align="right"
                   />
                 </div>
               </div>
@@ -585,6 +599,7 @@
       </Layout>
     {/if}
   </div>
+</div>
 
 <style>
   .search :global(input) {
@@ -617,6 +632,9 @@
     white-space: nowrap;
   }
 
+  .auth-entity-access {
+    margin-right: var(--spacing-m);
+  }
   .auth-entity-access.muted :global(.spectrum-Picker-label),
   .auth-entity-access.muted :global(.spectrum-StatusLight) {
     opacity: 0.7;
@@ -634,7 +652,7 @@
   .auth-entity,
   .auth-entity-header {
     display: grid;
-    grid-template-columns: 65% auto;
+    grid-template-columns: 1fr 100px;
     align-items: center;
     gap: var(--spacing-xl);
   }
@@ -657,10 +675,8 @@
     background: var(--background);
     border-left: var(--border-light);
     z-index: 3;
-    padding: var(--spacing-xl) 0px;
     display: flex;
     flex-direction: column;
-    gap: var(--spacing-xl);
     overflow-y: auto;
     overflow-x: hidden;
     transition: transform 130ms ease-out;
@@ -689,8 +705,10 @@
   #builder-side-panel-container .search {
     padding-top: var(--spacing-m);
     padding-bottom: var(--spacing-m);
-    border-top: 1px solid var(--spectrum-alias-border-color-mid);
-    border-bottom: 1px solid var(--spectrum-alias-border-color-mid);
+    border-top: var(--border-light);
+    border-bottom: var(--border-light);
+    border-left: 2px solid transparent;
+    border-right: 2px solid transparent;
   }
 
   #builder-side-panel-container .search :global(input) {
@@ -721,6 +739,7 @@
   }
 
   .builder-side-panel-header {
+    height: 58px;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
@@ -732,4 +751,11 @@
     gap: var(--spacing-s);
     flex-direction: column;
   }
+
+  .body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-xl);
+    padding: var(--spacing-xl) 0;
+  }
 </style>