Repository: Infisical/infisical
File: frontend/src/pages/secret-manager/SecretApprovalsPage/components/SecretApprovalRequest/components/SecretApprovalRequestChanges.tsx (TypeScript)

Code before:
      </div>
      <div className="sticky top-0 z-[51] w-1/5 cursor-default pt-2" style={{ minWidth: "240px" }}>
        <div className="text-sm text-bunker-300">Reviewers</div>
        <div className="mt-2 flex flex-col space-y-2 text-sm">
          {secretApprovalRequestDetails?.policy?.approvers
            .filter(
              (requiredApprover) =>
                !(shouldBlockSelfReview && requiredApprover.userId === userSession.id)
            )
            .map((requiredApprover) => {
              const reviewer = reviewedUsers?.[requiredApprover.userId];
              const { isOrgMembershipActive } = requiredApprover;

              return (
                <div
                  className="flex flex-nowrap items-center justify-between space-x-2 rounded border border-mineshaft-600 bg-mineshaft-800 px-2 py-1"
                  key={`required-approver-${requiredApprover.userId}`}
                >
                  <div
                    className={twMerge(
                      "flex items-center gap-1 text-sm",
                      !isOrgMembershipActive && "opacity-40"
                    )}
                  >
                    <Tooltip
                      content={
                        requiredApprover.firstName
                          ? `${requiredApprover.firstName || ""} ${requiredApprover.lastName || ""}`
                          : undefined
                      }
                      position="left"
                      sideOffset={10}
                    >
                      <div className="flex">
                        <div>{requiredApprover?.email}</div>
                        <span className="text-red">*</span>
                      </div>
                    </Tooltip>

                    {!isOrgMembershipActive && (
                      <Tooltip
                        className="relative !z-[500]"
                        content="This user has been deactivated and no longer has an active organization membership."
                      >
                        <FontAwesomeIcon
                          icon={faUserSlash}
                          size="xs"
                          className="text-mineshaft-300"
                        />
                      </Tooltip>
                    )}

Review comment (suggestion):
I think the tooltip should show when you hover over the name as well and we should move the tooltip to the left to be consistent with the other tooltip for active users (can probably just re-use that tooltip and change the content based on status

<img width="3456" height="1920" alt="CleanShot 2025-08-19 at 16 54 36@2x" src="https://github.com/user-attachments/assets/8feb796d-3f5b-4bda-8e39-7868e6fc5c4d" />


Code after:
        </div>
      </div>
      <div className="sticky top-0 z-[51] w-1/5 cursor-default pt-2" style={{ minWidth: "240px" }}>
        <div className="text-sm text-bunker-300">Reviewers</div>
        <div className="mt-2 flex flex-col space-y-2 text-sm">
          {secretApprovalRequestDetails?.policy?.approvers
            .filter(
              (requiredApprover) =>
                !(shouldBlockSelfReview && requiredApprover.userId === userSession.id)
            )
            .map((requiredApprover) => {
              const reviewer = reviewedUsers?.[requiredApprover.userId];
              const { isOrgMembershipActive } = requiredApprover;

              return (
                <div
                  className="flex flex-nowrap items-center justify-between space-x-2 rounded border border-mineshaft-600 bg-mineshaft-800 px-2 py-1"
                  key={`required-approver-${requiredApprover.userId}`}
                >
                  <div
                    className={twMerge(
                      "flex items-center gap-1 text-sm",
                      !isOrgMembershipActive && "opacity-40"
                    )}
                  >
                    <Tooltip
                      content={
                        !isOrgMembershipActive
                          ? "This user has been deactivated and no longer has an active organization membership."
                          : requiredApprover.firstName
                            ? `${requiredApprover.firstName || ""} ${requiredApprover.lastName || ""}`
                            : undefined
                      }
                      position="left"
                      sideOffset={10}
                    >
                      <div className="flex items-center">
                        <div>{requiredApprover?.email}</div>
                        <span className="text-red">*</span>
                        {!isOrgMembershipActive && (
                          <FontAwesomeIcon
                            icon={faUserSlash}
                            size="xs"
                            className="ml-1 text-mineshaft-300"
                          />
                        )}
                      </div>
                    </Tooltip>
                  </div>
                  <div className="flex items-center">
                    {reviewer?.comment && (