From e1a12d0c710ab51121c6d20e32cc168f0d587993 Mon Sep 17 00:00:00 2001
From: Dmytro Stanchiev <git@dmytros.dev>
Date: Wed, 22 Apr 2026 17:42:29 -0400
Subject: [PATCH] refactor(ai-toolbar): cluster example prompts in masonry
 layout

---
 src/components/ai-toolbar.tsx | 31 +++++++++++++++++--------------
 tests/ai-toolbar.test.ts      |  9 +++++++++
 2 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/src/components/ai-toolbar.tsx b/src/components/ai-toolbar.tsx
index 9ce3143..4d2c484 100644
--- a/src/components/ai-toolbar.tsx
+++ b/src/components/ai-toolbar.tsx
@@ -332,23 +332,26 @@ export const AIToolbar = ({
 								}}
 							/>
 							<div className="border-t border-border px-3 py-3">
-								<div className="flex flex-wrap items-center gap-2">
+								<div className="space-y-2">
 									<span className="text-[11px] font-medium uppercase tracking-[0.18em] text-muted-foreground">
 										Try:
 									</span>
-									{examplePrompts.map((prompt) => (
-										<Button
-											key={prompt}
-											type="button"
-											variant="secondary"
-											size="sm"
-											className="h-7 max-w-full rounded-full px-2.5 text-[11px]"
-											onClick={() => onAiTemplateSelect(prompt)}
-											disabled={aiLoading || !canUseAi}
-										>
-											<span className="truncate">{prompt}</span>
-										</Button>
-									))}
+									<div className="columns-2 gap-2">
+										{examplePrompts.map((prompt) => (
+											<div key={prompt} className="mb-2 break-inside-avoid">
+												<Button
+													type="button"
+													variant="secondary"
+													size="sm"
+													className="h-auto w-full text-left justify-start rounded-2xl px-3 py-2 text-[11px] leading-relaxed"
+													onClick={() => onAiTemplateSelect(prompt)}
+													disabled={aiLoading || !canUseAi}
+												>
+													{prompt}
+												</Button>
+											</div>
+										))}
+									</div>
 								</div>
 							</div>
 						</div>
diff --git a/tests/ai-toolbar.test.ts b/tests/ai-toolbar.test.ts
index 930809f..f686bbb 100644
--- a/tests/ai-toolbar.test.ts
+++ b/tests/ai-toolbar.test.ts
@@ -166,6 +166,15 @@ describe("AI capture redesign", () => {
 		expect(source).not.toContain("lg:grid-cols-");
 	});
 
+	test("example prompts use a masonry-style cluster inside the composer footer", () => {
+		const source = readToolbarSource();
+
+		expect(source).toContain("Try:");
+		expect(source).toContain("columns-2");
+		expect(source).toContain("break-inside-avoid");
+		expect(source).toContain("w-full text-left");
+	});
+
 	test("desktop composer uses a two-column row when the page gives it full-width space", () => {
 		const source = readToolbarSource();