🤖 fix: increase workspace list item dot padding to pl-8 (#598)

After the workspace sidebar redesign (#590), workspace names are no
longer truncating properly due to insufficient left padding on the
status dot container.

**Changes:**
- Increased left padding on status dot container from no explicit
padding to `pl-8` (2rem)
- Updated error message positioning from `left-7` to `left-8` to
maintain alignment

This restores proper text truncation for long workspace names in the
sidebar.

_Generated with `mux`_

Author: kylecarbs

src/App.stories.tsx

@@ -7,9 +7,9 @@ import type { IPCApi } from "./types/ipc";
 import type { ChatStats } from "./types/chatStats";
 import { DEFAULT_RUNTIME_CONFIG } from "@/constants/workspace";
 
-// Recent timestamp for testing active states (use current time minus small offsets)
-// This ensures workspaces don't show as "Older than 1 day"
-const NOW = Date.now();
+// Stable timestamp for testing active states (use fixed time minus small offsets)
+// This ensures workspaces don't show as "Older than 1 day" and keeps stories deterministic
+const NOW = 1700000000000; // Fixed timestamp: Nov 14, 2023
 const STABLE_TIMESTAMP = NOW - 60000; // 1 minute ago
 
 // Mock window.api for App component
@@ -830,7 +830,7 @@ export const ActiveWorkspaceWithChat: Story = {
                 } else if (wsId === streamingWorkspaceId) {
                   // Streaming workspace - show active work in progress
                   setTimeout(() => {
-                    const now = Date.now();
+                    const now = NOW; // Use stable timestamp
 
                     // Previous completed message with status_set (MUST be sent BEFORE caught-up)
                     callback({
@@ -932,7 +932,7 @@ export const ActiveWorkspaceWithChat: Story = {
                       messageId: "stream-msg-2",
                       delta: ".",
                       tokens: 1,
-                      timestamp: Date.now(),
+                      timestamp: NOW,
                     });
                   }, 2000);
 

src/components/WorkspaceListItem.tsx

@@ -103,7 +103,7 @@ const WorkspaceListItemInner: React.FC<WorkspaceListItemProps> = ({
     <React.Fragment>
       <div
         className={cn(
-          "py-1.5 px-2 cursor-pointer border-l-[3px] border-transparent transition-all duration-150 text-[13px] relative hover:bg-hover [&:hover_button]:opacity-100 flex gap-2",
+          "py-1.5 pl-8 pr-2 cursor-pointer border-l-[3px] border-transparent transition-all duration-150 text-[13px] relative hover:bg-hover [&:hover_button]:opacity-100 flex gap-2",
           isSelected && "bg-hover border-l-blue-400"
         )}
         onClick={() =>
@@ -139,12 +139,12 @@ const WorkspaceListItemInner: React.FC<WorkspaceListItemProps> = ({
             onClick={handleToggleUnread}
           />
         </div>
-        <div className="flex flex-1 flex-col gap-1">
+        <div className="flex min-w-0 flex-1 flex-col gap-1">
           <div className="flex min-w-0 items-center gap-1.5">
             <RuntimeBadge runtimeConfig={metadata.runtimeConfig} />
             {isEditing ? (
               <input
-                className="bg-input-bg text-input-text border-input-border font-inherit focus:border-input-border-focus -mx-1 min-w-0 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 -mx-1 min-w-0 flex-1 rounded-sm border px-1 text-left text-[13px] outline-none"
                 value={editingName}
                 onChange={(e) => setEditingName(e.target.value)}
                 onKeyDown={handleRenameKeyDown}
@@ -156,15 +156,17 @@ const WorkspaceListItemInner: React.FC<WorkspaceListItemProps> = ({
               />
             ) : (
               <span
-                className="text-foreground -mx-1 min-w-0 cursor-pointer truncate rounded-sm px-1 text-left text-[14px] transition-colors duration-200 hover:bg-white/5"
+                className="text-foreground -mx-1 min-w-0 flex-1 cursor-pointer rounded-sm px-1 text-left text-[14px] transition-colors duration-200 hover:bg-white/5"
                 onDoubleClick={(e) => {
                   e.stopPropagation();
                   startRenaming();
                 }}
                 title="Double-click to rename"
               >
                 {canInterrupt ? (
-                  <Shimmer colorClass="var(--color-foreground)">{displayName}</Shimmer>
+                  <Shimmer className="h-4 w-full truncate" colorClass="var(--color-foreground)">
+                    {displayName}
+                  </Shimmer>
                 ) : (
                   displayName
                 )}
@@ -196,13 +198,13 @@ const WorkspaceListItemInner: React.FC<WorkspaceListItemProps> = ({
               </TooltipWrapper>
             </div>
           </div>
-          <div>
+          <div className="min-w-0">
             <WorkspaceStatusIndicator workspaceId={workspaceId} />
           </div>
         </div>
       </div>
       {renameError && isEditing && (
-        <div className="bg-error-bg border-error text-error absolute top-full right-8 left-7 z-10 mt-1 rounded-sm border px-2 py-1.5 text-xs">
+        <div className="bg-error-bg border-error text-error absolute top-full right-8 left-8 z-10 mt-1 rounded-sm border px-2 py-1.5 text-xs">
           {renameError}
         </div>
       )}

src/components/WorkspaceStatusIndicator.tsx

@@ -12,19 +12,19 @@ export const WorkspaceStatusIndicator = memo<{ workspaceId: string }>(({ workspa
   }
 
   return (
-    <div className="text-muted flex items-center gap-1.5 text-xs">
+    <div className="text-muted flex min-w-0 items-center gap-1.5 text-xs">
       {agentStatus.emoji && (
         // Emojis do not visually center well, so we offset them
         // slightly with negative margin.
-        <span className="-mt-0.5 text-[10px]">{agentStatus.emoji}</span>
+        <span className="-mt-0.5 shrink-0 text-[10px]">{agentStatus.emoji}</span>
       )}
-      {agentStatus.message}
+      <span className="min-w-0 truncate">{agentStatus.message}</span>
       {agentStatus.url && (
         <TooltipWrapper inline>
           <Button
             variant="ghost"
             size="icon"
-            className="flex h-4 w-4 items-center justify-center [&_svg]:size-3"
+            className="flex h-4 w-4 shrink-0 items-center justify-center [&_svg]:size-3"
           >
             <a href={agentStatus.url} target="_blank" rel="noopener noreferrer">
               <ExternalLinkIcon />