LaLeV/wacrm
1
0
Fork 0
mirror of https://github.com/Luchexx/wacrm.git synced 2026-11-02 17:29:45 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(flows): widen create-flow dialog so template cards are readable

Browse Source 
The dialog was max-w-2xl with sm:grid-cols-3, leaving each template
card ~150px wide. With p-3 padding and line-clamp-3 the descriptions
truncated to four-word fragments — the gallery looked squished even
on desktop.

- Dialog: max-w-2xl → max-w-3xl
- Grid: stack on mobile, 2-col on sm, 3-col on lg (matches the
  flow-card list grid elsewhere in the page).
- Card: p-3 → p-4, gap-2 → gap-2.5, h-4 icon → h-5.
- Drop the line-clamp on the description — at the new width it fits.
- Move the "X nodes" footer above a top-border so it reads as
  metadata, not part of the description.
- Add a divider above the "Or start blank" section so the two
  paths feel like distinct choices.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Arnas Donauskas 2026-05-22 16:15:39 +03:00
parent 9febfae9b2
commit a6cc847636
No known key found for this signature in database
1 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/app/(dashboard)/flows/page.tsx
View File

@ -245,7 +245,7 @@ export default function FlowsPage() {
)}
<Dialog open={createOpen} onOpenChange={setCreateOpen}>
<DialogContent className="max-w-2xl bg-slate-900 text-slate-100">
<DialogContent className="max-w-3xl bg-slate-900 text-slate-100">
<DialogHeader>
<DialogTitle>Create a new flow</DialogTitle>
<DialogDescription className="text-slate-400">
@ -254,11 +254,11 @@ export default function FlowsPage() {
</DialogHeader>
{templates.length > 0 && (
<div className="space-y-2">
<div className="space-y-3">
<p className="text-xs uppercase tracking-wide text-slate-500">
Start from a template
</p>
<div className="grid grid-cols-1 gap-2 sm:grid-cols-3">
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
{templates.map((t) => {
const Icon = TEMPLATE_ICONS[t.icon] ?? FileText;
return (
@ -267,17 +267,17 @@ export default function FlowsPage() {
type="button"
onClick={() => handleUseTemplate(t.slug)}
disabled={creating}
className="flex flex-col gap-2 rounded-lg border border-slate-800 bg-slate-950 p-3 text-left transition-colors hover:border-violet-500/40 hover:bg-slate-800 disabled:opacity-50"
className="flex flex-col gap-2.5 rounded-lg border border-slate-800 bg-slate-950 p-4 text-left transition-colors hover:border-violet-500/40 hover:bg-slate-800 disabled:opacity-50"
>
<Icon className="h-4 w-4 text-violet-400" />
<span className="text-sm font-medium text-white">
<Icon className="h-5 w-5 text-violet-400" />
<span className="text-sm font-semibold text-white">
{t.name}
</span>
<span className="line-clamp-3 text-xs text-slate-400">
<span className="text-xs leading-relaxed text-slate-400">
{t.description}
</span>
<span className="mt-auto text-[10px] text-slate-500">
{t.node_count} nodes
<span className="mt-auto border-t border-slate-800 pt-2 text-[11px] text-slate-500">
{t.node_count} {t.node_count === 1 ? "node" : "nodes"}
</span>
</button>
);
@ -286,7 +286,7 @@ export default function FlowsPage() {
</div>
)}
<div className="space-y-2">
<div className="space-y-2 border-t border-slate-800 pt-4">
<p className="text-xs uppercase tracking-wide text-slate-500">
Or start blank
</p>