Merge branch '416789-Add-spacing-to-badge' into 'master'

Resolve "Add spacing to invited member badge"

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/141181



Merged-by: Peter Hegman <phegman@gitlab.com>
Approved-by: Peter Hegman <phegman@gitlab.com>
Co-authored-by: sean3687 <yonghyun.jin13@gmail.com>

app/assets/javascripts/members/components/table/members_table.vue

@@ -80,7 +80,7 @@ export default {
     filteredAndModifiedFields() {
       return FIELDS.filter(
         (field) => this.tableFields.includes(field.key) && this.showField(field),
-      ).map(this.modifyFieldDefinition);
+      ).map((item) => this.modifyFieldDefinition(item));
     },
     userIsLoggedIn() {
       return this.currentUserId !== null;
@@ -279,10 +279,14 @@ export default {
       </template>
 
       <template #cell(invited)="{ item: { createdAt, createdBy, invite, state } }">
-        <created-at :date="createdAt" :created-by="createdBy" />
-        <gl-badge v-if="inviteBadge(invite, state)" data-testid="invited-badge">{{
-          inviteBadge(invite, state)
-        }}</gl-badge>
+        <div
+          class="gl-display-flex gl-align-items-center gl-justify-content-end gl-lg-justify-content-start gl-flex-wrap gl-gap-3"
+        >
+          <created-at :date="createdAt" :created-by="createdBy" />
+          <gl-badge v-if="inviteBadge(invite, state)" data-testid="invited-badge"
+            >{{ inviteBadge(invite, state) }}
+          </gl-badge>
+        </div>
       </template>
 
       <template #cell(requested)="{ item: { createdAt } }">

app/assets/stylesheets/page_bundles/members.scss

@@ -61,7 +61,6 @@
   }
 }
 
-
 .members-table {
   @include media-breakpoint-up(lg) {
     .col-meta {