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
This commit is contained in:
TJ
2026-05-29 09:24:53 -07:00
committed by GitHub
parent 011914bb14
commit 22cbf85e96
3 changed files with 8 additions and 8 deletions
@@ -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} />
@@ -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",
@@ -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;