From f53c39f65b223725c69dae6f85914eb6b8ca50bb Mon Sep 17 00:00:00 2001
From: Scott Wilson <scottraywilson@gmail.com>
Date: Wed, 30 Jul 2025 10:43:10 -0700
Subject: [PATCH] improvements: address feedback, improve org members table
 overflow handling, fix user details email/username overflow

---
 .../OrgMembersSection/OrgMembersSection.tsx   | 49 +++++++++++--------
 .../OrgMembersSection/OrgMembersTable.tsx     | 27 +++++++---
 .../components/UserDetailsSection.tsx         | 31 ++++++------
 3 files changed, 64 insertions(+), 43 deletions(-)

diff --git a/frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersSection.tsx b/frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersSection.tsx
index c01ed1ba9..beaad3292 100644
--- a/frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersSection.tsx
+++ b/frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersSection.tsx
@@ -266,30 +266,37 @@ 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">
-            <ul className="ml-4 list-disc">
+          <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="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">
-                    <span className={userId === member.user.id ? "line-through" : ""}>
-                      {member.user.firstName || member.user.lastName
-                        ? `${`${member.user.firstName} ${member.user.lastName}`.trim()} (${email})`
-                        : email}
-                    </span>
-                    {userId === member.user.id && (
-                      <Tooltip content="You cannot remove yourself from this organization">
-                        <div className="inline-block">
-                          <Badge
-                            variant="danger"
-                            className="ml-1 mt-[0.05rem] inline-flex w-min items-center gap-1.5 whitespace-nowrap"
-                          >
-                            <FontAwesomeIcon icon={faBan} />
-                            <span>Ignored</span>
-                          </Badge>
-                        </div>
-                      </Tooltip>
-                    )}
+                  <li key={member.id}>
+                    <div className="flex items-center">
+                      <p className={userId === member.user.id ? "line-through" : ""}>
+                        {member.user.firstName || member.user.lastName ? (
+                          <>
+                            {`${`${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">
+                            <Badge
+                              variant="danger"
+                              className="ml-1 mt-[0.05rem] inline-flex w-min items-center gap-1.5 whitespace-nowrap"
+                            >
+                              <FontAwesomeIcon icon={faBan} />
+                              <span>Ignored</span>
+                            </Badge>
+                          </div>
+                        </Tooltip>
+                      )}
+                    </div>
                   </li>
                 );
               })}
diff --git a/frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersTable.tsx b/frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersTable.tsx
index bbed63813..342b3ca62 100644
--- a/frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersTable.tsx
+++ b/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"}>
-                        {name ?? <span className="text-mineshaft-400">Not Set</span>}
-                        {u.superAdmin && (
-                          <Badge variant="primary" className="ml-2">
-                            Server Admin
-                          </Badge>
-                        )}
+                      <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 w-min whitespace-nowrap">
+                              <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}
diff --git a/frontend/src/pages/organization/UserDetailsByIDPage/components/UserDetailsSection.tsx b/frontend/src/pages/organization/UserDetailsByIDPage/components/UserDetailsSection.tsx
index 4c25e1026..a54750aa6 100644
--- a/frontend/src/pages/organization/UserDetailsByIDPage/components/UserDetailsSection.tsx
+++ b/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,19 +141,22 @@ 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>
-            <Tooltip
-              content={
-                membership.user.isEmailVerified
-                  ? "Email has been verified"
-                  : "Email has not been verified"
-              }
-            >
-              <FontAwesomeIcon
-                size="sm"
-                icon={membership.user.isEmailVerified ? faCheckCircle : faCircleXmark}
-              />
-            </Tooltip>
+            <p className="mr-2 break-all text-sm text-mineshaft-300">
+              {membership.user.email ?? "-"}{" "}
+              <Tooltip
+                content={
+                  membership.user.isEmailVerified
+                    ? "Email has been verified"
+                    : "Email has not been verified"
+                }
+              >
+                <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">