Tria/emaui
1
0
Fork 0
mirror of https://github.com/Tria-plc/emaui.git synced 2026-09-08 05:25:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(DocumentsTab): improve layout and truncation for document names and badges

Browse Source
This commit is contained in:
estifanos
2026-08-05 08:59:28 +00:00
parent 0627aa24fc
commit 7d706aa990
1 changed files with 45 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
apps/backoffice/src/app/features/license-review/components/DocumentsTab.tsx
View File

@@ -162,49 +162,56 @@ export function DocumentsTab({
return ( return (
<Paper withBorder p="md" key={attachment.id}> <Paper withBorder p="md" key={attachment.id}>
<Group justify="space-between" wrap="nowrap" align="flex-start"> <Group justify="space-between" wrap="nowrap" align="flex-start">
<Group gap="sm" wrap="nowrap" style={{ minWidth: 0 }}> <Group gap="sm" wrap="nowrap" style={{ minWidth: 0, flex: 1 }}>
<IconFileText size={20} stroke={1.6} /> <IconFileText size={20} stroke={1.6} />
<div style={{ minWidth: 0 }}> <div style={{ minWidth: 0, flex: 1 }}>
<Text size="sm" fw={500}> {/* Badges sit beside the name, not in the outer nowrap row —
{attachment.documentKey} that row also has to fit six action buttons, so a long
</Text> name plus badges there overflowed its box and the
opaque badge painted over the bleeding text. Nested here
with its own wrap, the name truncates cleanly instead. */}
<Group gap={6} wrap="wrap" align="center">
<Text size="sm" fw={500} truncate style={{ maxWidth: '100%' }}>
{attachment.documentKey}
</Text>
{verdict && (
<Tooltip
label={
verdict.reason ??
t('review.documents.reviewedBy', {
name: verdict.reviewedByName ?? '—',
defaultValue: 'Reviewed by {{name}}',
})
}
>
<Badge
color={verdict.decision === 'ACCEPTED' ? 'teal' : 'red'}
variant="light"
size="sm"
leftSection={
verdict.decision === 'ACCEPTED' ? (
<IconCheck size={11} />
) : (
<IconX size={11} />
)
}
>
{verdict.decision === 'ACCEPTED'
? t('review.documents.accepted', 'Accepted')
: t('review.documents.rejected', 'Rejected')}
</Badge>
</Tooltip>
)}
{flagged && (
<Badge color="orange" variant="light" size="sm">
{t('review.documents.flagged', 'Correction requested')}
</Badge>
)}
</Group>
<Text size="xs" c="dimmed" truncate> <Text size="xs" c="dimmed" truncate>
{file?.originalName ?? t('review.documents.noFile', 'No file')} {file?.originalName ?? t('review.documents.noFile', 'No file')}
</Text> </Text>
</div> </div>
{verdict && (
<Tooltip
label={
verdict.reason ??
t('review.documents.reviewedBy', {
name: verdict.reviewedByName ?? '—',
defaultValue: 'Reviewed by {{name}}',
})
}
>
<Badge
color={verdict.decision === 'ACCEPTED' ? 'teal' : 'red'}
variant="light"
size="sm"
leftSection={
verdict.decision === 'ACCEPTED' ? (
<IconCheck size={11} />
) : (
<IconX size={11} />
)
}
>
{verdict.decision === 'ACCEPTED'
? t('review.documents.accepted', 'Accepted')
: t('review.documents.rejected', 'Rejected')}
</Badge>
</Tooltip>
)}
{flagged && (
<Badge color="orange" variant="light" size="sm">
{t('review.documents.flagged', 'Correction requested')}
</Badge>
)}
</Group> </Group>
<Group gap="xs" wrap="nowrap"> <Group gap="xs" wrap="nowrap">