Adding a way to limit the groups shown and then display a popover.

packages/bbui/src/Icon/Icon.svelte

@@ -28,6 +28,9 @@
     <svg
       on:contextmenu
       on:click
+      on:mouseover
+      on:mouseleave
+      on:focus
       class:hoverable
       class:disabled
       class="spectrum-Icon spectrum-Icon--size{size}"

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

@@ -0,0 +1,49 @@
+<script>
+  import { Icon, Popover } from "@budibase/bbui"
+  import GroupBadge from "./GroupBadge.svelte"
+
+  export let groups = []
+
+  let anchor, popover
+
+  function show() {
+    popover.show()
+  }
+
+  function hide() {
+    popover.hide()
+  }
+</script>
+
+<div class="icon" bind:this={anchor}>
+  <Icon name="More" size="S" hoverable on:mouseover={show} on:mouseleave={hide} />
+</div>
+
+<Popover
+  customZIndex={1002}
+  bind:this={popover}
+  align="center"
+  {anchor}
+  showPopover={true}
+  minWidth={0}
+>
+  <div class="badges">
+    {#each groups as group}
+      <GroupBadge color={group.color} name={group.name} />
+    {/each}
+  </div>
+</Popover>
+
+<style>
+  .icon {
+    height: auto;
+    display: flex;
+    justify-content: center;
+  }
+  .badges {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-s);
+    padding: var(--spacing-m);
+  }
+</style>

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

@@ -38,6 +38,8 @@
   import { emailValidator } from "@/helpers/validation"
   import { fly } from "svelte/transition"
   import InfoDisplay from "../design/[screenId]/[componentId]/_components/Component/InfoDisplay.svelte"
+  import BuilderGroupPopover from "./BuilderGroupPopover.svelte"
+  import GroupBadge from "./GroupBadge.svelte"
 
   let query = null
   let loaded = false
@@ -742,7 +744,11 @@
                 <div class="auth-entity-access-title">Access</div>
               </div>
               {#each allUsers as user}
-                {@const userGroups = sdk.users.getUserAppGroups($appStore.appId, user, $groups).slice(0, 3)}
+                {@const userGroups = sdk.users.getUserAppGroups(
+                  $appStore.appId,
+                  user,
+                  $groups
+                )}
                 <div class="auth-entity">
                   <div class="details">
                     <div class="user-groups">
@@ -750,9 +756,12 @@
                         {user.email}
                       </div>
                       <div class="group-badges">
-                        {#each userGroups as group}
-                          <Badge size="S" customColor={`color-mix(in srgb, ${group.color} 30%, transparent)`}>{group.name}</Badge>
+                        {#each userGroups.slice(0, 3) as group}
+                          <GroupBadge color={group.color} name={group.name} />
                         {/each}
+                        {#if userGroups.length > 3}
+                          <BuilderGroupPopover groups={userGroups.slice(3)} />
+                        {/if}
                       </div>
                     </div>
                   </div>

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

@@ -0,0 +1,10 @@
+<script>
+  import { Badge } from "@budibase/bbui"
+
+  export let color
+  export let name
+</script>
+
+<Badge size="S" customColor={`color-mix(in srgb, ${color} 30%, transparent)`}
+  >{name}</Badge
+>