From e436366df71a6bebaf7651a4dee8ec38590978f0 Mon Sep 17 00:00:00 2001
From: Shaun Andrews <shaun@automattic.com>
Date: Fri, 12 Jun 2026 13:36:30 -0400
Subject: [PATCH] Refine sidebar spacing, alignment, and transitions in the
 agentic UI

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../sidebar-header/style.module.css           | 21 ++++---
 .../src/components/sidebar-layout/index.tsx   |  6 +-
 .../sidebar-layout/style.module.css           |  6 ++
 apps/ui/src/components/site-list/index.tsx    |  6 +-
 .../src/components/site-list/style.module.css | 59 ++++++++-----------
 .../src/components/user-menu/style.module.css | 15 ++++-
 6 files changed, 64 insertions(+), 49 deletions(-)

diff --git a/apps/ui/src/components/sidebar-header/style.module.css b/apps/ui/src/components/sidebar-header/style.module.css
index 4d3c1aee02..4dceb585d6 100644
--- a/apps/ui/src/components/sidebar-header/style.module.css
+++ b/apps/ui/src/components/sidebar-header/style.module.css
@@ -4,8 +4,11 @@
 	gap: var(--wpds-dimension-padding-sm);
 	/* Leave room for macOS traffic lights at {20, 20} plus a visible gap.
 	   min-height is tuned so the flex-centered content lines up with the
-	   vertical center of the traffic lights. */
-	padding: var(--wpds-dimension-padding-sm) var(--wpds-dimension-padding-2xl)
+	   vertical center of the traffic lights. The right padding mirrors the
+	   site rows' trailing inset (list `md` + row `sm`) so the header icon
+	   buttons line up with the rows' status/actions column. */
+	padding: var(--wpds-dimension-padding-sm)
+		calc(var(--wpds-dimension-padding-md) + var(--wpds-dimension-padding-sm))
 		var(--wpds-dimension-padding-sm) 94px;
 	min-height: 46px;
 	-webkit-app-region: drag;
