github/sim
1
0
Fork 0
mirror of https://github.com/simstudioai/sim.git synced 2026-01-06 21:54:01 -05:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Waleed
2025-12-29 11:11:00 -08:00
committed by GitHub
parent 88065088bf
commit da1f668272
2 changed files with 26 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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

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

@@ -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}