From 958ab818b8855fd1fda8cc23d7efe5a80b7a7551 Mon Sep 17 00:00:00 2001
From: Brooklyn Nicholson <brooklyn.bb.nicholson@gmail.com>
Date: Thu, 30 Jul 2026 01:19:31 -0500
Subject: [PATCH] fix(desktop): sidebar labels truncate instead of pushing
 header icons out

Flex containers around section/lane labels kept their default min-width:auto,
so a long project title refused to shrink at narrow sidebar widths and shoved
the trailing action icons (caret, +, kebab, branch) past the edge. Give every
header label min-w-0 so its truncate can engage, pin shrink-0 on the caret at
the primitive level and on SidebarSectionMeta, and clip LaneLabel's pinned
tail inside the label. Icons now stay visible at any width.
---
 apps/desktop/src/app/chat/sidebar/chrome.tsx                | 2 +-
 apps/desktop/src/app/chat/sidebar/cron-jobs-section.tsx     | 2 +-
 .../src/app/chat/sidebar/projects/workspace-header.tsx      | 4 +++-
 apps/desktop/src/app/chat/sidebar/sessions-section.tsx      | 6 ++++--
 apps/desktop/src/app/settings/keybind-settings.tsx          | 6 ++++--
 apps/desktop/src/components/ui/disclosure-caret.tsx         | 2 +-
 6 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/apps/desktop/src/app/chat/sidebar/chrome.tsx b/apps/desktop/src/app/chat/sidebar/chrome.tsx
index 196c71768a9..8e2da487829 100644
--- a/apps/desktop/src/app/chat/sidebar/chrome.tsx
+++ b/apps/desktop/src/app/chat/sidebar/chrome.tsx
@@ -10,7 +10,7 @@ import { cn } from '@/lib/utils'
 
 /** The muted slot beside a section label (loading glyph, status hint). */
 export function SidebarSectionMeta({ children }: { children: React.ReactNode }) {
-  return <span className="text-[0.6875rem] font-medium text-(--ui-text-quaternary)">{children}</span>
+  return <span className="shrink-0 text-[0.6875rem] font-medium text-(--ui-text-quaternary)">{children}</span>
 }
 
 // ── Row geometry (session row is canonical — everything composes these) ─────
diff --git a/apps/desktop/src/app/chat/sidebar/cron-jobs-section.tsx b/apps/desktop/src/app/chat/sidebar/cron-jobs-section.tsx
index 21c43cd6c7c..dd6988ce916 100644
--- a/apps/desktop/src/app/chat/sidebar/cron-jobs-section.tsx
+++ b/apps/desktop/src/app/chat/sidebar/cron-jobs-section.tsx
@@ -135,7 +135,7 @@ export function SidebarCronJobsSection({
     <SidebarGroup className="shrink-0 p-0 pb-1">
       <div className="group/section flex shrink-0 items-center justify-between pb-1 pt-1.5">
         <button
-          className="group/section-label flex w-fit items-center gap-1 bg-transparent text-left leading-none"
+          className="group/section-label flex w-fit min-w-0 items-center gap-1 bg-transparent text-left leading-none"
           onClick={onToggle}
           type="button"
         >
diff --git a/apps/desktop/src/app/chat/sidebar/projects/workspace-header.tsx b/apps/desktop/src/app/chat/sidebar/projects/workspace-header.tsx
index 1b7c0bc61c2..5144919c9f3 100644
--- a/apps/desktop/src/app/chat/sidebar/projects/workspace-header.tsx
+++ b/apps/desktop/src/app/chat/sidebar/projects/workspace-header.tsx
@@ -24,7 +24,9 @@ function LaneLabel({ label, title }: { label: string; title?: string }) {
   const tail = label.slice(label.length - tailLen)
 
   return (
-    <span className="flex min-w-0" title={title}>
+    // overflow-hidden: the pinned tail is shrink-0, so at extreme narrow widths
+    // it must clip inside the label rather than push the trailing icons out.
+    <span className="flex min-w-0 overflow-hidden" title={title}>
       <span className="truncate">{head}</span>
       <span className="shrink-0 whitespace-pre">{tail}</span>
     </span>
diff --git a/apps/desktop/src/app/chat/sidebar/sessions-section.tsx b/apps/desktop/src/app/chat/sidebar/sessions-section.tsx
index 8cd060bb02a..35174a8370e 100644
--- a/apps/desktop/src/app/chat/sidebar/sessions-section.tsx
+++ b/apps/desktop/src/app/chat/sidebar/sessions-section.tsx
@@ -64,7 +64,9 @@ function SidebarSectionHeader({
     <div className="group/section flex shrink-0 items-center justify-between gap-1 pb-1 pt-1.5">
       {collapsible ? (
         <button
-          className="group/section-label flex w-fit items-center gap-1 bg-transparent text-left leading-none"
+          // min-w-0 lets the label truncate at narrow sidebar widths instead of
+          // pushing the header's trailing action icons out of view.
+          className="group/section-label flex w-fit min-w-0 items-center gap-1 bg-transparent text-left leading-none"
           onClick={onToggle}
           type="button"
         >
@@ -75,7 +77,7 @@ function SidebarSectionHeader({
           />
         </button>
       ) : (
-        <div className="flex w-fit items-center gap-1 leading-none">{labelBody}</div>
+        <div className="flex w-fit min-w-0 items-center gap-1 leading-none">{labelBody}</div>
       )}
       {action}
     </div>
diff --git a/apps/desktop/src/app/settings/keybind-settings.tsx b/apps/desktop/src/app/settings/keybind-settings.tsx
index 0e6b69ee36a..a974de48882 100644
--- a/apps/desktop/src/app/settings/keybind-settings.tsx
+++ b/apps/desktop/src/app/settings/keybind-settings.tsx
@@ -173,11 +173,13 @@ export function KeybindSettings() {
 function CategoryHeader({ label, onToggle, open }: { label: string; onToggle: () => void; open: boolean }) {
   return (
     <button
-      className="group/kbd-cat flex w-fit items-center gap-1 px-2.5 pb-1 pt-3 text-left leading-none"
+      className="group/kbd-cat flex w-fit min-w-0 items-center gap-1 px-2.5 pb-1 pt-3 text-left leading-none"
       onClick={onToggle}
       type="button"
     >
-      <span className="text-[0.64rem] font-semibold uppercase tracking-[0.12em] text-muted-foreground/70">{label}</span>
+      <span className="min-w-0 truncate text-[0.64rem] font-semibold uppercase tracking-[0.12em] text-muted-foreground/70">
+        {label}
+      </span>
       <DisclosureCaret
         className="text-(--ui-text-tertiary) opacity-0 transition group-hover/kbd-cat:opacity-100"
         open={open}
diff --git a/apps/desktop/src/components/ui/disclosure-caret.tsx b/apps/desktop/src/components/ui/disclosure-caret.tsx
index 850ba469190..24ac1e3ab29 100644
--- a/apps/desktop/src/components/ui/disclosure-caret.tsx
+++ b/apps/desktop/src/components/ui/disclosure-caret.tsx
@@ -11,7 +11,7 @@ interface DisclosureCaretProps extends Omit<CodiconProps, 'name'> {
 export function DisclosureCaret({ className, open, size = '0.75rem', ...props }: DisclosureCaretProps) {
   return (
     <Codicon
-      className={cn('transition-transform duration-150', open && 'rotate-90', className)}
+      className={cn('shrink-0 transition-transform duration-150', open && 'rotate-90', className)}
       name="chevron-right"
       size={size}
       {...props}