Fixed team members

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[] {

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>

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">