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

Closes #32758

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>
This commit is contained in:
Erik Jan de Wit 2024-09-13 15:55:53 +02:00 committed by GitHub
parent 0ac7db7a0b
commit aec3eb91a8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

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