fix(frontend/library): Truncate agent card title and description (#9658)

- Resolves #9631

### Changes 🏗️

- Truncate library agent card title (2 lines) and description (3 lines)
- Make "See runs" and "Open in builder" stick to bottom of card
regardless of other content
- Reduce number of grid columns (4 -> 3) in `lg` layout on `/library` to
give items more horizontal space

![screenshot of library agent grid with the applied
changes](https://github.com/user-attachments/assets/b27d5c97-33b8-4708-9f8c-fc67aad899c9)


### Checklist 📋

#### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
  - [x] Visually test the changes made on different screen sizes

Author: Pwuts

autogpt_platform/frontend/src/components/library/library-agent-card.tsx

@@ -64,15 +64,18 @@ export default function LibraryAgentCard({
 
       <div className="flex w-full flex-1 flex-col px-4 py-4">
         <Link href={`/library/agents/${id}`}>
-          <h3 className="mb-2 font-poppins text-2xl font-semibold leading-tight text-[#272727] dark:text-neutral-100">
+          <h3 className="mb-2 line-clamp-2 font-poppins text-2xl font-semibold leading-tight text-[#272727] dark:text-neutral-100">
             {name}
           </h3>
 
-          <p className="mb-4 flex-1 text-sm text-gray-600 dark:text-gray-400">
+          <p className="line-clamp-3 flex-1 text-sm text-gray-600 dark:text-gray-400">
             {description}
           </p>
         </Link>
 
+        <div className="flex-grow" />
+        {/* Spacer */}
+
         <div className="items-between mt-4 flex w-full justify-between gap-3">
           <Link
             href={`/library/agents/${id}`}

autogpt_platform/frontend/src/components/library/library-agent-list.tsx

@@ -78,7 +78,7 @@ export default function LibraryAgentList(): React.ReactNode {
         </div>
       ) : (
         <>
-          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-4">
+          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
             {agents.map((agent) => (
               <LibraryAgentCard key={agent.id} agent={agent} />
             ))}