feat(ktl-2781): render grid as single column on mobile

Author: berezinant

components/masonry-grid/masonry-grid.tsx

@@ -1,5 +1,5 @@
 import cn from 'classnames';
-import { useMemo, ReactNode } from 'react';
+import { useMemo, ReactNode, useEffect, useState } from 'react';
 import styles from './masonry-grid.module.css';
 
 export interface MasonryGridProps<T> {
@@ -11,6 +11,7 @@ export interface MasonryGridProps<T> {
     className?: string;
     columnClassName?: string;
     itemClassName?: string;
+    mobileBreakpoint?: number;
 }
 
 export function MasonryGrid<T>({
@@ -21,18 +22,34 @@ export function MasonryGrid<T>({
                                    getKey,
                                    className,
                                    columnClassName,
-                                   itemClassName
+                                   itemClassName,
+                                   mobileBreakpoint = 808,
                                }: MasonryGridProps<T>) {
+    const [isMobile, setIsMobile] = useState(false);
+
+    useEffect(() => {
+        const update = () => {
+            if (typeof window !== 'undefined') {
+                setIsMobile(window.innerWidth <= mobileBreakpoint);
+            }
+        };
+        update();
+        window.addEventListener('resize', update);
+        return () => window.removeEventListener('resize', update);
+    }, [mobileBreakpoint]);
+
+    const effectiveColumnCount = Math.max(1, isMobile ? 1 : columnCount);
+
     const columns = useMemo(() => {
-        const cols: T[][] = Array.from({ length: columnCount }, () => []);
+        const cols: T[][] = Array.from({ length: effectiveColumnCount }, () => []);
 
         items.forEach((item, index) => {
-            const columnIndex = index % columnCount;
+            const columnIndex = index % effectiveColumnCount;
             cols[columnIndex].push(item);
         });
 
         return cols;
-    }, [items, columnCount]);
+    }, [items, effectiveColumnCount]);
 
     const style = gap !== undefined ? { gap: `${gap}px` } : undefined;
 
@@ -45,7 +62,7 @@ export function MasonryGrid<T>({
                     style={style}
                 >
                     {column.map((item, itemIndex) => {
-                        const originalIndex = columnIndex + itemIndex * columnCount;
+                        const originalIndex = columnIndex + itemIndex * effectiveColumnCount;
                         return (
                             <div
                                 key={getKey(item, originalIndex)}