From cbdb1c4a079fcd19f03750dc3379f3e1aaaeb772 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Thu, 22 Aug 2024 01:04:18 +0800
Subject: [PATCH] fix: fix a style issue which workspace switch style broken
 with long name

---
 src/client/components/WorkspaceSwitcher.tsx | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/client/components/WorkspaceSwitcher.tsx b/src/client/components/WorkspaceSwitcher.tsx
index fd713d2..2560a62 100644
--- a/src/client/components/WorkspaceSwitcher.tsx
+++ b/src/client/components/WorkspaceSwitcher.tsx
@@ -102,9 +102,8 @@ export const WorkspaceSwitcher: React.FC<WorkspaceSwitcherProps> = React.memo(
               role="combobox"
               aria-expanded={open}
               className={cn(
-                'w-full justify-between',
-                props.isCollapsed &&
-                  'flex h-9 w-9 items-center justify-center p-0'
+                'flex w-full justify-between',
+                props.isCollapsed && 'h-9 w-9 items-center justify-center p-0'
               )}
             >
               <Avatar
@@ -120,7 +119,12 @@ export const WorkspaceSwitcher: React.FC<WorkspaceSwitcherProps> = React.memo(
                 </AvatarFallback>
               </Avatar>
 
-              <span className={cn(props.isCollapsed && 'hidden')}>
+              <span
+                className={cn(
+                  'flex-1 overflow-hidden text-ellipsis',
+                  props.isCollapsed && 'hidden'
+                )}
+              >
                 {currentWorkspace.name}
               </span>
 
@@ -156,7 +160,12 @@ export const WorkspaceSwitcher: React.FC<WorkspaceSwitcherProps> = React.memo(
                         </AvatarFallback>
                       </Avatar>
 
-                      {workspace.name}
+                      <span
+                        className="overflow-hidden text-ellipsis"
+                        title={workspace.name}
+                      >
+                        {workspace.name}
+                      </span>
 
                       <CheckIcon
                         className={cn(