Canvas: Improve messages component layout
Change-Id: I5ae26b72f480fff0e4634c7fcc294c04ac4ce7c5
diff --git a/apps/canvas/front/src/Messages.tsx b/apps/canvas/front/src/Messages.tsx
index e756047..c4683f2 100644
--- a/apps/canvas/front/src/Messages.tsx
+++ b/apps/canvas/front/src/Messages.tsx
@@ -43,17 +43,17 @@
<Accordion type="multiple" value={open} onValueChange={(v) => setOpen(v)}>
{[...grouped.entries()].map(([id, messages]) => (
<AccordionItem key={id} value={id}>
- <AccordionTrigger className="flex flex-row-reverse !space-x-4 !justify-end">
+ <AccordionTrigger className="flex flex-row-reverse !gap-1 !justify-end !h-fit !py-0">
<Badge>{messages.length}</Badge>
<div>{id === "global" ? "Global" : nodeLabel(nodeMap.get(id)!)}</div>
</AccordionTrigger>
<AccordionContent>
- <div className="flex flex-col space-y-1">
+ <div className="flex flex-col !px-4">
{messages.map((m) => (
<Button
key={m.id}
variant="ghost"
- style={{ justifyContent: "flex-start" }}
+ className="justify-start !h-fit !py-0"
onMouseOver={onClick(m.onHighlight)}
onMouseLeave={onClick(m.onLooseHighlight)}
onClick={onClick(m.onClick)}