improvement(sidebar): fix workspace name truncation on sidebar preview (#2628)

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx

@@ -259,9 +259,9 @@ export function WorkspaceHeader({
   }
 
   return (
-    <div className='flex min-w-0 items-center justify-between gap-[2px]'>
+    <div className={`flex items-center gap-[8px] ${isCollapsed ? '' : 'min-w-0 justify-between'}`}>
       {/* Workspace Name with Switcher */}
-      <div className='min-w-0 flex-1'>
+      <div className={isCollapsed ? '' : 'min-w-0 flex-1'}>
         {/* Workspace Switcher Popover - only render after mount to avoid Radix ID hydration mismatch */}
         {isMounted ? (
           <Popover
@@ -278,10 +278,16 @@ export function WorkspaceHeader({
               <button
                 type='button'
                 aria-label='Switch workspace'
-                className='-mx-[6px] flex min-w-0 max-w-full cursor-pointer items-center gap-[8px] rounded-[6px] bg-transparent px-[6px] py-[4px] transition-colors hover:bg-[var(--surface-6)] dark:hover:bg-[var(--surface-5)]'
+                className={`flex cursor-pointer items-center gap-[8px] rounded-[6px] bg-transparent px-[6px] py-[4px] transition-colors hover:bg-[var(--surface-6)] dark:hover:bg-[var(--surface-5)] ${
+                  isCollapsed ? '' : '-mx-[6px] min-w-0 max-w-full'
+                }`}
                 title={activeWorkspace?.name || 'Loading...'}
               >
-                <span className='truncate font-base text-[14px] text-[var(--text-primary)]'>
+                <span
+                  className={`font-base text-[14px] text-[var(--text-primary)] ${
+                    isCollapsed ? 'max-w-[120px] truncate' : 'truncate'
+                  }`}
+                >
                   {activeWorkspace?.name || 'Loading...'}
                 </span>
                 <ChevronDown
@@ -421,11 +427,17 @@ export function WorkspaceHeader({
           <button
             type='button'
             aria-label='Switch workspace'
-            className='-mx-[6px] flex min-w-0 max-w-full cursor-pointer items-center gap-[8px] rounded-[6px] bg-transparent px-[6px] py-[4px] transition-colors hover:bg-[var(--surface-6)] dark:hover:bg-[var(--surface-5)]'
+            className={`flex cursor-pointer items-center gap-[8px] rounded-[6px] bg-transparent px-[6px] py-[4px] transition-colors hover:bg-[var(--surface-6)] dark:hover:bg-[var(--surface-5)] ${
+              isCollapsed ? '' : '-mx-[6px] min-w-0 max-w-full'
+            }`}
             title={activeWorkspace?.name || 'Loading...'}
             disabled
           >
-            <span className='truncate font-base text-[14px] text-[var(--text-primary)] dark:text-[var(--white)]'>
+            <span
+              className={`font-base text-[14px] text-[var(--text-primary)] dark:text-[var(--white)] ${
+                isCollapsed ? 'max-w-[120px] truncate' : 'truncate'
+              }`}
+            >
               {activeWorkspace?.name || 'Loading...'}
             </span>
             <ChevronDown className='h-[8px] w-[12px] flex-shrink-0 text-[var(--text-muted)]' />
@@ -434,10 +446,12 @@ export function WorkspaceHeader({
       </div>
       {/* Workspace Actions */}
       <div className='flex flex-shrink-0 items-center gap-[10px]'>
-        {/* Invite */}
-        <Badge className='cursor-pointer' onClick={() => setIsInviteModalOpen(true)}>
-          Invite
-        </Badge>
+        {/* Invite - hidden in collapsed mode */}
+        {!isCollapsed && (
+          <Badge className='cursor-pointer' onClick={() => setIsInviteModalOpen(true)}>
+            Invite
+          </Badge>
+        )}
         {/* Sidebar Collapse Toggle */}
         {showCollapseButton && (
           <Button

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx

@@ -437,8 +437,8 @@ export function Sidebar() {
   return (
     <>
       {isCollapsed ? (
-        /* Floating collapsed header */
-        <div className='fixed top-[14px] left-[10px] z-10 max-w-[232px] rounded-[10px] border border-[var(--border)] bg-[var(--surface-1)] px-[12px] py-[6px]'>
+        /* Floating collapsed header - minimal pill showing workspace name and expand toggle */
+        <div className='fixed top-[14px] left-[10px] z-10 w-fit rounded-[10px] border border-[var(--border)] bg-[var(--surface-1)] px-[10px] py-[6px]'>
           <WorkspaceHeader
             activeWorkspace={activeWorkspace}
             workspaceId={workspaceId}