🤖 fix: sidebar layout — tighter indentation, always-visible actions, aligned status dots (#3124)

## Summary

Overhauls the left sidebar layout to maximize horizontal real estate:
actions always stay visible, group labels (A/B/C for best-of-n, variant
names) never truncate, and status dots align directly with project
folder icons — eliminating the vertical connector line.

## Background

Three issues with the sidebar at narrow widths:

1. Action buttons (kebab menu, + button) got clipped by
`overflow-hidden` and Radix's `display: table` inner wrapper
2. Variant/best-of-n indicators truncated away since they were part of
the title text
3. Excessive left indentation wasted space, especially at deeper nesting
levels

## Implementation

**Radix ScrollArea fix** — The root cause of button clipping was Radix
ScrollArea's internal `<div style="display: table; min-width: 100%">`
wrapper. Table auto-layout sizes to max-content (full untruncated title
width), expanding beyond the viewport. Combined with 4 layers of
`overflow-hidden`, right-aligned buttons got pushed past the clip
boundary. Fixed with a global CSS override:
`[data-radix-scroll-area-viewport] > div { display: block !important;
min-width: 0 !important; }`.

**Status dot ↔ project icon alignment** — Removed the vertical connector
line between project headers and workspace lists. Adjusted
`getItemPaddingLeft` base from 4→10px so the status dot center (10px +
8px/2 = 18px) aligns with the project folder icon center (pl-2 8px +
h-5/2 10px = 18px). Dropped workspace row margins from `ml-4`/`ml-5.5`
to `ml-0`/`ml-2`.

**Group labels as badges** — Split the variant/best-of label out of the
truncated title string into a separate `shrink-0` span. Best-of-n
candidates now get alphabetical labels (A, B, C…) derived from their
index.

## Risks

Low — all changes are CSS/layout. The Radix `display: table` override is
the broadest change, but ScrollArea is only used in ProjectSidebar so
impact is contained. Sub-agent connector lines (SVG elbows, trunk
segments) are untouched and still use absolute positioning relative to
`paddingLeft`.

---

_Generated with `mux` • Model: `anthropic:claude-opus-4-6` • Thinking:
`xhigh` • Cost: `$13.11`_

<!-- mux-attribution: model=anthropic:claude-opus-4-6 thinking=xhigh
costs=13.11 -->

Author: ammar-agent

src/browser/components/AgentListItem/AgentListItem.tsx

@@ -125,10 +125,12 @@ const HIDE_INLINE_ACTIONS_ON_MOBILE_TOUCH =
 const SHOW_INLINE_ACTIONS_ON_WIDE_TOUCH =
   "[@media(min-width:769px)_and_(hover:none)_and_(pointer:coarse)]:opacity-100";
 
-/** Calculate left padding based on nesting depth */
+/** Calculate left padding based on nesting depth.
+ *  Base 10px places the status dot center at 18px — aligned with the project
+ *  folder icon center (pl-2 8px + half of h-5 w-5 button 10px = 18px). */
 function getItemPaddingLeft(depth?: number): number {
   const safeDepth = typeof depth === "number" && Number.isFinite(depth) ? Math.max(0, depth) : 0;
-  return 8 + Math.min(32, safeDepth) * 12;
+  return 10 + Math.min(32, safeDepth) * 8;
 }
 
 function getSubAgentConnectorLeft(
@@ -314,7 +316,7 @@ function DraftAgentListItemInner(props: DraftAgentListItemProps) {
     <div
       className={cn(
         LIST_ITEM_BASE_CLASSES,
-        sectionId != null ? "ml-8" : "ml-6.5",
+        sectionId != null ? "ml-2" : "ml-0",
         "cursor-pointer pl-1 hover:bg-surface-secondary [&:hover_button]:opacity-100",
         isSelected && "bg-surface-secondary"
       )}
@@ -470,11 +472,15 @@ function RegularAgentListItemInner(props: AgentListItemProps) {
 
   // Display title (fallback to name for legacy workspaces without title)
   const workspaceTitle = metadata.title ?? metadata.name;
-  const variantLabel =
-    getTaskGroupKindFromMetadata(metadata.bestOf) === TASK_GROUP_KIND.VARIANTS
-      ? normalizeTaskGroupLabel(metadata.bestOf?.label)
+  // Derive a short group label for grouped task children: explicit label for variants,
+  // alphabetical letter (A, B, C…) for best-of-n candidates.
+  const groupLabel =
+    metadata.bestOf != null
+      ? getTaskGroupKindFromMetadata(metadata.bestOf) === TASK_GROUP_KIND.VARIANTS
+        ? normalizeTaskGroupLabel(metadata.bestOf.label)
+        : String.fromCharCode(65 + (metadata.bestOf.index ?? 0))
       : undefined;
-  const displayTitle = variantLabel ? `${variantLabel} · ${workspaceTitle}` : workspaceTitle;
+  const displayTitle = groupLabel ? `${groupLabel} · ${workspaceTitle}` : workspaceTitle;
   const isEditing = editingWorkspaceId === workspaceId;
 
   const linkSharingEnabled = useLinkSharingEnabled();
@@ -687,7 +693,9 @@ function RegularAgentListItemInner(props: AgentListItemProps) {
         className={cn(
           LIST_ITEM_BASE_CLASSES,
           "group/row",
-          sectionId != null ? "ml-7.5" : "ml-5",
+          // No left margin — status dot aligns with the project folder icon.
+          // Section members get a small indent for visual grouping.
+          sectionId != null ? "ml-2" : "ml-0",
           isDragging && "opacity-50",
           isRemoving && "opacity-70",
           // Keep hover styles enabled for initializing workspaces so the row feels interactive.
@@ -1014,6 +1022,11 @@ function RegularAgentListItemInner(props: AgentListItemProps) {
               />
             ) : (
               <div className="flex min-w-0 items-center gap-1">
+                {/* Group label (variant name or A/B/C letter) rendered as a non-shrinkable
+                    badge so it stays visible even when the sidebar is narrow. */}
+                {groupLabel && (
+                  <span className="text-muted shrink-0 text-[12px] leading-6">{groupLabel}</span>
+                )}
                 <span
                   className={cn(
                     "min-w-0 flex-1 truncate text-left text-[14px] leading-6 transition-colors duration-200",
@@ -1022,7 +1035,7 @@ function RegularAgentListItemInner(props: AgentListItemProps) {
                     titleColorClass
                   )}
                 >
-                  {displayTitle}
+                  {workspaceTitle}
                 </span>
               </div>
             )}

src/browser/components/ProjectSidebar/ProjectSidebar.tsx

@@ -1941,8 +1941,7 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                             data-project-path={projectPath}
                             className="text-secondary hover:bg-hover hover:border-border-light mr-1.5 flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center rounded border border-transparent bg-transparent p-0 transition-all duration-200"
                           >
-                            {/* Mobile: nudge folder icon left so it visually centers above connector line. */}
-                            <span className="relative flex h-4 w-4 -translate-x-2 items-center justify-center md:translate-x-0">
+                            <span className="relative flex h-4 w-4 items-center justify-center">
                               <ChevronRight
                                 className="absolute inset-0 h-4 w-4 opacity-0 transition-[opacity,transform] duration-200 group-hover:opacity-100"
                                 style={{
@@ -1967,7 +1966,7 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                             </span>
                           </button>
                           <div
-                            className="flex min-w-0 flex-1 items-center pr-2"
+                            className="flex min-w-0 flex-1 items-center pr-1"
                             onContextMenu={(event) => handleOpenProjectMenu(event, projectPath)}
                           >
                             <Tooltip>
@@ -2081,15 +2080,9 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                             aria-label={`Workspaces for ${projectName}`}
                             className="relative pt-1"
                           >
-                            <div
-                              aria-hidden="true"
-                              className="bg-border pointer-events-none absolute top-1 bottom-0 left-4.5 w-px"
-                              style={
-                                projectFolderColor
-                                  ? { backgroundColor: projectFolderColor }
-                                  : undefined
-                              }
-                            />
+                            {/* Vertical connector line removed — workspace status dots now
+                                align directly with the project folder icon, so the tree
+                                connector is no longer needed. */}
                             {(() => {
                               // Archived workspaces are excluded from workspaceMetadata so won't appear here
 

src/browser/components/ProjectSidebar/TaskGroupListItem.tsx

@@ -25,7 +25,7 @@ interface TaskGroupListItemProps {
 }
 
 function getItemPaddingLeft(depth: number): number {
-  return 12 + Math.min(32, Math.max(0, depth)) * 12;
+  return 10 + Math.min(32, Math.max(0, depth)) * 8;
 }
 
 export function TaskGroupListItem(props: TaskGroupListItemProps) {
@@ -56,7 +56,7 @@ export function TaskGroupListItem(props: TaskGroupListItemProps) {
       data-testid={`task-group-${props.groupId}`}
       className={cn(
         "bg-surface-primary relative flex items-start gap-1.5 rounded-l-sm py-2 pr-2 pl-1 select-none transition-all duration-150 hover:bg-surface-secondary",
-        props.sectionId != null ? "ml-7.5" : "ml-5",
+        props.sectionId != null ? "ml-2" : "ml-0",
         props.isSelected && "bg-surface-secondary"
       )}
       style={{ paddingLeft }}
@@ -72,7 +72,7 @@ export function TaskGroupListItem(props: TaskGroupListItemProps) {
     >
       <span
         aria-hidden="true"
-        className="text-muted mt-0.5 -ml-4 inline-flex h-4 w-4 shrink-0 items-center justify-center"
+        className="text-muted mt-0.5 -ml-2.5 inline-flex h-4 w-4 shrink-0 items-center justify-center"
       >
         <ChevronRight
           className="h-3 w-3 transition-transform duration-150"

src/browser/components/SectionHeader/SectionHeader.tsx

@@ -107,7 +107,7 @@ export const SectionHeader: React.FC<SectionHeaderProps> = ({
 
   return (
     <div
-      className="group relative ml-4 flex items-center gap-1 py-1.5 pr-1 pl-3 select-none"
+      className="group relative ml-0 flex items-center gap-1 py-1.5 pr-1 pl-2.5 select-none"
       data-section-id={section.id}
     >
       {/* Expand/Collapse Button */}
@@ -180,8 +180,9 @@ export const SectionHeader: React.FC<SectionHeaderProps> = ({
         </button>
       )}
 
-      {/* Right-side controls: add chat + section actions */}
-      <div className="flex items-center opacity-0 transition-opacity group-hover:opacity-100 [@media(hover:none)_and_(pointer:coarse)]:opacity-100">
+      {/* Right-side controls: add chat + section actions. shrink-0 prevents flex
+          compression from squeezing buttons out of the visible area at narrow widths. */}
+      <div className="flex shrink-0 items-center opacity-0 transition-opacity group-hover:opacity-100 [@media(hover:none)_and_(pointer:coarse)]:opacity-100">
         {/* Add Chat — always visible on touch devices */}
         <Tooltip>
           <TooltipTrigger asChild>

src/browser/styles/globals.css

@@ -2193,6 +2193,16 @@ input[type="checkbox"] {
   }
 }
 
+/* Radix ScrollArea wraps viewport children in a `display: table; min-width: 100%`
+   div that lets content expand beyond the viewport width (table auto-layout sizes
+   to max-content). This pushes right-aligned elements (action buttons, badges) past
+   the overflow-hidden clip boundary. Force block layout so children respect the
+   viewport width constraint and flex rows truncate properly. */
+[data-radix-scroll-area-viewport] > div {
+  display: block !important;
+  min-width: 0 !important;
+}
+
 .subagent-connector-active {
   /* Remove solid background; dashes rendered by ::before pseudo-element */
   background: none !important;