Merge pull request #2829 from Infisical/minor-ui-fixes

Improvements: Truncate Filterable Select List Options and Fix Null Display of User Last Name

frontend/src/components/v2/Select/components/index.tsx

@@ -36,10 +36,12 @@ export const MultiValueRemove = (props: MultiValueRemoveProps) => {
 export const Option = <T,>({ isSelected, children, ...props }: OptionProps<T>) => {
   return (
     <components.Option isSelected={isSelected} {...props}>
-      {children}
+      <div className="flex items-center">
-      {isSelected && (
+        <p className="truncate">{children}</p>
-        <FontAwesomeIcon className="ml-2 text-primary" icon={faCheckCircle} size="sm" />
+        {isSelected && (
-      )}
+          <FontAwesomeIcon className="ml-2 text-primary" icon={faCheckCircle} size="sm" />
+        )}
+      </div>
     </components.Option>
   );
 };

frontend/src/views/Org/MembersPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersTable.tsx

@@ -296,7 +296,8 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLinks }: Pro
                     status,
                     isActive
                   }) => {
-                    const name = u && u.firstName ? `${u.firstName} ${u.lastName}` : "-";
+                    const name =
+                      u && u.firstName ? `${u.firstName} ${u.lastName ?? ""}`.trim() : "-";
                     const email = u?.email || inviteEmail;
                     const username = u?.username ?? inviteEmail ?? "-";
                     return (

frontend/src/views/Org/UserPage/UserPage.tsx

@@ -123,7 +123,7 @@ export const UserPage = withPermission(
             <div className="mb-4 flex items-center justify-between">
               <p className="text-3xl font-semibold text-white">
                 {membership.user.firstName || membership.user.lastName
-                  ? `${membership.user.firstName} ${membership.user.lastName}`
+                  ? `${membership.user.firstName} ${membership.user.lastName ?? ""}`.trim()
                   : "-"}
               </p>
               {userId !== membership.user.id && (

frontend/src/views/Org/UserPage/components/UserDetailsSection.tsx

@@ -118,7 +118,7 @@ export const UserDetailsSection = ({ membershipId, handlePopUpOpen }: Props) =>
           <p className="text-sm font-semibold text-mineshaft-300">Name</p>
           <p className="text-sm text-mineshaft-300">
             {membership.user.firstName || membership.user.lastName
-              ? `${membership.user.firstName} ${membership.user.lastName}`
+              ? `${membership.user.firstName} ${membership.user.lastName ?? ""}`.trim()
               : "-"}
           </p>
         </div>