docs(gallery): switch masonry columns to lg breakpoint

Author: petekp

app/docs/gallery/page.tsx

@@ -14,6 +14,7 @@ import { ItemCarousel } from "@/components/tool-ui/item-carousel";
 import { OrderSummary } from "@/components/tool-ui/order-summary";
 import { StatsDisplay } from "@/components/tool-ui/stats-display";
 import { type GalleryComponentDocId } from "@/lib/docs/gallery-component-docs";
+import { GALLERY_COLUMNS_CLASS } from "@/lib/docs/gallery-layout";
 import { approvalCardPresets } from "@/lib/presets/approval-card";
 import { audioPresets } from "@/lib/presets/audio";
 import { chartPresets } from "@/lib/presets/chart";
@@ -359,7 +360,7 @@ export default function ComponentsGalleryPage() {
       >
         <h1 className="sr-only">Tool UI Component Gallery</h1>
         <GalleryPageAnalytics />
-        <div className="mx-auto w-full min-w-0 max-w-full columns-1 gap-5 overflow-x-hidden pb-20 [column-fill:balance] md:columns-2">
+        <div className={GALLERY_COLUMNS_CLASS}>
           {galleryCards.map((card) => (
             <GalleryPreviewCard
               key={card.componentId}

lib/docs/gallery-layout.ts

@@ -0,0 +1,2 @@
+export const GALLERY_COLUMNS_CLASS =
+  "mx-auto w-full min-w-0 max-w-full columns-1 gap-5 overflow-x-hidden pb-20 [column-fill:balance] lg:columns-2";

lib/tests/tool-ui/docs/gallery-layout.test.ts

@@ -0,0 +1,12 @@
+import { describe, expect, test } from "vitest";
+
+import { GALLERY_COLUMNS_CLASS } from "@/lib/docs/gallery-layout";
+
+describe("gallery page layout", () => {
+  test("keeps a single column below the lg breakpoint (~1024px)", () => {
+    expect(GALLERY_COLUMNS_CLASS).toContain("columns-1");
+    expect(GALLERY_COLUMNS_CLASS).toContain("lg:columns-2");
+    expect(GALLERY_COLUMNS_CLASS).toContain("w-full");
+    expect(GALLERY_COLUMNS_CLASS).not.toContain("md:columns-2");
+  });
+});