refactor(ai-toolbar): cluster example prompts in masonry layout

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) => (
+									<div className="columns-2 gap-2">
-										<Button
+										{examplePrompts.map((prompt) => (
-											key={prompt}
+											<div key={prompt} className="mb-2 break-inside-avoid">
-											type="button"
+												<Button
-											variant="secondary"
+													type="button"
-											size="sm"
+													variant="secondary"
-											className="h-7 max-w-full rounded-full px-2.5 text-[11px]"
+													size="sm"
-											onClick={() => onAiTemplateSelect(prompt)}
+													className="h-auto w-full text-left justify-start rounded-2xl px-3 py-2 text-[11px] leading-relaxed"
-											disabled={aiLoading || !canUseAi}
+													onClick={() => onAiTemplateSelect(prompt)}
-										>
+													disabled={aiLoading || !canUseAi}
-											<span className="truncate">{prompt}</span>
+												>
-										</Button>
+													{prompt}
-									))}
+												</Button>
+											</div>
+										))}
+									</div>
 								</div>
 							</div>
 						</div>

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();