From 3f3cae619e4e6857efd51ea32644579d97345308 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Tue, 9 Feb 2021 01:49:46 +0200
Subject: [PATCH] Fixed team members

---
 .../components/team-members/team-members.component.ts  |  6 ++----
 .../assign-owner-dialog.component.html                 |  1 +
 .../project-details/project-details.component.html     | 10 +++++++---
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/apps/red-ui/src/app/components/team-members/team-members.component.ts b/apps/red-ui/src/app/components/team-members/team-members.component.ts
index 56ee1e37d..f1f94c557 100644
--- a/apps/red-ui/src/app/components/team-members/team-members.component.ts
+++ b/apps/red-ui/src/app/components/team-members/team-members.component.ts
@@ -8,6 +8,7 @@ import { PermissionsService } from '../../common/service/permissions.service';
 })
 export class TeamMembersComponent implements OnInit {
     @Input() public memberIds: string[];
+    @Input() public perLine: number;
     @Input() public canAdd = true;
     @Input() public largeSpacing = false;
     @Input() public canRemove = false;
@@ -23,10 +24,7 @@ export class TeamMembersComponent implements OnInit {
     ngOnInit(): void {}
 
     public get maxTeamMembersBeforeExpand(): number {
-        const width = this.container.nativeElement.offsetWidth;
-        // 32px element width + margin right (2px or 12px)
-        const elementWidth = this.largeSpacing ? 46 : 34;
-        return Math.floor(width / elementWidth) - (this.canAdd ? 1 : 0);
+        return this.perLine - (this.canAdd ? 1 : 0);
     }
 
     public get displayedMembers(): string[] {
diff --git a/apps/red-ui/src/app/dialogs/assign-owner-dialog/assign-owner-dialog.component.html b/apps/red-ui/src/app/dialogs/assign-owner-dialog/assign-owner-dialog.component.html
index 2cbcc116c..9631d7918 100644
--- a/apps/red-ui/src/app/dialogs/assign-owner-dialog/assign-owner-dialog.component.html
+++ b/apps/red-ui/src/app/dialogs/assign-owner-dialog/assign-owner-dialog.component.html
@@ -21,6 +21,7 @@
                     [largeSpacing]="true"
                     [canRemove]="true"
                     (remove)="toggleSelected($event)"
+                    [perLine]="13"
                 ></redaction-team-members>
 
                 <pre *ngIf="selectedUserList.length === 0" class="info" [innerHTML]="'assign-' + data.type + '-owner.dialog.no-members' | translate"></pre>
diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.html b/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.html
index 67cdef092..035acb908 100644
--- a/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.html
+++ b/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.html
@@ -1,5 +1,5 @@
-<ng-container *ngIf="appStateService.activeProject"
-    ><div class="collapsed-wrapper mt-8">
+<ng-container *ngIf="appStateService.activeProject">
+    <div class="collapsed-wrapper mt-8">
         <redaction-circle-button
             (action)="toggleCollapse.emit()"
             icon="red:expand"
@@ -33,7 +33,11 @@
 
     <div class="mt-16">
         <div class="all-caps-label" translate="project-details.members"></div>
-        <redaction-team-members [memberIds]="memberIds" (openAssignProjectMembersDialog)="openAssignProjectMembersDialog.emit()"></redaction-team-members>
+        <redaction-team-members
+            [memberIds]="memberIds"
+            (openAssignProjectMembersDialog)="openAssignProjectMembersDialog.emit()"
+            [perLine]="9"
+        ></redaction-team-members>
     </div>
 
     <div *ngIf="hasFiles" class="mt-24">