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

Code before:
                              if (!member) return null;

                              return member.user.isOrgMembershipActive ? (
                                <span key={el.id}>{member.user.username}</span>
                              ) : (
                                <span className="opacity-40" key={el.id}>
                                  {member.user.username}{" "}
                                  <span className="text-xs">
                                    <Tooltip content="This user has been deactivated and no longer has an active organization membership.">
                                      <div>
                                        (Inactive){" "}
                                        <FontAwesomeIcon size="xs" icon={faQuestionCircle} />
                                      </div>
                                    </Tooltip>
                                  </span>
                                </span>
                              );
                            })}
                          </div>
                        )}
                      </GenericFieldLabel>
                      <GenericFieldLabel className="col-span-2" label="Groups">
                        {approver?.group
                          ?.map(
                            (el) =>
                              approverSequence?.projectGroupsGroupById?.[el.id]?.[0]?.group?.name
                          )
                          .join(", ")}
                      </GenericFieldLabel>
                      <GenericFieldLabel label="Approvals Required">
                        <div className="flex items-center">
                          <span className="mr-2">{approver.approvals}</span>
                          {BadgeComponent && (
                            <Tooltip
                              className="max-w-lg"
                              content={
                                <div>
                                  <div className="mb-1 text-sm text-bunker-300">Reviewers</div>
                                  <div className="thin-scrollbar flex max-h-64 flex-col divide-y divide-mineshaft-500 overflow-y-auto rounded">
                                    {approver.reviewers.map((el, idx) => (
                                      <div
                                        key={`reviewer-${idx + 1}`}
                                        className="flex items-center gap-2 px-2 py-2 text-sm"
                                      >
                                        <div
                                          className={twMerge(
                                            "flex-1",
                                            !el.isOrgMembershipActive && "opacity-40"
                                          )}
                                        >
                                          {el.username}

Review comment (suggestion):
needs to be comma separated and inactive should be inline (i would just do a paragraph with fragments/span also think this would look better as a badge instead of inactive in parenthesis?)

<img width="3456" height="1920" alt="CleanShot 2025-08-19 at 17 04 30@2x" src="https://github.com/user-attachments/assets/3beb4814-a630-4e2c-b789-123d96b030d4" />

Code after:

                return (
                  <div
                    key={`approval-list-${index + 1}`}
                    className={twMerge("flex", isInactive && "opacity-50")}
                  >
                    {approverSequence.approvers!.length > 1 && (
                      <div className="flex w-12 flex-col items-center gap-2 pr-4">
                        <div
                          className={twMerge(
                            "flex-grow border-mineshaft-600",
                            index !== 0 && "border-r"
                          )}
                        />
                        {StepComponent}
                        <div
                          className={twMerge(
                            "flex-grow border-mineshaft-600",
                            index < approverSequence.approvers!.length - 1 && "border-r"
                          )}
                        />
                      </div>
                    )}
                    <div className="grid flex-1 grid-cols-5 border-b border-mineshaft-600 p-4">
                      <GenericFieldLabel className="col-span-2" icon={faUser} label="Users">
                        {Boolean(approver.user.length) && (
                          <div className="flex flex-row flex-wrap gap-2">
                            {approver?.user?.map((el, idx) => {
                              const member = approverSequence?.membersGroupById?.[el.id]?.[0];
                              if (!member) return null;

                              return member.user.isOrgMembershipActive ? (
                                <div className="flex items-center" key={member.user.id}>
                                  <span>{member.user.username}</span>
                                  {idx < approver.user.length - 1 && ","}
                                </div>
                              ) : (
                                <div className="flex items-center" key={member.user.id}>
                                  <span className="flex items-center opacity-40">
                                    {member.user.username}
                                    <span className="text-xs">
                                      <Tooltip content="This user has been deactivated and no longer has an active organization membership.">
                                        <div>
                                          <Badge className="pointer-events-none ml-1 mr-auto flex h-5 w-min items-center gap-1.5 whitespace-nowrap bg-mineshaft-400/50 text-bunker-300">
                                            <FontAwesomeIcon icon={faBan} />
                                            Inactive
                                          </Badge>
                                        </div>
                                      </Tooltip>
                                    </span>
                                  </span>