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

Code before:
              {labels?.map((el, index) => (
                <div key={`approval-list-${index + 1}`} className="flex">
                  {labels.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"
                        )}
                      />
                      {labels.length > 1 && (
                        <Badge className="my-auto flex h-5 w-min min-w-5 items-center justify-center gap-1.5 whitespace-nowrap bg-mineshaft-400/50 text-center text-bunker-200">
                          <span>{index + 1}</span>
                        </Badge>
                      )}
                      <div
                        className={twMerge(
                          "flex-grow border-mineshaft-600",
                          index < labels.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(el.users.length) && (
                        <div className="flex flex-row flex-wrap gap-2">
                          {el.users.map((u) => {
                            return u.user.isOrgMembershipActive ? (
                              <span key={u.id}>{getMemberLabel(u)}</span>
                            ) : (
                              <span className="opacity-40" key={u.id}>
                                {getMemberLabel(u)}{" "}
                                <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" icon={faUserGroup} label="Groups">
                      {el.groupLabels}
                    </GenericFieldLabel>
                    <GenericFieldLabel icon={faClipboardCheck} label="Approvals Required">

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 24 33@2x" src="https://github.com/user-attachments/assets/f2321c11-88d9-4faa-a6bc-7f8591fe5491" />


Code after:
              {labels?.map((el, index) => (
                <div key={`approval-list-${index + 1}`} className="flex">
                  {labels.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"
                        )}
                      />
                      {labels.length > 1 && (
                        <Badge className="my-auto flex h-5 w-min min-w-5 items-center justify-center gap-1.5 whitespace-nowrap bg-mineshaft-400/50 text-center text-bunker-200">
                          <span>{index + 1}</span>
                        </Badge>
                      )}
                      <div
                        className={twMerge(
                          "flex-grow border-mineshaft-600",
                          index < labels.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(el.users.length) && (
                        <div className="flex flex-row flex-wrap gap-2">
                          {el.users.map((u, idx) => {
                            return u.user.isOrgMembershipActive ? (
                              <div className="flex items-center" key={u.id}>
                                <span>{getMemberLabel(u)}</span>
                                {idx < el.users.length - 1 && ","}
                              </div>
                            ) : (
                              <div className="flex items-center" key={u.id}>
                                <span className="flex items-center opacity-40">
                                  {getMemberLabel(u)}
                                  <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>
                                {idx < el.users.length - 1 && ","}
                              </div>
                            );