diff --git a/__tests__/components/home/explore-waves/ExploreWaveCard.test.tsx b/__tests__/components/home/explore-waves/ExploreWaveCard.test.tsx
index 49bde4f956..2e414879ad 100644
--- a/__tests__/components/home/explore-waves/ExploreWaveCard.test.tsx
+++ b/__tests__/components/home/explore-waves/ExploreWaveCard.test.tsx
@@ -83,6 +83,9 @@ describe("ExploreWaveCard", () => {
expect(lastContentDisplayProps).toMatchObject({
linkify: false,
+ shouldClamp: false,
+ className: expect.stringContaining("tw-items-start"),
+ textClassName: expect.stringContaining("tw-line-clamp-2"),
content: {
segments: [{ type: "text", content: "Description preview" }],
apiMedia: [],
diff --git a/components/home/explore-waves/ExploreWaveCard.tsx b/components/home/explore-waves/ExploreWaveCard.tsx
index b25912d1a9..d895ba40fa 100644
--- a/components/home/explore-waves/ExploreWaveCard.tsx
+++ b/components/home/explore-waves/ExploreWaveCard.tsx
@@ -11,7 +11,6 @@ import { getScaledImageUri, ImageScale } from "@/helpers/image.helpers";
import { getWaveRoute } from "@/helpers/navigation.helpers";
import Image from "next/image";
import Link from "next/link";
-import { ChatBubbleBottomCenterIcon } from "@heroicons/react/24/outline";
interface ExploreWaveCardProps {
readonly wave: ApiWave;
@@ -48,7 +47,7 @@ export function ExploreWaveCard({ wave }: ExploreWaveCardProps) {
>
{wave.picture && (
@@ -67,9 +66,16 @@ export function ExploreWaveCard({ wave }: ExploreWaveCardProps) {
{wave.name}
+ {descriptionPreview && (
+
+ )}
+
{hasDrops && (
-
-
+
+
+
+
+
{getTimeAgoShort(lastMessageTime)} ยท{" "}
{wave.metrics.drops_count.toLocaleString()}
@@ -79,22 +85,10 @@ export function ExploreWaveCard({ wave }: ExploreWaveCardProps) {
)}
{!hasDrops && (
-
+
No drops yet
)}
-
- {descriptionPreview && (
-
- )}
);
@@ -113,8 +107,8 @@ function MessagePreviewContent({
);
diff --git a/components/home/explore-waves/ExploreWaveCardSkeleton.tsx b/components/home/explore-waves/ExploreWaveCardSkeleton.tsx
index 22f13918d0..bf98e6f188 100644
--- a/components/home/explore-waves/ExploreWaveCardSkeleton.tsx
+++ b/components/home/explore-waves/ExploreWaveCardSkeleton.tsx
@@ -4,21 +4,21 @@ export function ExploreWaveCardSkeleton() {
return (
{/* Image Skeleton */}
-
+
{/* Content Skeleton */}
{/* Wave Name Skeleton */}
- {/* Metadata Skeleton */}
-
-
{/* Message Preview Skeleton */}
-
-
-
+
+
+ {/* Metadata Skeleton */}
+
);
diff --git a/components/home/explore-waves/ExploreWavesSection.tsx b/components/home/explore-waves/ExploreWavesSection.tsx
index 6b29d9275a..87d92b6f8d 100644
--- a/components/home/explore-waves/ExploreWavesSection.tsx
+++ b/components/home/explore-waves/ExploreWavesSection.tsx
@@ -82,7 +82,7 @@ export function ExploreWavesSection({
-
+
{isLoading
? Array.from({ length: limit }).map((_, index) => (