boosted 3cols

components/home/boosted/BoostedSection.tsx

@@ -5,40 +5,29 @@ import { useBoostedDrops } from "@/hooks/useBoostedDrops";
 import { useMediaQuery } from "@/hooks/useMediaQuery";
 import { useRouter } from "next/navigation";
 import { useCallback, useMemo } from "react";
-import Masonry from "react-masonry-css";
 import BoostedDropCardHome from "./BoostedDropCardHome";
 
 const BOOSTED_DROPS_LIMIT = 50;
 const MAX_ROWS = 3;
 
-const MASONRY_BREAKPOINTS = {
-  default: 4,
-  1280: 3,
-  1024: 3,
-  768: 2,
-  640: 1,
-};
-
 export function BoostedSection() {
   const router = useRouter();
   const { data: drops, isLoading } = useBoostedDrops({
     limit: BOOSTED_DROPS_LIMIT,
   });
 
-  // Detect breakpoints to determine column count
-  const isXl = useMediaQuery("(min-width: 1281px)");
+  // Detect breakpoints to determine column count (matches Tailwind lg breakpoint)
   const isLg = useMediaQuery("(min-width: 1024px)");
-  const isMd = useMediaQuery("(min-width: 768px)");
   const isSm = useMediaQuery("(min-width: 640px)");
 
   // Calculate max items based on columns * MAX_ROWS (mobile: 1x6)
   const visibleDrops = useMemo(() => {
     if (!drops) return [];
     if (!isSm) return drops.slice(0, 6); // Mobile: 1 col × 6 items
-    const columns = isXl ? 4 : isLg ? 3 : 2;
+    const columns = isLg ? 3 : 2;
     const maxItems = columns * MAX_ROWS;
     return drops.slice(0, maxItems);
-  }, [drops, isXl, isLg, isMd, isSm]);
+  }, [drops, isLg, isSm]);
 
   const handleDropClick = useCallback(
     (drop: ApiDrop) => {
@@ -75,20 +64,16 @@ export function BoostedSection() {
           </p>
         </div>
 
-        <Masonry
-          breakpointCols={MASONRY_BREAKPOINTS}
-          className="tw--ml-5 tw-flex tw-w-auto"
-          columnClassName="tw-pl-5 tw-bg-clip-padding"
-        >
+        <div className="tw-grid tw-grid-cols-1 tw-gap-5 sm:tw-grid-cols-2 lg:tw-grid-cols-3">
           {visibleDrops.map((drop) => (
-            <div key={drop.id} className="tw-mb-5">
+            <div key={drop.id}>
               <BoostedDropCardHome
                 drop={drop}
                 onClick={() => handleDropClick(drop)}
               />
             </div>
           ))}
-        </Masonry>
+        </div>
       </div>
     </section>
   );

components/home/explore-waves/ExploreWavesSection.tsx

@@ -59,21 +59,15 @@ export function ExploreWavesSection() {
           </Link>
         </div>
 
-        <div className="-tw-mx-6 tw-flex tw-gap-4 tw-overflow-x-auto tw-scroll-smooth tw-px-6 tw-pb-2 tw-scrollbar-none md:-tw-mx-8 md:tw-px-8 lg:tw-grid lg:tw-grid-cols-3 lg:tw-gap-5 lg:tw-overflow-visible lg:tw-pb-0">
+        <div className="tw-grid tw-grid-cols-1 tw-gap-5 sm:tw-grid-cols-2 lg:tw-grid-cols-3">
           {isLoading
             ? Array.from({ length: WAVES_LIMIT }).map((_, index) => (
-                <div
-                  key={`skeleton-${index}`}
-                  className="tw-w-[80%] tw-shrink-0 sm:tw-w-80 lg:tw-w-full"
-                >
+                <div key={`skeleton-${index}`} className="tw-w-full">
                   <ExploreWaveCardSkeleton />
                 </div>
               ))
             : waves?.map((wave) => (
-                <div
-                  key={wave.id}
-                  className="tw-w-[80%] tw-shrink-0 sm:tw-w-80 lg:tw-w-full"
-                >
+                <div key={wave.id} className="tw-w-full">
                   <ExploreWaveCard wave={wave} />
                 </div>
               ))}

components/waves/drops/WaveCreatorPreviewItem.tsx

@@ -15,12 +15,10 @@ import WavesIcon from "@/components/common/icons/WavesIcon";
 
 interface WaveCreatorPreviewItemProps {
   readonly wave: ApiWave;
-  readonly onNavigate: () => void;
 }
 
 export const WaveCreatorPreviewItem: React.FC<WaveCreatorPreviewItemProps> = ({
   wave,
-  onNavigate,
 }) => {
   const isDirectMessage = wave.chat.scope.group?.is_direct_message ?? false;
   const waveHref = getWaveRoute({
@@ -37,7 +35,6 @@ export const WaveCreatorPreviewItem: React.FC<WaveCreatorPreviewItemProps> = ({
     <Link
       href={waveHref}
       prefetch={false}
-      onClick={onNavigate}
       className="tw-group tw-flex tw-items-center tw-gap-3 tw-rounded-lg tw-border tw-border-iron-800/70 tw-bg-iron-950/60 tw-px-4 tw-py-3 tw-no-underline tw-transition tw-duration-200 focus:tw-outline-none focus-visible:tw-ring-2 focus-visible:tw-ring-primary-400/60 desktop-hover:hover:tw-border-iron-700 desktop-hover:hover:tw-bg-iron-900/60"
     >
       <div className="tw-flex tw-h-10 tw-w-10 tw-flex-shrink-0 tw-items-center tw-justify-center tw-overflow-hidden tw-rounded-md tw-bg-iron-900 tw-ring-1 tw-ring-white/10">

components/waves/drops/WaveCreatorPreviewModalContent.tsx

@@ -117,11 +117,7 @@ export const WaveCreatorPreviewModalContent: React.FC<
               {waves.length > 0 && (
                 <div className="tw-flex tw-flex-col tw-gap-3">
                   {waves.map((wave) => (
-                    <WaveCreatorPreviewItem
-                      key={wave.id}
-                      wave={wave}
-                      onNavigate={onClose}
-                    />
+                    <WaveCreatorPreviewItem key={wave.id} wave={wave} />
                   ))}
                 </div>
               )}