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

src/components/ai-toolbar.tsx

@@ -332,26 +332,29 @@ 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>
+									<div className="columns-2 gap-2">
 										{examplePrompts.map((prompt) => (
+											<div key={prompt} className="mb-2 break-inside-avoid">
 												<Button
-											key={prompt}
 													type="button"
 													variant="secondary"
 													size="sm"
-											className="h-7 max-w-full rounded-full px-2.5 text-[11px]"
+													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}
 												>
-											<span className="truncate">{prompt}</span>
+													{prompt}
 												</Button>
+											</div>
 										))}
 									</div>
 								</div>
 							</div>
+						</div>
 
 						<div className="flex flex-wrap items-center justify-between gap-2">
 							<div className="flex items-center gap-1.5">

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