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 = ({
}}
/>
-
+
Try:
- {examplePrompts.map((prompt) => (
-
- ))}
+
+ {examplePrompts.map((prompt) => (
+
+
+
+ ))}
+
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();