From 1cf9ee8352b761005745e0621e114db6d448b57f Mon Sep 17 00:00:00 2001
From: anmolsinghbhatia <anmolsinghbhatia@caravel.tech>
Date: Wed, 2 Aug 2023 13:47:49 +0530
Subject: [PATCH] style: sidebar project list improvement

---
 apps/app/components/project/sidebar-list.tsx   |  2 +-
 .../project/single-sidebar-project.tsx         | 18 +++++++-----------
 2 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/apps/app/components/project/sidebar-list.tsx b/apps/app/components/project/sidebar-list.tsx
index 5790e7c0bc4..1bb3711fcab 100644
--- a/apps/app/components/project/sidebar-list.tsx
+++ b/apps/app/components/project/sidebar-list.tsx
@@ -130,7 +130,7 @@ export const ProjectSidebarList: FC = () => {
         data={projectToDelete}
         user={user}
       />
-      <div className="h-full overflow-y-auto px-5 space-y-3 pt-3 border-t border-custom-sidebar-border-300">
+      <div className="h-full overflow-y-auto px-4 space-y-3 pt-3 border-t border-custom-sidebar-border-300">
         <DragDropContext onDragEnd={onDragEnd}>
           <Droppable droppableId="favorite-projects">
             {(provided) => (
diff --git a/apps/app/components/project/single-sidebar-project.tsx b/apps/app/components/project/single-sidebar-project.tsx
index ef1b6771e70..8545739f79c 100644
--- a/apps/app/components/project/single-sidebar-project.tsx
+++ b/apps/app/components/project/single-sidebar-project.tsx
@@ -170,17 +170,17 @@ export const SingleSidebarProject: React.FC<Props> = ({
             >
               <Disclosure.Button
                 as="div"
-                className={`flex items-center w-full cursor-pointer select-none text-left text-sm font-medium ${
+                className={`flex items-center flex-grow truncate cursor-pointer select-none text-left text-sm font-medium ${
                   sidebarCollapse ? "justify-center" : `justify-between`
                 }`}
               >
-                <div className="flex items-center gap-x-2">
+                <div className="flex items-center flex-grow w-full truncate gap-x-2">
                   {project.emoji ? (
                     <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
                       {renderEmoji(project.emoji)}
                     </span>
                   ) : project.icon_prop ? (
-                    <div className="h-7 w-7 grid place-items-center">
+                    <div className="h-7 w-7 flex-shrink-0 grid place-items-center">
                       {renderEmoji(project.icon_prop)}
                     </div>
                   ) : (
@@ -190,19 +190,15 @@ export const SingleSidebarProject: React.FC<Props> = ({
                   )}
 
                   {!sidebarCollapse && (
-                    <p
-                      className={`overflow-hidden text-ellipsis ${
-                        open ? "" : "text-custom-sidebar-text-200"
-                      }`}
-                    >
-                      {truncateText(project.name, 15)}
+                    <p className={`truncate ${open ? "" : "text-custom-sidebar-text-200"}`}>
+                      {project.name}
                     </p>
                   )}
                 </div>
                 {!sidebarCollapse && (
                   <ExpandMoreOutlined
                     fontSize="small"
-                    className={`${
+                    className={`flex-shrink-0 ${
                       open ? "rotate-180" : ""
                     } !hidden group-hover:!block text-custom-sidebar-text-200 duration-300`}
                   />
@@ -211,7 +207,7 @@ export const SingleSidebarProject: React.FC<Props> = ({
             </Tooltip>
 
             {!sidebarCollapse && (
-              <CustomMenu className="hidden group-hover:block" ellipsis>
+              <CustomMenu className="hidden group-hover:block flex-shrink-0" ellipsis>
                 {!shortContextMenu && (
                   <CustomMenu.MenuItem onClick={handleDeleteProject}>
                     <span className="flex items-center justify-start gap-2 ">