From b72e024b2a11500238c7d6c7d8d219ea5e48810b Mon Sep 17 00:00:00 2001
From: kenny lopez <klopez4212@gmail.com>
Date: Fri, 24 Jul 2026 09:49:09 -0700
Subject: [PATCH] fix(desktop): align agent header with card grid

---
 desktop/src/features/agents/ui/AgentsView.tsx       | 13 +++++++++----
 .../src/features/agents/ui/UnifiedAgentsSection.tsx |  4 +++-
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/desktop/src/features/agents/ui/AgentsView.tsx b/desktop/src/features/agents/ui/AgentsView.tsx
index 41aaad892..def2bedc0 100644
--- a/desktop/src/features/agents/ui/AgentsView.tsx
+++ b/desktop/src/features/agents/ui/AgentsView.tsx
@@ -21,7 +21,10 @@ import { SecretRevealDialog } from "./SecretRevealDialog";
 import { TeamDeleteDialog } from "./TeamDeleteDialog";
 import { TeamDialog } from "./TeamDialog";
 import { TeamsSection } from "./TeamsSection";
-import { UnifiedAgentsSection } from "./UnifiedAgentsSection";
+import {
+  AGENT_CARD_GRID_COLUMNS_CLASS,
+  UnifiedAgentsSection,
+} from "./UnifiedAgentsSection";
 import { useManagedAgentActions } from "./useManagedAgentActions";
 import { usePersonaActions } from "./usePersonaActions";
 import { useTeamActions } from "./useTeamActions";
@@ -110,8 +113,11 @@ export function AgentsView() {
   return (
     <>
       <div className="flex-1 overflow-y-auto overflow-x-hidden overscroll-contain px-4 py-7 sm:px-6 sm:py-8">
-        <div className="mx-auto flex w-full max-w-6xl flex-col gap-8">
+        <div
+          className={`mx-auto grid w-full max-w-6xl ${AGENT_CARD_GRID_COLUMNS_CLASS} justify-start gap-x-3 gap-y-8`}
+        >
           <PageHeader
+            className="col-[1/-1]"
             action={
               <div className="flex flex-wrap justify-end gap-2">
                 <Button
@@ -141,11 +147,10 @@ export function AgentsView() {
                 ) : null}
               </div>
             }
-            className="mx-auto w-full max-w-[996px]"
             description="Set up and manage your agents."
             title="Agents"
           />
-          <div className="flex flex-col gap-8">
+          <div className="col-[1/-1] flex flex-col gap-8">
             <UnifiedAgentsSection
               defaultModel={inheritedDefaults.model.value}
               actionErrorMessage={agents.actionErrorMessage}
diff --git a/desktop/src/features/agents/ui/UnifiedAgentsSection.tsx b/desktop/src/features/agents/ui/UnifiedAgentsSection.tsx
index 6c36a81ed..006d3ed6c 100644
--- a/desktop/src/features/agents/ui/UnifiedAgentsSection.tsx
+++ b/desktop/src/features/agents/ui/UnifiedAgentsSection.tsx
@@ -60,7 +60,9 @@ type UnifiedAgentsSectionProps = {
 };
 
 const AGENT_CARD_COLUMN_CLASS = "w-full";
-const AGENT_CARD_GRID_CLASS = `${AGENT_CARD_COLUMN_CLASS} mx-auto grid max-w-[996px] grid-cols-[repeat(auto-fill,minmax(220px,240px))] justify-center gap-3`;
+export const AGENT_CARD_GRID_COLUMNS_CLASS =
+  "grid-cols-[repeat(auto-fill,minmax(220px,240px))]";
+const AGENT_CARD_GRID_CLASS = `${AGENT_CARD_COLUMN_CLASS} ${AGENT_CARD_GRID_COLUMNS_CLASS} grid justify-start gap-3`;
 
 export function UnifiedAgentsSection(props: UnifiedAgentsSectionProps) {
   const {