fix: truncate too long proj or org name

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 && (

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>

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>

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}