mirror of
https://github.com/coder/coder.git
synced 2026-09-21 20:51:01 +08:00
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:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user