fix: [UI-8803] - IAM Cross browser AssignedRoles entities chips truncation

packages/manager/.changeset/pr-12720-fixed-1755606133614.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+IAM - Cross browser AssignedRoles entities chips truncation ([#12720](https://github.com/linode/manager/pull/12720))

packages/manager/src/features/IAM/Users/UserRoles/AssignedEntities.tsx

@@ -24,13 +24,15 @@ export const AssignedEntities = ({
     useCalculateHiddenItems(role.entity_names!);
 
   const handleResize = React.useMemo(
-    () => debounce(() => calculateHiddenItems(), 100),
+    () => debounce(() => calculateHiddenItems(), 250),
     [calculateHiddenItems]
   );
 
   React.useEffect(() => {
-    // Ensure calculateHiddenItems runs after layout stabilization on initial render
-    const rafId = requestAnimationFrame(() => calculateHiddenItems());
+    // Double RAF for good measure - see https://stackoverflow.com/questions/44145740/how-does-double-requestanimationframe-work
+    const rafId = requestAnimationFrame(() => {
+      requestAnimationFrame(() => calculateHiddenItems());
+    });
 
     window.addEventListener('resize', handleResize);
 
@@ -49,14 +51,27 @@ export const AssignedEntities = ({
     [role.entity_names, role.entity_ids]
   );
 
+  const isLastVisibleItem = React.useCallback(
+    (index: number) => {
+      return combinedEntities.length - numHiddenItems - 1 === index;
+    },
+    [combinedEntities.length, numHiddenItems]
+  );
+
   const items = combinedEntities?.map(
     (entity: CombinedEntity, index: number) => (
-      <div
+      <Box
         key={entity.id}
         ref={(el: HTMLDivElement) => {
           itemRefs.current[index] = el;
         }}
-        style={{ display: 'inline-block', marginRight: 8 }}
+        sx={{
+          display: 'inline',
+          marginRight:
+            numHiddenItems > 0 && isLastVisibleItem(index)
+              ? theme.tokens.spacing.S16
+              : theme.tokens.spacing.S8,
+        }}
       >
         <Chip
           data-testid="entities"
@@ -76,9 +91,18 @@ export const AssignedEntities = ({
             '& .MuiChip-deleteIcon': {
               color: theme.tokens.alias.Content.Text.Primary.Default,
             },
+            position: 'relative',
+            '&::after': {
+              content:
+                numHiddenItems > 0 && isLastVisibleItem(index) ? '"..."' : '""',
+              position: 'absolute',
+              top: 0,
+              right: -16,
+              width: 14,
+            },
           }}
         />
-      </div>
+      </Box>
     )
   );
 
@@ -87,19 +111,18 @@ export const AssignedEntities = ({
       sx={{
         alignItems: 'center',
         display: 'flex',
+        position: 'relative',
       }}
     >
-      <div
+      <Box
         ref={containerRef}
-        style={{
-          WebkitBoxOrient: 'vertical',
-          WebkitLineClamp: 1,
-          display: '-webkit-box',
+        sx={{
           overflow: 'hidden',
+          height: 24,
         }}
       >
         {items}
-      </div>
+      </Box>
       {numHiddenItems > 0 && (
         <Box
           sx={{