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

Code before:
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { useState } from "react";
import { StoreAgent } from "@/lib/autogpt-server-api";

interface FeaturedStoreCardProps {
  agent: StoreAgent;
  backgroundColor: string;
}

export const FeaturedAgentCard: React.FC<FeaturedStoreCardProps> = ({
  agent,
  backgroundColor,
}) => {
  const [isHovered, setIsHovered] = useState(false);

  return (
    <Card
      data-testid="featured-store-card"
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
      className={`flex h-[482px] w-[440px] flex-col ${backgroundColor}`}
    >
      <CardHeader className="flex-none space-y-3 pb-2">
        <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">

Review comment (suggestion):
You have a good approach on adding a lineclamp for the description. 

Since we are not too sure on how long these titles can be lets add a line-clamp-2 here as well to be safe.

```suggestion
<CardTitle className="line-clamp-2 text-base sm:text-xl">
```



Code after:
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { useState } from "react";
import { StoreAgent } from "@/lib/autogpt-server-api";

interface FeaturedStoreCardProps {
  agent: StoreAgent;
  backgroundColor: string;
}

export const FeaturedAgentCard: React.FC<FeaturedStoreCardProps> = ({
  agent,
  backgroundColor,
}) => {
  const [isHovered, setIsHovered] = useState(false);

  return (
    <Card
      data-testid="featured-store-card"
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
      className={`flex h-full flex-col ${backgroundColor}`}
    >
      <CardHeader>
        <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>