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:
+9
-5
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user