added table wrap to avoid data off screen (#32908)

Closes #32758

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>

js/apps/admin-ui/src/clients/authorization/Resources.tsx

@@ -16,6 +16,7 @@ import {
 import {
   ExpandableRowContent,
   Table,
+  TableText,
   Tbody,
   Td,
   Th,
@@ -46,9 +47,9 @@ type ExpandableResourceRepresentation = ResourceRepresentation & {
 };
 
 const UriRenderer = ({ row }: { row: ResourceRepresentation }) => (
-  <>
+  <TableText wrapModifier="truncate">
     {row.uris?.[0]} <MoreLabel array={row.uris} />
-  </>
+  </TableText>
 );
 
 export const AuthorizationResources = ({
@@ -228,6 +229,7 @@ export const AuthorizationResources = ({
                       }}
                     />
                     <Td data-testid={`name-column-${resource.name}`}>
+                      <TableText wrapModifier="truncate">
                         <Link
                           to={toResourceDetails({
                             realm,
@@ -237,10 +239,23 @@ export const AuthorizationResources = ({
                         >
                           {resource.name}
                         </Link>
+                      </TableText>
+                    </Td>
+                    <Td>
+                      <TableText wrapModifier="truncate">
+                        {resource.displayName}
+                      </TableText>
+                    </Td>
+                    <Td>
+                      <TableText wrapModifier="truncate">
+                        {resource.type}
+                      </TableText>
+                    </Td>
+                    <Td>
+                      <TableText wrapModifier="truncate">
+                        {resource.owner?.name}
+                      </TableText>
                     </Td>
-                    <Td>{resource.displayName}</Td>
-                    <Td>{resource.type}</Td>
-                    <Td>{resource.owner?.name}</Td>
                     <Td>
                       <UriRenderer row={resource} />
                     </Td>