fix(dashboard): Prevent category names from overflowing in organize section (#9562)

**What**
- Prevents the name of parent and children categories from overflowing in the Organize section.

Resolves CC-586
This commit is contained in:
Kasper Fabricius Kristensen
2024-10-14 14:24:22 +00:00
committed by GitHub
parent 56135b9750
commit 170b3a08b7
@@ -98,7 +98,7 @@ const PathDisplay = ({
return ( return (
<div className="grid grid-cols-[20px_1fr] items-start gap-x-2"> <div className="grid grid-cols-[20px_1fr] items-start gap-x-2">
<FolderIllustration /> <FolderIllustration />
<div className="flex items-center gap-x-0.5"> <div className="flex w-full items-center gap-x-0.5 overflow-hidden">
<Tooltip content={t("categories.fields.path.tooltip")}> <Tooltip content={t("categories.fields.path.tooltip")}>
<button <button
className="outline-none" className="outline-none"
@@ -110,7 +110,9 @@ const PathDisplay = ({
</Text> </Text>
</button> </button>
</Tooltip> </Tooltip>
<TriangleRightMini /> <div className="flex size-[15px] shrink-0 items-center justify-center">
<TriangleRightMini />
</div>
<Text <Text
size="xsmall" size="xsmall"
leading="compact" leading="compact"
@@ -201,10 +203,12 @@ const ChildrenDisplay = ({
} }
return ( return (
<div className="flex flex-wrap gap-1"> <div className="flex w-full flex-wrap gap-1">
{chips.map((chip) => ( {chips.map((chip) => (
<Badge key={chip.id} size="2xsmall" asChild> <Badge key={chip.id} size="2xsmall" className="max-w-full" asChild>
<Link to={`/categories/${chip.id}`}>{chip.name}</Link> <Link to={`/categories/${chip.id}`}>
<span className="truncate">{chip.name}</span>
</Link>
</Badge> </Badge>
))} ))}
</div> </div>