From fbb045436cb301e5bfbcaa6d7d5937e237f4d6c0 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Tue, 31 Jan 2023 19:51:33 +0530
Subject: [PATCH] fix: text ellipsis fix (#217)

Co-authored-by: Anmol Singh Bhatia <anmolsinghbhatia1001@gmail.com>
---
 apps/app/components/project/card.tsx          | 2 +-
 apps/app/components/project/sidebar-list.tsx  | 4 +++-
 apps/app/components/sidebar/projects-list.tsx | 6 ++++--
 apps/app/pages/[workspaceSlug]/index.tsx      | 4 +++-
 apps/app/pages/onboarding/index.tsx           | 2 +-
 5 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/apps/app/components/project/card.tsx b/apps/app/components/project/card.tsx
index dd6d96e32..0ddaf1cd7 100644
--- a/apps/app/components/project/card.tsx
+++ b/apps/app/components/project/card.tsx
@@ -52,7 +52,7 @@ export const ProjectCard: React.FC<ProjectCardProps> = (props) => {
                 {project.icon && (
                   <span className="text-base">{String.fromCodePoint(parseInt(project.icon))}</span>
                 )}
-                <span className="w-3/4 max-w-[225px] md:max-w-[140px] xl:max-w-[225px] text-ellipsis overflow-hidden">
+                <span className=" max-w-[225px] w-[125px] xl:max-w-[225px] text-ellipsis overflow-hidden">
                   {project.name}
                 </span>
                 <span className="text-xs text-gray-500 ">{project.identifier}</span>
diff --git a/apps/app/components/project/sidebar-list.tsx b/apps/app/components/project/sidebar-list.tsx
index 17fbb84c8..e5ff937f4 100644
--- a/apps/app/components/project/sidebar-list.tsx
+++ b/apps/app/components/project/sidebar-list.tsx
@@ -99,7 +99,9 @@ export const ProjectSidebarList: FC = () => {
 
                           {!sidebarCollapse && (
                             <span className="flex w-full items-center justify-between">
-                              {project?.name}
+                              <span className="w-[125px] text-ellipsis overflow-hidden">
+                                {project?.name}
+                              </span>
                               <span>
                                 <ChevronDownIcon
                                   className={`h-4 w-4 duration-300 ${open ? "rotate-180" : ""}`}
diff --git a/apps/app/components/sidebar/projects-list.tsx b/apps/app/components/sidebar/projects-list.tsx
index f98cbff70..11a0b8fd5 100644
--- a/apps/app/components/sidebar/projects-list.tsx
+++ b/apps/app/components/sidebar/projects-list.tsx
@@ -79,8 +79,10 @@ const ProjectsList: React.FC<Props> = ({ navigation, sidebarCollapse }) => {
                           )}
 
                           {!sidebarCollapse && (
-                            <span className="flex w-full items-center justify-between">
-                              {project?.name}
+                            <span className="flex w-full items-center justify-between ">
+                              <span className="w-[125px] text-ellipsis overflow-hidden">
+                                {project?.name}
+                              </span>
                               <span>
                                 <ChevronDownIcon
                                   className={`h-4 w-4 duration-300 ${open ? "rotate-180" : ""}`}
diff --git a/apps/app/pages/[workspaceSlug]/index.tsx b/apps/app/pages/[workspaceSlug]/index.tsx
index 4ce65369b..83f9ff4dd 100644
--- a/apps/app/pages/[workspaceSlug]/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/index.tsx
@@ -199,7 +199,9 @@ const WorkspacePage: NextPage = () => {
                                 {project?.name.charAt(0)}
                               </span>
                             )}
-                            <h3>{project.name}</h3>
+                            <h3 className="w-[150px] lg:w-[225px] text-ellipsis overflow-hidden">
+                              {project.name}
+                            </h3>
                           </div>
                           <div className="text-gray-400">
                             <ArrowRightIcon className="h-4 w-4" />
diff --git a/apps/app/pages/onboarding/index.tsx b/apps/app/pages/onboarding/index.tsx
index 4702034ca..68d8f70f9 100644
--- a/apps/app/pages/onboarding/index.tsx
+++ b/apps/app/pages/onboarding/index.tsx
@@ -48,7 +48,7 @@ const Onboarding: NextPage = () => {
             )}
           </div>
         ) : (
-          <div className="h-3/5 w-full rounded-lg bg-white px-8 py-10 text-center md:w-1/2">
+          <div className="h-max min-h-[360px] w-full rounded-lg bg-white px-8 py-10 text-center md:w-1/2">
             <div className="h-3/4 w-full">
               {step === 4 ? (
                 <Welcome />