From a6cc8476363234929e6e4ca7925eeb28abc0bb93 Mon Sep 17 00:00:00 2001
From: Arnas Donauskas <arnas.donauskas@hostinger.com>
Date: Fri, 22 May 2026 16:15:39 +0300
Subject: [PATCH] fix(flows): widen create-flow dialog so template cards are
 readable
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 src/app/(dashboard)/flows/page.tsx | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/app/(dashboard)/flows/page.tsx b/src/app/(dashboard)/flows/page.tsx
index 3cdc495..aff327a 100644
--- a/src/app/(dashboard)/flows/page.tsx
+++ b/src/app/(dashboard)/flows/page.tsx
@@ -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>