🤖 fix: restore workspace name truncation in sidebar (#942)

The TooltipWrapper component added in cf61afe was missing `min-w-0` in
inline mode, which broke the flex truncation chain. Long workspace names
caused the sidebar to become horizontally scrollable instead of properly
truncating.

**Changes:**
- Added `min-w-0` to TooltipWrapper inline mode to preserve truncation
- Replaced flexbox with CSS Grid (`grid-cols-[auto_1fr_auto]`) for the
workspace row - this guarantees the middle column truncates properly
without complex nested flex chains
- Added `LongWorkspaceNames` story with git status indicators to catch
future truncation regressions
- Default `createdAt` to `Date.now()` in mockFactory to prevent
workspaces from being hidden by age filters in stories

_Generated with `mux`_

Author: ammar-agent

src/browser/components/Tooltip.tsx

@@ -46,7 +46,7 @@ export const TooltipWrapper: React.FC<TooltipWrapperProps> = ({ inline = false,
     <TooltipContext.Provider value={{ isHovered, setIsHovered, triggerRef }}>
       <span
         ref={triggerRef}
-        className={cn("relative", inline ? "inline-flex items-center" : "block")}
+        className={cn("relative", inline ? "inline-flex min-w-0 items-center" : "block")}
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}
       >

src/browser/components/WorkspaceListItem.tsx

@@ -145,11 +145,11 @@ const WorkspaceListItemInner: React.FC<WorkspaceListItemProps> = ({
         data-workspace-id={workspaceId}
       >
         <div className="flex min-w-0 flex-1 flex-col gap-1">
-          <div className="flex min-w-0 items-center gap-1.5">
+          <div className="grid min-w-0 grid-cols-[auto_1fr_auto] items-center gap-1.5">
             <RuntimeBadge runtimeConfig={metadata.runtimeConfig} isWorking={canInterrupt} />
             {isEditing ? (
               <input
-                className="bg-input-bg text-input-text border-input-border font-inherit focus:border-input-border-focus -mx-1 min-w-0 flex-1 rounded-sm border px-1 text-left text-[13px] outline-none"
+                className="bg-input-bg text-input-text border-input-border font-inherit focus:border-input-border-focus min-w-0 rounded-sm border px-1 text-left text-[13px] outline-none"
                 value={editingName}
                 onChange={(e) => setEditingName(e.target.value)}
                 onKeyDown={handleRenameKeyDown}
@@ -163,7 +163,7 @@ const WorkspaceListItemInner: React.FC<WorkspaceListItemProps> = ({
               <TooltipWrapper inline>
                 <span
                   className={cn(
-                    "text-foreground -mx-1 min-w-0 flex-1 truncate rounded-sm px-1 text-left text-[14px] transition-colors duration-200",
+                    "text-foreground block truncate text-left text-[14px] transition-colors duration-200",
                     !isDisabled && "cursor-pointer"
                   )}
                   onDoubleClick={(e) => {
@@ -187,7 +187,7 @@ const WorkspaceListItemInner: React.FC<WorkspaceListItemProps> = ({
               </TooltipWrapper>
             )}
 
-            <div className="ml-auto flex items-center gap-1">
+            <div className="flex items-center gap-1">
               {!isCreating && (
                 <>
                   <GitStatusIndicator
@@ -199,7 +199,7 @@ const WorkspaceListItemInner: React.FC<WorkspaceListItemProps> = ({
 
                   <TooltipWrapper inline>
                     <button
-                      className="text-muted hover:text-foreground col-start-1 flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center border-none bg-transparent p-0 text-base opacity-0 transition-all duration-200 hover:rounded-sm hover:bg-white/10"
+                      className="text-muted hover:text-foreground flex h-5 w-5 cursor-pointer items-center justify-center border-none bg-transparent p-0 text-base opacity-0 transition-all duration-200 hover:rounded-sm hover:bg-white/10"
                       onClick={(e) => {
                         e.stopPropagation();
                         void onRemoveWorkspace(workspaceId, e.currentTarget);

src/browser/stories/App.sidebar.stories.tsx

@@ -141,6 +141,61 @@ export const ManyWorkspaces: AppStory = {
   ),
 };
 
+/** Long workspace names - tests truncation and prevents horizontal scroll regression */
+export const LongWorkspaceNames: AppStory = {
+  render: () => (
+    <AppWithMocks
+      setup={() => {
+        const workspaces = [
+          createWorkspace({
+            id: "ws-short",
+            name: "main",
+            projectName: "my-app",
+          }),
+          createWorkspace({
+            id: "ws-medium",
+            name: "feature/user-authentication",
+            projectName: "my-app",
+          }),
+          createWorkspace({
+            id: "ws-long",
+            name: "feature/implement-oauth2-authentication-with-google-provider",
+            projectName: "my-app",
+          }),
+          createWorkspace({
+            id: "ws-very-long",
+            name: "bugfix/fix-critical-memory-leak-in-websocket-connection-handler-that-causes-oom",
+            projectName: "my-app",
+          }),
+          createSSHWorkspace({
+            id: "ws-ssh-long",
+            name: "deploy/production-kubernetes-cluster-rolling-update-with-zero-downtime",
+            projectName: "my-app",
+            host: "very-long-hostname.internal.company-infrastructure.example.com",
+          }),
+        ];
+
+        // Set up git status to verify GitStatusIndicator remains visible
+        const gitStatus = new Map<string, GitStatusFixture>([
+          ["ws-short", { ahead: 1 }],
+          ["ws-medium", { dirty: 3 }],
+          ["ws-long", { ahead: 2, behind: 1 }],
+          ["ws-very-long", { dirty: 5, ahead: 3 }],
+          ["ws-ssh-long", { behind: 2 }],
+        ]);
+
+        expandProjects(["/home/user/projects/my-app"]);
+
+        return createMockORPCClient({
+          projects: groupWorkspacesByProject(workspaces),
+          workspaces,
+          executeBash: createGitStatusExecutor(gitStatus),
+        });
+      }}
+    />
+  ),
+};
+
 /** All git status indicator variations */
 export const GitStatusVariations: AppStory = {
   render: () => (

src/browser/stories/mockFactory.ts

@@ -58,7 +58,8 @@ export function createWorkspace(
     projectName: opts.projectName,
     namedWorkspacePath: `/home/user/.mux/src/${opts.projectName}/${safeName}`,
     runtimeConfig: opts.runtimeConfig ?? DEFAULT_RUNTIME_CONFIG,
-    createdAt: opts.createdAt,
+    // Default to current time so workspaces aren't filtered as "old" by age-based UI
+    createdAt: opts.createdAt ?? new Date().toISOString(),
   };
 }