From 449617d2719402ccd7c3dbb4c7509ea03aea69af Mon Sep 17 00:00:00 2001
From: Salman <salmanhammed77@gmail.com>
Date: Wed, 28 Feb 2024 14:38:13 +0530
Subject: [PATCH] fix: truncate too long proj or org name

---
 .../src/components/navigation/NavHeader.tsx     |  8 +++++---
 frontend/src/layouts/AppLayout/AppLayout.tsx    | 17 +++++++++++------
 frontend/src/pages/org/[id]/overview/index.tsx  |  2 +-
 .../OrgDeleteSection/OrgDeleteSection.tsx       |  2 +-
 4 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/navigation/NavHeader.tsx b/frontend/src/components/navigation/NavHeader.tsx
index 2bf596915..92a6875a6 100644
--- a/frontend/src/components/navigation/NavHeader.tsx
+++ b/frontend/src/components/navigation/NavHeader.tsx
@@ -56,18 +56,20 @@ export default function NavHeader({
 
   return (
     <div className="flex flex-row items-center pt-6">
-      <div className="mr-2 flex h-5 w-5 items-center justify-center rounded-md bg-primary text-sm text-black">
+      <div className="mr-2 flex h-5 w-5 items-center justify-center rounded-md bg-primary text-sm text-black min-w-[1.25rem]">
         {currentOrg?.name?.charAt(0)}
       </div>
       <Link passHref legacyBehavior href={`/org/${currentOrg?.id}/overview`}>
-        <a className="pl-0.5 text-sm font-semibold text-primary/80 hover:text-primary">
+        <a className="truncate pl-0.5 text-sm font-semibold text-primary/80 hover:text-primary">
           {currentOrg?.name}
         </a>
       </Link>
       {isProjectRelated && (
         <>
           <FontAwesomeIcon icon={faAngleRight} className="ml-3 mr-3 text-xs text-gray-400" />
-          <div className="text-sm font-semibold text-bunker-300">{currentWorkspace?.name}</div>
+          <div className="truncate text-sm font-semibold text-bunker-300">
+            {currentWorkspace?.name}
+          </div>
         </>
       )}
       {isOrganizationRelated && (
diff --git a/frontend/src/layouts/AppLayout/AppLayout.tsx b/frontend/src/layouts/AppLayout/AppLayout.tsx
index 8957f6d91..bf1a29da3 100644
--- a/frontend/src/layouts/AppLayout/AppLayout.tsx
+++ b/frontend/src/layouts/AppLayout/AppLayout.tsx
@@ -274,13 +274,16 @@ export const AppLayout = ({ children }: LayoutProps) => {
                       </Link>
                     )}
                     <DropdownMenu>
-                      <DropdownMenuTrigger asChild className="data-[state=open]:bg-mineshaft-600">
+                      <DropdownMenuTrigger
+                        asChild
+                        className="max-w-[160px] data-[state=open]:bg-mineshaft-600"
+                      >
                         <div className="mr-auto flex items-center rounded-md py-1.5 pl-1.5 pr-2 hover:bg-mineshaft-600">
-                          <div className="flex h-5 w-5 items-center justify-center rounded-md bg-primary text-sm">
+                          <div className="flex h-5 w-5 min-w-[20px] items-center justify-center rounded-md bg-primary text-sm">
                             {currentOrg?.name.charAt(0)}
                           </div>
                           <div
-                            className="overflow-hidden text-ellipsis pl-2 text-sm text-mineshaft-100"
+                            className="overflow-hidden truncate text-ellipsis pl-2 text-sm text-mineshaft-100"
                             style={{ maxWidth: "140px" }}
                           >
                             {currentOrg?.name}
@@ -324,7 +327,7 @@ export const AppLayout = ({ children }: LayoutProps) => {
                                   )
                                 }
                               >
-                                <div className="flex w-full items-center justify-between">
+                                <div className="flex w-full max-w-[150px] items-center justify-between truncate">
                                   {org.name}
                                 </div>
                               </Button>
@@ -423,7 +426,7 @@ export const AppLayout = ({ children }: LayoutProps) => {
                       <Select
                         defaultValue={currentWorkspace?.id}
                         value={currentWorkspace?.id}
-                        className="w-full truncate bg-mineshaft-600 py-2.5 font-medium"
+                        className="w-full [&>*:first-child]:truncate bg-mineshaft-600 py-2.5 font-medium"
                         onValueChange={(value) => {
                           router.push(`/project/${value}/secrets/overview`);
                           localStorage.setItem("projectData.id", value);
@@ -438,7 +441,9 @@ export const AppLayout = ({ children }: LayoutProps) => {
                               <SelectItem
                                 key={`ws-layout-list-${id}`}
                                 value={id}
-                                className={`${currentWorkspace?.id === id && "bg-mineshaft-600"}`}
+                                className={`${
+                                  currentWorkspace?.id === id && "bg-mineshaft-600"
+                                } truncate`}
                               >
                                 {name}
                               </SelectItem>
diff --git a/frontend/src/pages/org/[id]/overview/index.tsx b/frontend/src/pages/org/[id]/overview/index.tsx
index 8a703b3dc..d13ae580a 100644
--- a/frontend/src/pages/org/[id]/overview/index.tsx
+++ b/frontend/src/pages/org/[id]/overview/index.tsx
@@ -633,7 +633,7 @@ const OrganizationPage = withPermission(
                   key={workspace.id}
                   className="min-w-72 flex h-40 flex-col justify-between rounded-md border border-mineshaft-600 bg-mineshaft-800 p-4"
                 >
-                  <div className="mt-0 text-lg text-mineshaft-100">{workspace.name}</div>
+                  <div className="mt-0 truncate text-lg text-mineshaft-100">{workspace.name}</div>
                   <div className="mt-0 pb-6 text-sm text-mineshaft-300">
                     {workspace.environments?.length || 0} environments
                   </div>
diff --git a/frontend/src/views/Settings/OrgSettingsPage/components/OrgDeleteSection/OrgDeleteSection.tsx b/frontend/src/views/Settings/OrgSettingsPage/components/OrgDeleteSection/OrgDeleteSection.tsx
index 3b1ac8f63..1e1f9674f 100644
--- a/frontend/src/views/Settings/OrgSettingsPage/components/OrgDeleteSection/OrgDeleteSection.tsx
+++ b/frontend/src/views/Settings/OrgSettingsPage/components/OrgDeleteSection/OrgDeleteSection.tsx
@@ -55,7 +55,7 @@ export const OrgDeleteSection = () => {
         onClick={() => handlePopUpOpen("deleteOrg")}
         isDisabled={Boolean(membership && membership.role !== "admin")}
       >
-        {`Delete ${currentOrg?.name}`}
+        <p className="max-w-[180px] truncate">Delete {currentOrg?.name}</p>
       </Button>
       <DeleteActionModal
         isOpen={popUp.deleteOrg.isOpen}