From ce47b5a899b8ec40976e85d2feb1bee1df648c07 Mon Sep 17 00:00:00 2001
From: Waleed Latif <walif6@gmail.com>
Date: Fri, 7 Aug 2026 20:45:06 -0700
Subject: [PATCH] fix(workspaces): give the pin and options button one shared
 slot
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The pin sat inline before an always-reserved 18px options button, so a pinned
row's name lost ~18px of truncation budget — pinning visibly re-truncated the
name at the moment of the click, and hovering showed pin and options together.

Match the chat rows: one fixed 18px slot with both absolutely positioned, the
pin fading out as the button fades in. The trailing width is now constant, so
pinning cannot reflow the name. The options glyph moves to --text-icon, the
canonical icon token its new sibling already uses.
---
 .../workspace-header/workspace-header.tsx     | 60 +++++++++++--------
 1 file changed, 34 insertions(+), 26 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx
index 7f1e66473c7..82db252aea0 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx
@@ -747,33 +747,41 @@ function WorkspaceHeaderImpl({
                             <span className='min-w-0 flex-1 truncate text-[var(--text-body)] text-sm'>
                               {workspace.name}
                             </span>
-                            {pinnedWorkspaceIds.has(workspace.id) && (
-                              <Pin
-                                aria-hidden={false}
-                                role='img'
-                                aria-label='Pinned'
-                                className='size-[12px] flex-shrink-0 text-[var(--text-icon)]'
-                              />
-                            )}
-                            <button
-                              type='button'
-                              aria-label='Workspace options'
-                              onMouseDown={() => {
-                                isContextMenuOpeningRef.current = true
-                              }}
-                              onClick={(e) => {
-                                e.preventDefault()
-                                e.stopPropagation()
-                                const rect = e.currentTarget.getBoundingClientRect()
-                                openContextMenuAt(workspace, rect.right, rect.top)
-                              }}
-                              className={cn(
-                                'flex size-[18px] flex-shrink-0 items-center justify-center rounded-sm opacity-0 transition-opacity group-hover:opacity-100',
-                                isMenuOpen && 'opacity-100'
+                            {/* Pin and options share one fixed slot, as the chat rows do:
+                                the trailing width never changes, so pinning cannot re-truncate
+                                the name under the user's cursor. */}
+                            <div className='relative flex size-[18px] flex-shrink-0 items-center justify-center'>
+                              {pinnedWorkspaceIds.has(workspace.id) && (
+                                <Pin
+                                  aria-hidden={false}
+                                  role='img'
+                                  aria-label='Pinned'
+                                  className={cn(
+                                    'absolute size-[12px] text-[var(--text-icon)] transition-opacity',
+                                    isMenuOpen ? 'opacity-0' : 'group-hover:opacity-0'
+                                  )}
+                                />
                               )}
-                            >
-                              <MoreHorizontal className='size-[14px] text-[var(--text-tertiary)]' />
-                            </button>
+                              <button
+                                type='button'
+                                aria-label='Workspace options'
+                                onMouseDown={() => {
+                                  isContextMenuOpeningRef.current = true
+                                }}
+                                onClick={(e) => {
+                                  e.preventDefault()
+                                  e.stopPropagation()
+                                  const rect = e.currentTarget.getBoundingClientRect()
+                                  openContextMenuAt(workspace, rect.right, rect.top)
+                                }}
+                                className={cn(
+                                  'absolute inset-0 flex items-center justify-center rounded-sm opacity-0 transition-opacity group-hover:opacity-100',
+                                  isMenuOpen && 'opacity-100'
+                                )}
+                              >
+                                <MoreHorizontal className='size-[14px] text-[var(--text-icon)]' />
+                              </button>
+                            </div>
                           </div>
                         )}
                       </div>