From 22cbf85e964a7bb614203f3f14aa3998d0628e1c Mon Sep 17 00:00:00 2001
From: TJ <tracy@coder.com>
Date: Fri, 29 May 2026 09:24:53 -0700
Subject: [PATCH] fix(site): adjust agents sidebar spacing (#25857)

Fixes minor spacing issues in the agents sidebar.

## Changes

- Reduce gap between New Agent / Search nav items from `gap-1` (0.25rem)
to `gap-[0.15rem]`
- Change Chats header top spacing from `mt-4` (margin-top 1rem) to
`pt-6` (padding-top 1.5rem)
- Remove `pt-5` padding-top from the scroll content groups container
(Today, Yesterday, etc.)
- Add `pr-1` (0.25rem padding-right) to the unread indicator circle

> Generated by Coder Agents on behalf of @tracyjohnsonux
---
 .../components/ChatsSidebar/chats/ChatsPanel.tsx          | 8 ++++----
 .../components/ChatsSidebar/settings/SettingsNavItem.tsx  | 2 +-
 .../components/ChatsSidebar/tree/ChatTreeNode.tsx         | 6 +++---
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/site/src/pages/AgentsPage/components/ChatsSidebar/chats/ChatsPanel.tsx b/site/src/pages/AgentsPage/components/ChatsSidebar/chats/ChatsPanel.tsx
index dca8dfb6d3..bd7482767d 100644
--- a/site/src/pages/AgentsPage/components/ChatsSidebar/chats/ChatsPanel.tsx
+++ b/site/src/pages/AgentsPage/components/ChatsSidebar/chats/ChatsPanel.tsx
@@ -347,7 +347,7 @@ export const ChatsPanel: FC<ChatsPanelProps> = ({
 		>
 			<nav
 				aria-label="Sidebar"
-				className="hidden border-b border-border-default px-2 py-1.5 sm:flex sm:flex-col sm:gap-1"
+				className="hidden border-b border-border-default px-2 py-1.5 sm:flex sm:flex-col sm:gap-0.5"
 			>
 				<div className="flex items-center justify-between mb-2.5 ml-2.5">
 					<div className="flex items-center gap-2">
@@ -413,9 +413,9 @@ export const ChatsPanel: FC<ChatsPanelProps> = ({
 				)}
 			</nav>
 			<div className="relative min-h-0 flex-1 flex flex-col">
-				<div className="mx-2 mt-4 mb-2">
+				<div className="mx-2 pt-6 mb-1.5">
 					<div className="ml-2.5 mr-2 flex h-7 items-center justify-between">
-						<h2 className="m-0 text-sm font-normal leading-6 text-content-primary">
+						<h2 className="m-0 text-sm font-normal leading-6 text-content-secondary">
 							Chats
 						</h2>
 						<div className="flex items-center gap-1">
@@ -446,7 +446,7 @@ export const ChatsPanel: FC<ChatsPanelProps> = ({
 						"sm:[mask-image:none] sm:[-webkit-mask-image:none]",
 					)}
 				>
-					<div className="flex flex-col gap-2 px-2 pb-3 pt-5">
+					<div className="flex flex-col gap-2 px-2 pb-3">
 						{loadError ? (
 							<div className="space-y-3 px-1">
 								<ErrorAlert error={loadError} />
diff --git a/site/src/pages/AgentsPage/components/ChatsSidebar/settings/SettingsNavItem.tsx b/site/src/pages/AgentsPage/components/ChatsSidebar/settings/SettingsNavItem.tsx
index 3282b6596f..97a6fbc856 100644
--- a/site/src/pages/AgentsPage/components/ChatsSidebar/settings/SettingsNavItem.tsx
+++ b/site/src/pages/AgentsPage/components/ChatsSidebar/settings/SettingsNavItem.tsx
@@ -34,7 +34,7 @@ const navItemClassName = (
 	className: string | undefined,
 ) =>
 	cn(
-		"flex w-full items-center gap-2.5 rounded-md border-0 px-2.5 py-2 text-left text-sm cursor-pointer transition-colors no-underline",
+		"flex w-full items-center gap-2.5 rounded-md border-0 px-2.5 py-1.5 text-left text-sm cursor-pointer transition-colors no-underline",
 		active
 			? "bg-surface-quaternary/25 text-content-primary font-medium"
 			: "bg-transparent text-content-secondary hover:bg-surface-tertiary/50 hover:text-content-primary",
diff --git a/site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx b/site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx
index 155058f4c0..aa0a693b40 100644
--- a/site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx
+++ b/site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx
@@ -208,7 +208,7 @@ export const ChatTreeNode: FC<ChatTreeNodeProps> = ({ chat, isChildNode }) => {
 	);
 
 	return (
-		<div className="flex min-w-0 flex-col">
+		<div className="flex min-w-0 flex-col gap-0.5">
 			<ContextMenu>
 				<ContextMenuTrigger asChild>
 					<div
@@ -329,7 +329,7 @@ export const ChatTreeNode: FC<ChatTreeNodeProps> = ({ chat, isChildNode }) => {
 									<span className="flex items-center justify-end text-xs text-content-secondary/50 tabular-nums [@media(hover:hover)]:group-hover:hidden group-has-[[data-state=open]]:hidden">
 										{chat.has_unread && !isActiveChat ? (
 											<span
-												className="size-2 shrink-0 rounded-full bg-content-link"
+												className="size-2 shrink-0 rounded-full bg-content-link pr-1"
 												data-testid={`unread-indicator-${chat.id}`}
 												aria-hidden="true"
 											/>
@@ -374,7 +374,7 @@ export const ChatTreeNode: FC<ChatTreeNodeProps> = ({ chat, isChildNode }) => {
 			</ContextMenu>
 
 			{hasChildren && isExpanded && (
-				<div className="relative ml-4 border-l border-border-default/60 pl-2.5">
+				<div className="relative ml-4 flex flex-col border-l border-border-default/60 pl-2.5">
 					{childIDs.map((childID) => {
 						const childChat = chatById.get(childID);
 						if (!childChat) return null;