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