Repository: Significant-Gravitas/Auto-GPT
File: autogpt_platform/frontend/src/components/agptui/FeaturedAgentCard.tsx (TypeScript)

Code before:
        <CardTitle className="text-xl leading-tight">
          {agent.agent_name}
        </CardTitle>
        <CardDescription className="text-sm">
          By {agent.creator}
        </CardDescription>
      </CardHeader>
      <CardContent className="relative flex-1 p-4">
        <div className="absolute inset-0 m-4 overflow-hidden rounded-xl">
          <div
            className={`h-full w-full transition-opacity duration-200 ${isHovered ? "opacity-0" : "opacity-100"}`}
          >
            <Image
              src={agent.agent_image || "/AUTOgpt_Logo_dark.png"}
              alt={`${agent.agent_name} preview`}
              fill
              sizes="100%"
              className="rounded-xl object-cover"
            />
          </div>
          <div
            className={`absolute inset-0 overflow-y-auto p-4 transition-opacity duration-200 ${
              isHovered ? "opacity-100" : "opacity-0"
            }`}
          >
            <CardDescription className="line-clamp-[11] text-sm leading-relaxed text-muted-foreground">
              {agent.description}
            </CardDescription>
          </div>
        </div>
      </CardContent>
      <CardFooter className="flex h-[60px] flex-none items-center justify-between">
        <div className="font-semibold">
          {agent.runs?.toLocaleString() ?? "0"} runs
        </div>
        <div className="flex items-center gap-1.5">
          <p>{agent.rating.toFixed(1) ?? "0.0"}</p>
          <div
            className="inline-flex items-center justify-start gap-px"
            role="img"
            aria-label={`Rating: ${agent.rating.toFixed(1)} out of 5 stars`}
          >
            {StarRatingIcons(agent.rating)}
          </div>
        </div>
      </CardFooter>
    </Card>
  );
};


Review comment (suggestion):
We will want to keep mobile in mind when building out specialized components like this. 
It would be good to add a something similar to this:

```suggestion
              <CardDescription className="line-clamp-[6] sm:line-clamp-[8] text-xs sm:text-sm">
                {agent.description}
              </CardDescription>
```

Code after:
        <CardTitle className="line-clamp-2 text-base sm:text-xl">
          {agent.agent_name}
        </CardTitle>
        <CardDescription className="text-sm">
          By {agent.creator}
        </CardDescription>
      </CardHeader>
      <CardContent className="flex-1 p-4">
        <div className="relative aspect-[4/3] w-full overflow-hidden rounded-xl">
          <Image
            src={agent.agent_image || "/AUTOgpt_Logo_dark.png"}
            alt={`${agent.agent_name} preview`}
            fill
            sizes="100%"
            className={`object-cover transition-opacity duration-200 ${
              isHovered ? "opacity-0" : "opacity-100"
            }`}
          />
          <div
            className={`absolute inset-0 overflow-y-auto p-4 transition-opacity duration-200 ${
              isHovered ? "opacity-100" : "opacity-0"
            }`}
          >
            <CardDescription className="line-clamp-[6] text-xs sm:line-clamp-[8] sm:text-sm">
              {agent.description}
            </CardDescription>
          </div>
        </div>
      </CardContent>
      <CardFooter className="flex items-center justify-between">
        <div className="font-semibold">
          {agent.runs?.toLocaleString() ?? "0"} runs
        </div>
        <div className="flex items-center gap-1.5">
          <p>{agent.rating.toFixed(1) ?? "0.0"}</p>
          {StarRatingIcons(agent.rating)}
        </div>
      </CardFooter>
    </Card>
  );
};