From 5eac4afcb08db874f32051a2a927b5919dd8b208 Mon Sep 17 00:00:00 2001
From: Fahleen1 <mishaarif14@gmail.com>
Date: Tue, 17 Feb 2026 14:39:35 +0500
Subject: [PATCH 1/2] fix: adjust AgentCard layout for improved display and
 spacing

---
 client/src/components/Agents/AgentCard.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/client/src/components/Agents/AgentCard.tsx b/client/src/components/Agents/AgentCard.tsx
index 7e9dd6da10..defa4c4b5b 100644
--- a/client/src/components/Agents/AgentCard.tsx
+++ b/client/src/components/Agents/AgentCard.tsx
@@ -47,10 +47,10 @@ const AgentCard: React.FC<AgentCardProps> = ({ agent, onSelect, className = '' }
       <OGDialogTrigger asChild>
         <div
           className={cn(
-            'group relative flex h-32 gap-5 overflow-hidden rounded-xl',
+            'group relative flex h-40 gap-5 overflow-hidden rounded-xl',
             'cursor-pointer select-none px-6 py-4',
             'bg-surface-tertiary transition-colors duration-150 hover:bg-surface-hover',
-            'md:h-36 lg:h-40',
+            'md:min-h-36 lg:min-h-40',
             '[&_*]:cursor-pointer',
             className,
           )}
@@ -70,7 +70,7 @@ const AgentCard: React.FC<AgentCardProps> = ({ agent, onSelect, className = '' }
         >
           {/* Category badge - top right */}
           {categoryLabel && (
-            <span className="absolute right-4 top-3 rounded-md bg-surface-hover px-2 py-0.5 text-xs text-text-secondary">
+            <span className="absolute right-3 top-2 rounded-md bg-surface-hover px-2 py-0.5 text-xs text-text-secondary">
               {categoryLabel}
             </span>
           )}
@@ -85,7 +85,7 @@ const AgentCard: React.FC<AgentCardProps> = ({ agent, onSelect, className = '' }
           {/* Content */}
           <div className="flex min-w-0 flex-1 flex-col justify-center overflow-hidden">
             {/* Agent name */}
-            <Label className="line-clamp-2 text-base font-semibold text-text-primary md:text-lg">
+            <Label className="line-clamp-1 text-base font-semibold text-text-primary md:text-lg mt-3">
               {agent.name}
             </Label>
 
@@ -93,7 +93,7 @@ const AgentCard: React.FC<AgentCardProps> = ({ agent, onSelect, className = '' }
             {agent.description && (
               <p
                 id={`agent-${agent.id}-description`}
-                className="mt-0.5 line-clamp-2 text-sm leading-snug text-text-secondary md:line-clamp-5"
+                className="mt-0.5 line-clamp-2 text-sm leading-snug text-text-secondary md:line-clamp-3"
                 aria-label={localize('com_agents_description_card', {
                   description: agent.description,
                 })}

From 0b732e56d5543395feb0c65fdcbd78922be52be2 Mon Sep 17 00:00:00 2001
From: Fahleen1 <mishaarif14@gmail.com>
Date: Wed, 18 Feb 2026 11:01:06 +0500
Subject: [PATCH 2/2] fix: increase line clamp for agent name in AgentCard for
 better visibility

---
 client/src/components/Agents/AgentCard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/Agents/AgentCard.tsx b/client/src/components/Agents/AgentCard.tsx
index defa4c4b5b..aefae016dc 100644
--- a/client/src/components/Agents/AgentCard.tsx
+++ b/client/src/components/Agents/AgentCard.tsx
@@ -85,7 +85,7 @@ const AgentCard: React.FC<AgentCardProps> = ({ agent, onSelect, className = '' }
           {/* Content */}
           <div className="flex min-w-0 flex-1 flex-col justify-center overflow-hidden">
             {/* Agent name */}
-            <Label className="line-clamp-1 text-base font-semibold text-text-primary md:text-lg mt-3">
+            <Label className="line-clamp-2 mt-3 text-base font-semibold text-text-primary md:text-lg">
               {agent.name}
             </Label>