added table wrap to avoid data off screen

Closes #32758

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>
(cherry picked from commit aec3eb91a882fae17d22d75566e77b34b8f32e2f)
This commit is contained in:
Erik Jan de Wit 2024-09-20 22:33:17 +02:00 committed by GitHub
parent 6a7729641b
commit d351327b0e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -10,6 +10,7 @@ import {
import {
ExpandableRowContent,
Table,
TableText,
Tbody,
Td,
Th,
@ -44,9 +45,9 @@ type ExpandableResourceRepresentation = ResourceRepresentation & {
};
const UriRenderer = ({ row }: { row: ResourceRepresentation }) => (
<>
<TableText wrapModifier="truncate">
{row.uris?.[0]} <MoreLabel array={row.uris} />
</>
</TableText>
);
export const AuthorizationResources = ({
@ -226,19 +227,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>