github/sim
1
0
Fork 0
mirror of https://github.com/simstudioai/sim.git synced 2026-01-09 15:07:55 -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 ( 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 */} {/* 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 */} {/* Workspace Switcher Popover - only render after mount to avoid Radix ID hydration mismatch */}
{isMounted ? ( {isMounted ? (
<Popover <Popover
@@ -278,10 +278,16 @@ export function WorkspaceHeader({
<button <button
type='button' type='button'
aria-label='Switch workspace' 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...'} 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...'} {activeWorkspace?.name || 'Loading...'}
</span> </span>
<ChevronDown <ChevronDown
@@ -421,11 +427,17 @@ export function WorkspaceHeader({
<button <button
type='button' type='button'
aria-label='Switch workspace' 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...'} title={activeWorkspace?.name || 'Loading...'}
disabled 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...'} {activeWorkspace?.name || 'Loading...'}
</span> </span>
<ChevronDown className='h-[8px] w-[12px] flex-shrink-0 text-[var(--text-muted)]' /> <ChevronDown className='h-[8px] w-[12px] flex-shrink-0 text-[var(--text-muted)]' />
@@ -434,10 +446,12 @@ export function WorkspaceHeader({
</div> </div>
{/* Workspace Actions */} {/* Workspace Actions */}
<div className='flex flex-shrink-0 items-center gap-[10px]'> <div className='flex flex-shrink-0 items-center gap-[10px]'>
{/* Invite */} {/* Invite - hidden in collapsed mode */}
<Badge className='cursor-pointer' onClick={() => setIsInviteModalOpen(true)}> {!isCollapsed && (
Invite <Badge className='cursor-pointer' onClick={() => setIsInviteModalOpen(true)}>
</Badge> Invite
</Badge>
)}
{/* Sidebar Collapse Toggle */} {/* Sidebar Collapse Toggle */}
{showCollapseButton && ( {showCollapseButton && (
<Button <Button

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

@@ -437,8 +437,8 @@ export function Sidebar() {
return ( return (
<> <>
{isCollapsed ? ( {isCollapsed ? (
/* Floating collapsed header */ /* Floating collapsed header - minimal pill showing workspace name and expand toggle */
<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]'> <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 <WorkspaceHeader
activeWorkspace={activeWorkspace} activeWorkspace={activeWorkspace}
workspaceId={workspaceId} workspaceId={workspaceId}