@@ -19,14 +22,12 @@
 
 /* In macOS fullscreen the traffic lights are hidden, so reclaim the
    padding that was reserved for them and align the title with the
-   site list entries below — the site list outer padding is `2xl`, each
+   site list entries below — the site list outer padding is `md`, each
    row carries `xs` of padding-inline, and the site label sits inside a
-   button with another `sm`, so its text starts at `2xl + xs + sm`
-   (= `xl + 2*sm`) from the sidebar edge. */
+   button with another `sm`, so its text starts at `md + xs + sm`
+   (= `2xl`) from the sidebar edge. */
 .fullscreen {
-	padding-left: calc(
-		var(--wpds-dimension-padding-xl) + 2 * var(--wpds-dimension-padding-sm)
-	);
+	padding-left: var(--wpds-dimension-padding-2xl);
 }
 
 .title {
@@ -43,7 +44,9 @@
 .actions {
 	display: flex;
 	align-items: center;
-	gap: var(--wpds-dimension-padding-xs);
+	/* No gap, matching the site rows' action cluster, so the new-site button
+	   also lands on the same column as the rows' new-chat button. */
+	gap: 0;
 	opacity: 0.65;
 }
 
diff --git a/apps/ui/src/components/sidebar-layout/index.tsx b/apps/ui/src/components/sidebar-layout/index.tsx
index 52e8f22c71..40637333df 100644
--- a/apps/ui/src/components/sidebar-layout/index.tsx
+++ b/apps/ui/src/components/sidebar-layout/index.tsx
@@ -30,7 +30,11 @@ export function SidebarLayout( { children }: { children: ReactNode } ) {
 		<SidebarCollapsedContext.Provider value={ collapsed }>
 			<div className={ styles.root }>
 				<aside
-					className={ clsx( styles.sidebar, collapsed && styles.sidebarCollapsed ) }
+					className={ clsx(
+						styles.sidebar,
+						collapsed && styles.sidebarCollapsed,
+						sidebarResize.isResizing && styles.sidebarResizing
+					) }
 					style={ sidebarStyle }
 				>
 					<SidebarHeader onToggleSidebar={ () => setCollapsed( true ) } />
diff --git a/apps/ui/src/components/sidebar-layout/style.module.css b/apps/ui/src/components/sidebar-layout/style.module.css
index 502c18e745..22bf5b9fde 100644
--- a/apps/ui/src/components/sidebar-layout/style.module.css
+++ b/apps/ui/src/components/sidebar-layout/style.module.css
@@ -32,6 +32,12 @@
 	background-color: var(--wpds-color-bg-surface-neutral-weak);
 }
 
+/* The width transition is for collapse/expand only — during a drag-resize it
+   would lag the panel behind the cursor, so it's switched off. */
+.sidebarResizing {
+	transition: none;
+}
+
 .sidebarCollapsed {
 	width: 0;
 	min-width: 0;
diff --git a/apps/ui/src/components/site-list/index.tsx b/apps/ui/src/components/site-list/index.tsx
index 4a720daccc..3613873796 100644
--- a/apps/ui/src/components/site-list/index.tsx
+++ b/apps/ui/src/components/site-list/index.tsx
@@ -563,12 +563,14 @@ function SiteSection( {
 	group,
 	isUnassigned,
 	isActive,
+	isSelected,
 	isOpen,
 	onToggle,
 }: {
 	group: SiteGroup;
 	isUnassigned: boolean;
 	isActive: boolean;
+	isSelected: boolean;
 	isOpen: boolean;
 	onToggle: () => void;
 } ) {
@@ -580,7 +582,8 @@ function SiteSection( {
 			className={ clsx(
 				styles.site,
 				isUnassigned && styles.unassigned,
-				isActive && styles.siteActive
+				isActive && styles.siteActive,
+				isSelected && styles.siteSelected
 			) }
 		>
 			<header className={ styles.siteHeader }>
@@ -708,6 +711,7 @@ export function SiteList() {
 							group={ group }
 							isUnassigned={ group.key === UNASSIGNED_KEY }
 							isActive={ group.key === activeSiteKey }
+							isSelected={ !! group.site && group.site.id === activeSiteId }
 							isOpen={ isOpen( group.key ) }
 							onToggle={ () => toggleSite( group.key ) }
 						/>
diff --git a/apps/ui/src/components/site-list/style.module.css b/apps/ui/src/components/site-list/style.module.css
index eb68082e8d..bbd5cb514e 100644
--- a/apps/ui/src/components/site-list/style.module.css
+++ b/apps/ui/src/components/site-list/style.module.css
@@ -3,13 +3,11 @@
 	--site-list-row-background-hover: rgb(0 0 0 / 4%);
 	--site-list-row-background-active: rgb(0 0 0 / 7%);
 
-	/* Left padding matches the sidebar footer (user-menu) so
-	   the row highlight boxes share the same left edge as the rest of the
-	   sidebar chrome. The right side is smaller: rows carry `sm` of their
-	   own right padding, and `xl + sm` keeps the row icons (site status,
-	   actions) visually aligned with the header's drawer icon. */
-	padding: var(--wpds-dimension-padding-3xl) var(--wpds-dimension-padding-xl)
-		var(--wpds-dimension-padding-xl) var(--wpds-dimension-padding-2xl);
+	/* Tight inline inset so the row highlight boxes stretch close to the
+	   sidebar edges; rows carry `sm` of their own right padding on top of
+	   this. */
+	padding: var(--wpds-dimension-padding-lg) var(--wpds-dimension-padding-md)
+		var(--wpds-dimension-padding-xl) var(--wpds-dimension-padding-md);
 	display: flex;
 	flex-direction: column;
 	gap: var(--wpds-dimension-padding-sm);
@@ -47,12 +45,9 @@
 	transition: background-color 100ms ease;
 }
 
-.siteHeader:hover,
-.siteHeader:focus-within {
-	background-color: var(--site-list-row-background-hover);
-}
-
-.siteActive .siteHeader {
+/* Only a directly selected site (its settings/overview route) highlights the
+   row — a selected chat highlights its own row instead. */
+.siteSelected .siteHeader {
 	background-color: var(--site-list-row-background-active);
 }
 
@@ -74,27 +69,10 @@
 	display: inline-grid;
 	place-items: center;
 	flex-shrink: 0;
-	inline-size: 0;
-	margin-inline-end: 0;
-	opacity: 0;
-	transform: translateX(-4px) scale(0.75);
-	transform-origin: left center;
-	overflow: hidden;
-	transition: inline-size 150ms ease, margin-inline-end 150ms ease, opacity 150ms ease,
-		transform 150ms ease;
-}
-
-.siteActive .siteIconSlot {
 	inline-size: 16px;
-	margin-inline-end: var(--wpds-dimension-padding-xs);
-	opacity: 1;
-	transform: translateX(0) scale(1);
-}
-
-@media (prefers-reduced-motion: reduce) {
-	.siteIconSlot {
-		transition: none;
-	}
+	/* The app's compact density halves the smaller padding steps (`sm` = 4px),
+	   so `md` (8px) is what actually reads as a gap next to the 16px icon. */
+	margin-inline-end: var(--wpds-dimension-padding-md);
 }
 
 .siteName {
@@ -347,8 +325,8 @@
 	margin-bottom: 0;
 	opacity: 0;
 	pointer-events: none;
-	transition: grid-template-rows 160ms ease, margin-top 160ms ease, margin-bottom 160ms ease,
-		opacity 120ms ease;
+	transition: grid-template-rows 100ms ease, margin-top 100ms ease, margin-bottom 100ms ease,
+		opacity 80ms ease;
 }
 
 .sessionListFrameOpen {
@@ -387,13 +365,22 @@
 	width: 100%;
 	box-sizing: border-box;
 	height: var(--site-list-row-height);
+	/* Indent the chat label to the site title's text column: the title sits
+	   behind the header's `xs` padding, the toggle button's `sm` padding, the
+	   16px icon, and the icon's `md` gap. */
 	padding: var(--wpds-dimension-padding-xs) var(--wpds-dimension-padding-sm)
-		var(--wpds-dimension-padding-xs) calc(var(--wpds-dimension-padding-sm) + 24px);
+		var(--wpds-dimension-padding-xs)
+		calc(
+			var(--wpds-dimension-padding-xs) + var(--wpds-dimension-padding-sm) + 16px +
+				var(--wpds-dimension-padding-md)
+		);
 	border-radius: 6px;
 	background-color: var(--session-link-background);
 	color: var(--wpds-color-fg-content-neutral-weak);
 	font-size: var(--wpds-typography-font-size-sm);
 	font-weight: var(--wpds-typography-font-weight-regular);
+	/* Snappier than the Button primitive's 100ms color ease-out. */
+	transition: color 50ms ease;
 }
 
 .sessionLinkRunning {
diff --git a/apps/ui/src/components/user-menu/style.module.css b/apps/ui/src/components/user-menu/style.module.css
index 0d9e51f56d..a710fc93d2 100644
--- a/apps/ui/src/components/user-menu/style.module.css
+++ b/apps/ui/src/components/user-menu/style.module.css
@@ -1,8 +1,16 @@
 /* Pinning to the sidebar bottom is handled by the layout's
    `sidebarFooter` wrapper. */
 .root {
-	padding: var(--wpds-dimension-padding-sm) var(--wpds-dimension-padding-2xl)
-		var(--wpds-dimension-padding-xl) var(--wpds-dimension-padding-2xl);
+	/* Inline padding tracks the site rows' columns: on the right, list `md` +
+	   row `sm` puts the theme toggle on the rows' status/actions column; on
+	   the left, list `md` + row `xs` minus 2px — half the size difference
+	   between the 20px gravatar and the 16px site icon — centers the gravatar
+	   on the site icon column (the trigger button contributes the same `sm`
+	   as the site toggle, so it cancels out). */
+	padding: var(--wpds-dimension-padding-sm)
+		calc(var(--wpds-dimension-padding-md) + var(--wpds-dimension-padding-sm))
+		var(--wpds-dimension-padding-xl)
+		calc(var(--wpds-dimension-padding-md) + var(--wpds-dimension-padding-xs) - 2px);
 }
 
 .row {
@@ -29,6 +37,9 @@
 .userTrigger {
 	flex: 1;
 	font-weight: var(--wpds-typography-font-weight-regular);
+	/* The site icon's `md` gap minus the gravatar's 2px overhang, so the
+	   user name starts on the same text column as site titles and chats. */
+	gap: calc(var(--wpds-dimension-padding-md) - 2px);
 }
 
 .userName {