fix: align standalone pill right-padding with UserPills container

Author: TaduJR

src/components/ApprovalWorkflowSection.tsx

@@ -121,7 +121,7 @@ function ApprovalWorkflowSection({approvalWorkflow, onPress, currency = CONST.CU
                             onPress={onPress}
                             shouldRemoveBackground
                             titleComponent={
-                                <View style={styles.ml3}>
+                                <View style={[styles.ml3, styles.pr3]}>
                                     <UserPill
                                         avatar={approver.avatar}
                                         displayName={approver.displayName}

src/pages/workspace/workflows/approvals/ApprovalWorkflowEditor.tsx

@@ -190,12 +190,14 @@ function ApprovalWorkflowEditor({approvalWorkflow, removeApprovalWorkflow, polic
                                 descriptionTextStyle={!!approver?.displayName && styles.textLabelSupportingNormal}
                                 titleComponent={
                                     approver ? (
-                                        <UserPill
-                                            avatar={approver.avatar}
-                                            displayName={approver.displayName}
-                                            email={approver.email}
-                                            style={styles.userPillStandalone}
-                                        />
+                                        <View style={styles.pr3}>
+                                            <UserPill
+                                                avatar={approver.avatar}
+                                                displayName={approver.displayName}
+                                                email={approver.email}
+                                                style={styles.userPillStandalone}
+                                            />
+                                        </View>
                                     ) : undefined
                                 }
                                 onPress={() => editApprover(approverIndex)}

src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsApprovalLimitPage.tsx

@@ -207,12 +207,14 @@ function WorkspaceWorkflowsApprovalsApprovalLimitPage({policy, isLoadingReportDa
                                         descriptionTextStyle={approverDisplayName ? styles.textLabelSupportingNormal : undefined}
                                         titleComponent={
                                             currentApprover ? (
-                                                <UserPill
-                                                    avatar={currentApprover.avatar}
-                                                    displayName={currentApprover.displayName}
-                                                    email={currentApprover.email}
-                                                    style={styles.userPillStandalone}
-                                                />
+                                                <View style={styles.pr3}>
+                                                    <UserPill
+                                                        avatar={currentApprover.avatar}
+                                                        displayName={currentApprover.displayName}
+                                                        email={currentApprover.email}
+                                                        style={styles.userPillStandalone}
+                                                    />
+                                                </View>
                                             ) : undefined
                                         }
                                         onPress={navigateToApproverChange}
@@ -254,12 +256,14 @@ function WorkspaceWorkflowsApprovalsApprovalLimitPage({policy, isLoadingReportDa
                                 descriptionTextStyle={selectedApproverDisplayName ? styles.textLabelSupportingNormal : undefined}
                                 titleComponent={
                                     selectedApproverEmail ? (
-                                        <UserPill
-                                            avatar={selectedApproverPersonalDetails?.avatar}
-                                            displayName={selectedApproverPersonalDetails?.displayName ?? selectedApproverEmail}
-                                            email={selectedApproverEmail}
-                                            style={styles.userPillStandalone}
-                                        />
+                                        <View style={styles.pr3}>
+                                            <UserPill
+                                                avatar={selectedApproverPersonalDetails?.avatar}
+                                                displayName={selectedApproverPersonalDetails?.displayName ?? selectedApproverEmail}
+                                                email={selectedApproverEmail}
+                                                style={styles.userPillStandalone}
+                                            />
+                                        </View>
                                     ) : undefined
                                 }
                                 onPress={navigateToApproverSelector}