improvements: address feedback, improve org members table overflow handling, fix user details email/username overflow

frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersSection.tsx

@@ -266,17 +266,23 @@ export const OrgMembersSection = () => {
           <div className="mt-4 text-sm text-mineshaft-400">
             The following members will be removed:
           </div>
-          <div className="mt-2 max-h-[20rem] overflow-y-auto rounded border border-red/40 bg-red/10 p-4 text-sm text-red-200">
+          <div className="mt-2 max-h-[20rem] overflow-y-auto rounded border border-mineshaft-600 bg-red/10 p-4 pl-8 text-sm text-red-200">
-            <ul className="ml-4 list-disc">
+            <ul className="list-disc">
               {(popUp.removeMembers.data?.selectedOrgMemberships as OrgUser[])?.map((member) => {
                 const email = member.user.email ?? member.user.username ?? member.inviteEmail;
                 return (
-                  <li key={member.id} className="flex items-center">
+                  <li key={member.id}>
-                    <span className={userId === member.user.id ? "line-through" : ""}>
+                    <div className="flex items-center">
-                      {member.user.firstName || member.user.lastName
+                      <p className={userId === member.user.id ? "line-through" : ""}>
-                        ? `${`${member.user.firstName} ${member.user.lastName}`.trim()} (${email})`
+                        {member.user.firstName || member.user.lastName ? (
-                        : email}
+                          <>
-                    </span>
+                            {`${`${member.user.firstName} ${member.user.lastName}`.trim()} `}(
+                            <span className="break-all">{email}</span>)
+                          </>
+                        ) : (
+                          <span className="break-all">{email}</span>
+                        )}{" "}
+                      </p>
                       {userId === member.user.id && (
                         <Tooltip content="You cannot remove yourself from this organization">
                           <div className="inline-block">
@@ -290,6 +296,7 @@ export const OrgMembersSection = () => {
                           </div>
                         </Tooltip>
                       )}
+                    </div>
                   </li>
                 );
               })}

frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersTable.tsx

@@ -10,6 +10,7 @@ import {
   faMagnifyingGlass,
   faSearch,
   faUsers,
+  faUserShield,
   faUserSlash,
   faUserXmark
 } from "@fortawesome/free-solid-svg-icons";
@@ -44,6 +45,7 @@ import {
   Td,
   Th,
   THead,
+  Tooltip,
   Tr
 } from "@app/components/v2";
 import {
@@ -499,15 +501,24 @@ export const OrgMembersTable = ({
                           }}
                         />
                       </Td>
-                      <Td className={isActive ? "" : "text-mineshaft-400"}>
+                      <Td className={twMerge("max-w-0", isActive ? "" : "text-mineshaft-400")}>
+                        <div className="flex items-center">
+                          <p className="truncate">
                             {name ?? <span className="text-mineshaft-400">Not Set</span>}
+                          </p>
                           {u.superAdmin && (
-                          <Badge variant="primary" className="ml-2">
+                            <Badge variant="primary" className="ml-2 w-min whitespace-nowrap">
-                            Server Admin
+                              <span className="hidden xl:inline">Server Admin</span>
+                              <Tooltip content="Server Admin">
+                                <FontAwesomeIcon className="xl:hidden" icon={faUserShield} />
+                              </Tooltip>
                             </Badge>
                           )}
+                        </div>
+                      </Td>
+                      <Td className={twMerge("max-w-0", isActive ? "" : "text-mineshaft-400")}>
+                        <p className="truncate">{username}</p>
                       </Td>
-                      <Td className={isActive ? "" : "text-mineshaft-400"}>{username}</Td>
                       <Td>
                         <OrgPermissionCan
                           I={OrgPermissionActions.Edit}

frontend/src/pages/organization/UserDetailsByIDPage/components/UserDetailsSection.tsx

@@ -120,7 +120,7 @@ export const UserDetailsSection = ({ membershipId, handlePopUpOpen }: Props) =>
         <div className="mb-4">
           <p className="text-sm font-semibold text-mineshaft-300">Username</p>
           <div className="group flex align-top">
-            <p className="text-sm text-mineshaft-300">{membership.user.username}</p>
+            <p className="break-all text-sm text-mineshaft-300">{membership.user.username}</p>
             <div className="opacity-0 transition-opacity duration-300 group-hover:opacity-100">
               <Tooltip content={copyTextUsername}>
                 <IconButton
@@ -141,7 +141,8 @@ export const UserDetailsSection = ({ membershipId, handlePopUpOpen }: Props) =>
         <div className="mb-4">
           <p className="text-sm font-semibold text-mineshaft-300">Email</p>
           <div className="flex items-center">
-            <p className="mr-2 text-sm text-mineshaft-300">{membership.user.email ?? "-"}</p>
+            <p className="mr-2 break-all text-sm text-mineshaft-300">
+              {membership.user.email ?? "-"}{" "}
               <Tooltip
                 content={
                   membership.user.isEmailVerified
@@ -152,8 +153,10 @@ export const UserDetailsSection = ({ membershipId, handlePopUpOpen }: Props) =>
                 <FontAwesomeIcon
                   size="sm"
                   icon={membership.user.isEmailVerified ? faCheckCircle : faCircleXmark}
+                  className={membership.user.isEmailVerified ? "text-green" : "text-red"}
                 />
               </Tooltip>
+            </p>
           </div>
         </div>
         <div className="mb-4">