Fix multiple issues with long text overflow

packages/bbui/src/Icon/IconAvatar.svelte

@@ -19,6 +19,7 @@
   .icon {
     width: 28px;
     height: 28px;
+    flex: 0 0 28px;
     display: grid;
     place-items: center;
     border-radius: 50%;
@@ -34,6 +35,7 @@
   .icon.size--S {
     width: 22px;
     height: 22px;
+    flex: 0 0 22px;
   }
   .icon.size--S :global(.spectrum-Icon) {
     width: 16px;
@@ -46,6 +48,7 @@
   .icon.size--L {
     width: 40px;
     height: 40px;
+    flex: 0 0 40px;
   }
   .icon.size--L :global(.spectrum-Icon) {
     width: 28px;

packages/bbui/src/List/ListItem.svelte

@@ -30,9 +30,11 @@
       <Label>{subtitle}</Label>
     {/if}
   </div>
-  <div class="right">
-    <slot />
-  </div>
+  {#if $$slots.default}
+    <div class="right">
+      <slot />
+    </div>
+  {/if}
 </div>
 
 <style>
@@ -45,6 +47,7 @@
     justify-content: space-between;
     border: 1px solid var(--spectrum-global-color-gray-300);
     transition: background 130ms ease-out;
+    gap: var(--spacing-m);
   }
   .list-item:not(:first-child) {
     border-top: none;

packages/builder/src/pages/builder/portal/users/groups/[groupId].svelte

@@ -111,25 +111,19 @@
     </Breadcrumbs>
 
     <div class="header">
-      <div class="title">
-        <GroupIcon {group} size="L" />
-        <div class="text-padding">
-          <Heading>{group?.name}</Heading>
-        </div>
-      </div>
-      <div>
-        <ActionMenu align="right">
-          <span slot="control">
-            <Icon hoverable name="More" />
-          </span>
-          <MenuItem icon="Refresh" on:click={() => editModal.show()}>
-            Edit
-          </MenuItem>
-          <MenuItem icon="Delete" on:click={() => deleteModal.show()}>
-            Delete
-          </MenuItem>
-        </ActionMenu>
-      </div>
+      <GroupIcon {group} size="L" />
+      <Heading>{group?.name}</Heading>
+      <ActionMenu align="right">
+        <span slot="control">
+          <Icon hoverable name="More" />
+        </span>
+        <MenuItem icon="Refresh" on:click={() => editModal.show()}>
+          Edit
+        </MenuItem>
+        <MenuItem icon="Delete" on:click={() => deleteModal.show()}>
+          Delete
+        </MenuItem>
+      </ActionMenu>
     </div>
 
     <Layout noPadding gap="S">
@@ -243,13 +237,12 @@
 <style>
   .header {
     display: flex;
-    justify-content: space-between;
-    align-items: flex-end;
-  }
-  .title {
-    display: flex;
+    flex-direction: row;
     justify-content: flex-start;
     align-items: center;
     gap: var(--spacing-m);
   }
+  .header :global(.spectrum-Heading) {
+    flex: 1 1 auto;
+  }
 </style>

packages/builder/src/pages/builder/portal/users/groups/_components/GroupNameTableRenderer.svelte

@@ -8,7 +8,9 @@
 <div class="align">
   {#if value}
     <GroupIcon group={row} />
-    {value}
+    <div class="text">
+      {value}
+    </div>
   {:else}
     <div class="text">-</div>
   {/if}
@@ -20,8 +22,13 @@
     align-items: center;
     overflow: hidden;
     gap: var(--spacing-m);
+    max-width: var(--max-cell-width);
+    flex: 1 1 auto;
+    width: 0;
   }
   .text {
-    opacity: 0.8;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
   }
 </style>

packages/builder/src/pages/builder/portal/users/groups/index.svelte

@@ -40,9 +40,9 @@
   ]
 
   $: schema = {
-    name: { displayName: "Group" },
-    users: { sortable: false },
-    roles: { sortable: false, displayName: "Apps" },
+    name: { displayName: "Group", width: "2fr" },
+    users: { sortable: false, width: "1fr" },
+    roles: { sortable: false, displayName: "Apps", width: "1fr" },
   }
   $: filteredGroups = filterGroups($groups, searchString)
 

packages/builder/src/pages/builder/portal/users/users/index.svelte

@@ -56,15 +56,18 @@
   $: schema = {
     email: {
       sortable: false,
+      width: "2fr",
     },
     role: {
       sortable: false,
+      width: "1fr",
     },
     ...($licensing.groupsEnabled && {
-      userGroups: { sortable: false, displayName: "Groups" },
+      userGroups: { sortable: false, displayName: "Groups", width: "1fr" },
     }),
     apps: {
       sortable: false,
+      width: "1fr",
     },
   }
   $: userData = []