description ui change

__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: [],

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) {
     >
       <div className="tw-pointer-events-none tw-absolute tw-inset-0 tw-z-10 tw-rounded-xl tw-border tw-border-solid tw-border-white/10" />
       <div
-        className="tw-relative tw-aspect-[2/1] tw-overflow-hidden"
+        className="tw-relative tw-aspect-[20/9] tw-overflow-hidden"
         style={imageAreaStyle}
       >
         {wave.picture && (
@@ -67,9 +66,16 @@ export function ExploreWaveCard({ wave }: ExploreWaveCardProps) {
           {wave.name}
         </span>
 
+        {descriptionPreview && (
+          <MessagePreviewContent previewContent={descriptionPreview} />
+        )}
+
         {hasDrops && (
-          <div className="tw-mb-3 tw-mt-2 tw-flex tw-flex-wrap tw-items-center tw-gap-x-1.5 tw-gap-y-1 tw-text-[11px] tw-text-iron-500 sm:tw-text-xs">
-            <span className="tw-size-1.5 tw-rounded-full tw-bg-emerald-500" />
+          <div className="tw-mt-6 tw-flex tw-flex-wrap tw-items-center tw-gap-x-1.5 tw-gap-y-1 tw-text-[11px] tw-text-iron-500 sm:tw-text-xs">
+            <span className="tw-relative tw-flex tw-h-2 tw-w-2">
+              <span className="tw-absolute tw-inline-flex tw-h-full tw-w-full tw-animate-ping tw-rounded-full tw-bg-success/60" />
+              <span className="tw-relative tw-inline-flex tw-h-2 tw-w-2 tw-rounded-full tw-bg-success" />
+            </span>
             <span className="tw-text-iron-300">
               {getTimeAgoShort(lastMessageTime)} ·{" "}
               {wave.metrics.drops_count.toLocaleString()}
@@ -79,22 +85,10 @@ export function ExploreWaveCard({ wave }: ExploreWaveCardProps) {
         )}
 
         {!hasDrops && (
-          <div className="tw-mb-3 tw-text-[11px] tw-text-iron-500 sm:tw-text-xs">
+          <div className="tw-mt-3 tw-text-[11px] tw-text-iron-500 sm:tw-text-xs">
             No drops yet
           </div>
         )}
-
-        {descriptionPreview && (
-          <div className="tw-flex tw-items-center tw-gap-1.5 tw-rounded-lg tw-bg-iron-800/60 tw-p-1 tw-shadow-inner sm:tw-gap-3 sm:tw-p-2">
-            <div className="tw-flex tw-h-5 tw-w-5 tw-shrink-0 tw-items-center tw-justify-center tw-rounded-full tw-bg-iron-700/40 sm:tw-h-7 sm:tw-w-7">
-              <ChatBubbleBottomCenterIcon
-                className="tw-size-3 tw-shrink-0 tw-text-iron-400 sm:tw-size-3.5"
-                aria-hidden="true"
-              />
-            </div>
-            <MessagePreviewContent previewContent={descriptionPreview} />
-          </div>
-        )}
       </div>
     </Link>
   );
@@ -113,8 +107,8 @@ function MessagePreviewContent({
     <ContentDisplay
       content={previewContent}
       shouldClamp={false}
-      className="tw-flex tw-min-w-0 tw-flex-1 tw-items-center tw-gap-1 tw-overflow-hidden tw-text-iron-400"
-      textClassName="tw-line-clamp-1 tw-break-words tw-text-[10px] tw-font-medium tw-leading-tight sm:tw-text-xs"
+      className="tw-mt-1 tw-flex tw-min-w-0 tw-flex-1 tw-items-start tw-gap-1 tw-overflow-hidden tw-text-iron-500"
+      textClassName="tw-line-clamp-2 tw-break-words tw-text-[10px] tw-font-normal tw-leading-tight sm:tw-text-xs"
       linkify={false}
     />
   );

components/home/explore-waves/ExploreWaveCardSkeleton.tsx

@@ -4,21 +4,21 @@ export function ExploreWaveCardSkeleton() {
   return (
     <div className="tw-overflow-hidden tw-rounded-xl tw-bg-iron-950 tw-ring-1 tw-ring-inset tw-ring-white/10">
       {/* Image Skeleton */}
-      <div className="tw-aspect-[2/1] tw-animate-pulse tw-bg-iron-900" />
+      <div className="tw-aspect-[20/9] tw-animate-pulse tw-bg-iron-900" />
 
       {/* Content Skeleton */}
       <div className="tw-px-4 tw-py-6 sm:tw-p-5">
         {/* Wave Name Skeleton */}
         <div className="tw-h-5 tw-w-3/4 tw-animate-pulse tw-rounded tw-bg-iron-800 sm:tw-h-6" />
 
-        {/* Metadata Skeleton */}
-        <div className="tw-mt-2 tw-h-4 tw-w-1/2 tw-animate-pulse tw-rounded tw-bg-iron-800/60" />
-
         {/* Message Preview Skeleton */}
-        <div className="tw-mt-3 tw-flex tw-items-start tw-gap-2 sm:tw-gap-3">
-          <div className="tw-size-3.5 tw-flex-shrink-0 tw-animate-pulse tw-rounded tw-bg-iron-800/60 sm:tw-size-4" />
-          <div className="tw-h-4 tw-flex-1 tw-animate-pulse tw-rounded tw-bg-iron-800/60" />
+        <div className="tw-mt-2 tw-space-y-2">
+          <div className="tw-h-3 tw-w-full tw-animate-pulse tw-rounded tw-bg-iron-800/60" />
+          <div className="tw-h-3 tw-w-5/6 tw-animate-pulse tw-rounded tw-bg-iron-800/60" />
         </div>
+
+        {/* Metadata Skeleton */}
+        <div className="tw-mt-5 tw-h-4 tw-w-1/2 tw-animate-pulse tw-rounded tw-bg-iron-800/60" />
       </div>
     </div>
   );

components/home/explore-waves/ExploreWavesSection.tsx

@@ -82,7 +82,7 @@ export function ExploreWavesSection({
           </div>
         </div>
 
-        <div className="tw-grid tw-grid-cols-1 tw-gap-x-3 tw-gap-y-4 sm:tw-grid-cols-2 sm:tw-gap-5 lg:tw-grid-cols-3">
+        <div className="tw-grid tw-grid-cols-1 tw-gap-x-3 tw-gap-y-4 sm:tw-grid-cols-2 sm:tw-gap-6 lg:tw-grid-cols-3">
           {isLoading
             ? Array.from({ length: limit }).map((_, index) => (
                 <div key={`skeleton-${index}`} className="tw-w-full">