<div class="grid-container">

<h2 class="mat-h2"><a routerLink="/team/{{team.id}}">{{team.displayName}}</a> : 
    <span *ngIf="!isEditing" (click)="edit()">{{period.displayName}}</span>
    <span *ngIf="isEditing">
        <input [(ngModel)]="period.displayName"/>
        <button (click)="stopEditing()" class="btn btn-primary">OK</button>
    </span>
</h2>

<div fxLayout="row wrap" fxLayoutGap="20px" width="100%">

<div fxLayout="column" fxFlex="calc(50%-20px)" fxLayoutGap="20px">
<app-bucket *ngFor="let bucket of period.buckets" [bucket]="bucket" [unit]="period.unit"
    [totalAllocationPercentage]="totalAllocationPercentage()"
    [globalResourcesAvailable]="totalAvailable()"
    [validAssignees]="validAssignees()"></app-bucket>

<div><button (click)="addBucket()" mat-raised-button color="primary">Add Bucket</button></div>

<app-assignments-by-person [period]="period"></app-assignments-by-person>
</div>

<div fxFlex="calc(50%-20px)">
<app-people [people]="period.people"
    [peopleCommitments]="peopleCommitments()"
    [totalAvailable]="totalAvailable()"
    [totalCommitted]="totalCommitted()"
    [totalUncommitted]="totalUncommitted()"
    [unit]="period.unit">
</app-people>
</div>

</div>
</div>
<div class="grid-container">

<h2 class="mat-h2"><a routerLink="/team/{{team.id}}">{{team.displayName}}</a> : 
    <span *ngIf="!isEditing" (click)="edit()">{{period.displayName}}</span>
    <span *ngIf="isEditing">
        <input [(ngModel)]="period.displayName"/>
        <button (click)="stopEditing()" class="btn btn-primary">OK</button>
    </span>
</h2>

<div fxLayout="row wrap" fxLayoutGap="20px" width="100%">

<div fxLayout="column" fxFlex="calc(50%-20px)" fxLayoutGap="20px">
<app-bucket *ngFor="let bucket of period.buckets" [bucket]="bucket" [unit]="period.unit"
    [totalAllocationPercentage]="totalAllocationPercentage()"
    [globalResourcesAvailable]="totalAvailable()"
    [validAssignees]="validAssignees()"></app-bucket>

<div><button (click)="addBucket()" mat-raised-button color="primary">Add Bucket</button></div>

</div>

<span fxLayout="column" fxFlex="calc(50%-20px)" fxLayoutGap="20px">
<app-people [people]="period.people"
    [peopleCommitments]="peopleCommitments()"
    [totalAvailable]="totalAvailable()"
    [totalCommitted]="totalCommitted()"
    [totalUncommitted]="totalUncommitted()"
    [unit]="period.unit">
</app-people>
<app-assignments-by-person [period]="period"></app-assignments-by-person>
</span>

</div>
</div>
Move assignments by person to the right
Move assignments by person to the right
