fix(desktop): align agent header with card grid

This commit is contained in:
kenny lopez
2026-07-24 09:49:09 -07:00
parent e2abf33325
commit b72e024b2a
2 changed files with 12 additions and 5 deletions
@@ -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}
@@ -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 {