From aec3eb91a882fae17d22d75566e77b34b8f32e2f Mon Sep 17 00:00:00 2001
From: Erik Jan de Wit <erikjan.dewit@gmail.com>
Date: Fri, 13 Sep 2024 15:55:53 +0200
Subject: [PATCH] added table wrap to avoid data off screen (#32908)

Closes #32758

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>
---
 .../src/clients/authorization/Resources.tsx   | 43 +++++++++++++------
 1 file changed, 29 insertions(+), 14 deletions(-)

diff --git a/js/apps/admin-ui/src/clients/authorization/Resources.tsx b/js/apps/admin-ui/src/clients/authorization/Resources.tsx
index 8a28dc756a..4d253dd4f2 100644
--- a/js/apps/admin-ui/src/clients/authorization/Resources.tsx
+++ b/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,19 +229,33 @@ export const AuthorizationResources = ({
                       }}
                     />
                     <Td data-testid={`name-column-${resource.name}`}>
-                      <Link
-                        to={toResourceDetails({
-                          realm,
-                          id: clientId,
-                          resourceId: resource._id!,
-                        })}
-                      >
-                        {resource.name}
-                      </Link>
+                      <TableText wrapModifier="truncate">
+                        <Link
+                          to={toResourceDetails({
+                            realm,
+                            id: clientId,
+                            resourceId: resource._id!,
+                          })}
+                        >
+                          {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>