Calendar, Contacts, Mail, Scrumboard apps responsive refinements,

+ temporary fix for md-sidenav-locked transition

src/app/core/directives/md-sidenav-helper/md-sidenav-helper.directive.ts

@@ -1,4 +1,4 @@
-import { Directive, Input, OnInit, HostListener, OnDestroy, HostBinding, AfterViewInit } from '@angular/core';
+import { Directive, Input, OnInit, HostListener, OnDestroy, HostBinding } from '@angular/core';
 import { MdSidenav } from '@angular/material';
 import { FuseMdSidenavHelperService } from 'app/core/directives/md-sidenav-helper/md-sidenav-helper.service';
 import { FuseMatchMedia } from '../../services/match-media.service';
@@ -8,7 +8,7 @@ import { Subscription } from 'rxjs/Subscription';
 @Directive({
     selector: '[fuseMdSidenavHelper]'
 })
-export class FuseMdSidenavHelperDirective implements OnInit, AfterViewInit, OnDestroy
+export class FuseMdSidenavHelperDirective implements OnInit, OnDestroy
 {
     matchMediaSubscription: Subscription;
 
@@ -38,6 +38,7 @@ export class FuseMdSidenavHelperDirective implements OnInit, AfterViewInit, OnDe
                 this.mdSidenav.mode = 'side';
                 this.mdSidenav.open();
             });
+            this.stopTransition = false;
         }
         else
         {
@@ -46,6 +47,10 @@ export class FuseMdSidenavHelperDirective implements OnInit, AfterViewInit, OnDe
                 this.mdSidenav.mode = 'over';
                 this.mdSidenav.close();
             });
+
+            setTimeout(() => {
+                this.stopTransition = false;
+            }, 3000);
         }
 
         this.matchMediaSubscription = this.fuseMatchMedia.onMediaChange.subscribe(() => {
@@ -69,13 +74,6 @@ export class FuseMdSidenavHelperDirective implements OnInit, AfterViewInit, OnDe
 
     }
 
-    ngAfterViewInit()
-    {
-        setTimeout(() => {
-            this.stopTransition = false;
-        }, 300);
-    }
-
     ngOnDestroy()
     {
         this.matchMediaSubscription.unsubscribe();

src/app/core/scss/partials/_angular-material-fix.scss

@@ -9,9 +9,10 @@ md-sidenav-container {
 
     md-sidenav {
 
-        &.md-stop-transition {
+        &[md-is-locked-open].md-stop-transition {
             transition: none !important;
             transform: translate3d(0, 0, 0) !important;
+            opacity: 0;
 
             ~ .mat-sidenav-content,
             ~ .mat-drawer-content {

src/app/main/content/apps/calendar/calendar.component.html

@@ -1,6 +1,7 @@
 <div id="calendar" class="page-layout simple fullwidth" fusePerfectScrollbar>
+
     <!-- HEADER -->
-    <div class="header" [ngClass]="viewDate | date:'MMM'">
+    <div class="header p-16 p-sm-24" [ngClass]="viewDate | date:'MMM'">
 
         <div class="header-content" fxLayout="column" fxLayoutAlign="space-between">
 

src/app/main/content/apps/calendar/calendar.component.scss

@@ -26,8 +26,8 @@
     }
 
     .cal-open-day-events {
-        background: #455A64;
+        background: whitesmoke;
-        box-shadow: inset 0 0 12px 0 rgba(0, 0, 0, 0.54);
+        box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.13);
         padding: 0;
         display: flex;
         flex-direction: column;
@@ -44,11 +44,11 @@
             transition: box-shadow 300ms ease;
 
             &:first-of-type {
-                margin-top: 16px;
+                margin-top: 24px;
             }
 
             &:last-of-type {
-                margin-bottom: 16px;
+                margin-bottom: 24px;
             }
 
             &:hover {
@@ -184,12 +184,13 @@
 
 #calendar {
     background: #FFFFFF;
+    overflow-x: hidden;
+    overflow-y: auto;
 
     .header {
         height: 200px;
         min-height: 200px;
         max-height: 200px;
-        padding: 24px;
         position: relative;
         background-size: 100% auto;
         background-position: 0 50%;
@@ -197,6 +198,12 @@
         background-color: #FAFAFA;
         color: #FFFFFF;
 
+        @include media-breakpoint(xs) {
+            height: 164px;
+            min-height: 164px;
+            max-height: 164px;
+        }
+
         &:before {
             content: '';
             position: absolute;

src/app/main/content/apps/calendar/event-form/event-form.component.html

@@ -1,95 +1,98 @@
-<md-toolbar md-dialog-title class="mat-accent m-0">
+<div class="dialog-content-wrapper">
-    <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
+    <md-toolbar md-dialog-title class="mat-accent m-0">
-        <span class="title dialog-title">{{dialogTitle}}</span>
+        <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
-        <button md-button class="mat-icon-button"
+            <span class="title dialog-title">{{dialogTitle}}</span>
-                (click)="dialogRef.close()"
+            <button md-button class="mat-icon-button"
-                aria-label="Close dialog">
+                    (click)="dialogRef.close()"
-            <md-icon>close</md-icon>
+                    aria-label="Close dialog">
-        </button>
+                <md-icon>close</md-icon>
-    </div>
+            </button>
-</md-toolbar>
-
-<div md-dialog-content class="p-24 m-0" fusePerfectScrollbar>
-
-    <form name="eventForm" [formGroup]="eventForm" class="event-form" fxLayout="column" fxFlex>
-
-        <md-input-container>
-            <input mdInput
-                   name="title"
-                   formControlName="title"
-                   placeholder="Title"
-                   required>
-        </md-input-container>
-
-        <div class="py-16" fxFlex="1 0 auto" fxLayout="row">
-            <md-slide-toggle
-                name="allDay"
-                formControlName="allDay"
-                class="mr-24"
-                aria-label="All day">
-                All Day
-            </md-slide-toggle>
         </div>
+    </md-toolbar>
 
-        <div class="py-16" fxFlex="1 0 auto" fxLayout="row" formGroupName="color">
+    <div md-dialog-content class="p-24 m-0" fusePerfectScrollbar>
-            <md-input-container class="mr-24">
+
+        <form name="eventForm" [formGroup]="eventForm" class="event-form w-100-p" fxLayout="column" fxFlex>
+
+            <md-input-container class="w-100-p">
                 <input mdInput
-                       name="primary color"
+                       name="title"
-                       formControlName="primary"
+                       formControlName="title"
-                       placeholder="Primary color"
+                       placeholder="Title"
-                       [(colorPicker)]="event.color.primary"
+                       required>
-                       cpWidth="290px"
-                       [cpPresetColors]="presetColors"
-                       [style.background]="event.color.primary"
-                       (colorPickerChange)="event.color.primary = $event; eventForm.patchValue({color:{primary:$event}})"/>
             </md-input-container>
-            <md-input-container>
+
+            <div class="py-16" fxFlex="1 0 auto" fxLayout="row">
+                <md-slide-toggle
+                    name="allDay"
+                    formControlName="allDay"
+                    class="mr-24"
+                    aria-label="All day">
+                    All Day
+                </md-slide-toggle>
+            </div>
+
+            <div class="py-16" fxFlex="1 0 auto" fxLayout="row" formGroupName="color">
+                <md-input-container class="mr-24" fxFlex>
+                    <input mdInput
+                           name="primary color"
+                           formControlName="primary"
+                           placeholder="Primary color"
+                           [(colorPicker)]="event.color.primary"
+                           cpWidth="290px"
+                           [cpPresetColors]="presetColors"
+                           [style.background]="event.color.primary"
+                           (colorPickerChange)="event.color.primary = $event; eventForm.patchValue({color:{primary:$event}})"/>
+                </md-input-container>
+                <md-input-container fxFlex>
+                    <input mdInput
+                           name="secondary color"
+                           formControlName="secondary"
+                           placeholder="Secondary color"
+                           [(colorPicker)]="event.color.secondary"
+                           cpWidth="290px"
+                           [cpPresetColors]="presetColors"
+                           [style.background]="event.color.secondary"
+                           (colorPickerChange)="event.color.secondary = $event; eventForm.patchValue({color:{secondary:$event}})"/>
+                </md-input-container>
+            </div>
+
+            <div fxFlex="1 0 auto" fxLayout="row">
+
+                <md-form-field class="mr-24" fxFlex>
+                    <input mdInput [mdDatepicker]="startDatePicker" placeholder="Start Date">
+                    <md-datepicker-toggle mdSuffix [for]="startDatePicker"></md-datepicker-toggle>
+                    <md-datepicker #startDatePicker></md-datepicker>
+                </md-form-field>
+
+                <md-input-container class="no-errors-spacer" fxFlex md-no-float>
+                    <input mdInput ng-model="calendarEvent.startTime" placeholder="Start Time">
+                </md-input-container>
+
+            </div>
+
+            <div fxFlex="1 0 auto" fxLayout="row">
+
+                <md-form-field class="mr-24" fxFlex>
+                    <input mdInput [mdDatepicker]="endDatePicker" placeholder="End Date">
+                    <md-datepicker-toggle mdSuffix [for]="endDatePicker"></md-datepicker-toggle>
+                    <md-datepicker #endDatePicker></md-datepicker>
+                </md-form-field>
+
+                <md-input-container class="no-errors-spacer" fxFlex md-no-float>
+                    <input mdInput ng-model="calendarEvent.endTime" placeholder="End Time">
+                </md-input-container>
+
+            </div>
+
+            <md-input-container formGroupName="meta" class="w-100-p">
                 <input mdInput
-                       name="secondary color"
+                       name="location"
-                       formControlName="secondary"
+                       formControlName="location"
-                       placeholder="Secondary color"
+                       placeholder="Location">
-                       [(colorPicker)]="event.color.secondary"
-                       cpWidth="290px"
-                       [cpPresetColors]="presetColors"
-                       [style.background]="event.color.secondary"
-                       (colorPickerChange)="event.color.secondary = $event; eventForm.patchValue({color:{secondary:$event}})"/>
-            </md-input-container>
-        </div>
-
-        <div fxFlex="1 0 auto" fxLayout="row">
-
-            <md-form-field class="mr-24">
-                <input mdInput [mdDatepicker]="startDatePicker" placeholder="Start Date">
-                <md-datepicker-toggle mdSuffix [for]="startDatePicker"></md-datepicker-toggle>
-                <md-datepicker #startDatePicker></md-datepicker>
-            </md-form-field>
-
-            <md-datepicker #startDatePicker></md-datepicker>
-
-        </div>
-
-        <div fxFlex="1 0 auto" fxLayout="row">
-
-            <md-form-field class="mr-24">
-                <input mdInput [mdDatepicker]="endDatePicker" placeholder="End Date">
-                <md-datepicker-toggle mdSuffix [for]="endDatePicker"></md-datepicker-toggle>
-                <md-datepicker #endDatePicker></md-datepicker>
-            </md-form-field>
-
-            <md-input-container class="no-errors-spacer" flex md-no-float>
-                <input mdInput ng-model="calendarEvent.endTime" placeholder="End Time">
             </md-input-container>
 
-        </div>
+            <md-input-container formGroupName="meta" class="w-100-p">
-
-        <md-input-container formGroupName="meta">
-            <input mdInput
-                   name="location"
-                   formControlName="location"
-                   placeholder="Location">
-        </md-input-container>
-
-        <md-input-container formGroupName="meta">
 
             <textarea mdInput
                       formControlName="notes"
@@ -97,39 +100,39 @@
                       md-maxlength="250"
                       max-rows="4">
             </textarea>
-        </md-input-container>
+            </md-input-container>
 
-    </form>
+        </form>
-
-</div>
-
-<div md-dialog-actions class="m-0 p-16" fxLayout="row" fxLayoutAlign="space-between center">
-
-    <button *ngIf="action !=='edit'"
-            md-raised-button
-            (click)="dialogRef.close(eventForm)"
-            class="save-button mat-accent"
-            [disabled]="eventForm.invalid"
-            aria-label="SAVE">
-        SAVE
-    </button>
-
-    <button *ngIf="action ==='edit'"
-            md-raised-button
-            (click)="dialogRef.close(['save',eventForm])"
-            class="save-button mat-accent"
-            [disabled]="eventForm.invalid"
-            aria-label="SAVE">
-        SAVE
-    </button>
-
-    <button *ngIf="action ==='edit'"
-            md-button
-            class="mat-icon-button"
-            (click)="dialogRef.close(['delete',eventForm])"
-            aria-label="Delete"
-            md-tooltip="Delete">
-        <md-icon>delete</md-icon>
-    </button>
 
+    </div>
+
+    <div md-dialog-actions class="m-0 p-16" fxLayout="row" fxLayoutAlign="space-between center">
+
+        <button *ngIf="action !=='edit'"
+                md-raised-button
+                (click)="dialogRef.close(eventForm)"
+                class="save-button mat-accent"
+                [disabled]="eventForm.invalid"
+                aria-label="SAVE">
+            SAVE
+        </button>
+
+        <button *ngIf="action ==='edit'"
+                md-raised-button
+                (click)="dialogRef.close(['save',eventForm])"
+                class="save-button mat-accent"
+                [disabled]="eventForm.invalid"
+                aria-label="SAVE">
+            SAVE
+        </button>
+
+        <button *ngIf="action ==='edit'"
+                md-button
+                class="mat-icon-button"
+                (click)="dialogRef.close(['delete',eventForm])"
+                aria-label="Delete"
+                md-tooltip="Delete">
+            <md-icon>delete</md-icon>
+        </button>
+    </div>
 </div>

src/app/main/content/apps/calendar/event-form/event-form.component.scss

@@ -2,11 +2,12 @@
 
     .mat-dialog-container {
         padding: 0;
-        width: 720px;
+        width: 480px;
+    }
+
+    .dialog-content-wrapper {
+        max-height: 85vh;
+        display: flex;
+        flex-direction: column;
     }
 }
-
-:host {
-    display: flex;
-    flex-direction: column;
-}

src/app/main/content/apps/contacts/contact-form/contact-form.component.html

@@ -1,126 +1,128 @@
-<md-toolbar md-dialog-title class="mat-accent m-0">
+<div class="dialog-content-wrapper">
-    <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
+    <md-toolbar md-dialog-title class="mat-accent m-0">
-        <span class="title dialog-title">{{dialogTitle}}</span>
+        <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
-        <button md-button class="mat-icon-button"
+            <span class="title dialog-title">{{dialogTitle}}</span>
-                (click)="dialogRef.close()"
+            <button md-button class="mat-icon-button"
-                aria-label="Close dialog">
+                    (click)="dialogRef.close()"
-            <md-icon>close</md-icon>
+                    aria-label="Close dialog">
-        </button>
+                <md-icon>close</md-icon>
+            </button>
+        </div>
+
+        <md-toolbar-row class="toolbar-bottom py-8 py-sm-16" fxLayout="column" fxLayoutAlign="center center">
+            <img [src]="contact.avatar" class=" avatar contact-avatar huge"
+                 [alt]="contact.name"/>
+            <div class="contact-name">{{contact.name}}</div>
+        </md-toolbar-row>
+    </md-toolbar>
+
+    <div md-dialog-content class="p-24 m-0" fusePerfectScrollbar>
+
+        <form [formGroup]="contactForm">
+
+            <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
+                <md-icon class="mr-12 mt-12">account_circle</md-icon>
+                <md-input-container fxFlex>
+                    <input name="name" formControlName="name" placeholder="Name" mdInput required>
+                </md-input-container>
+            </div>
+
+            <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
+                <md-icon class="mr-12 mt-12"></md-icon>
+                <md-input-container fxFlex>
+                    <input name="lastName" formControlName="lastName" placeholder="Lastname" mdInput>
+                </md-input-container>
+            </div>
+
+            <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
+                <md-icon class="mr-12 mt-12">star</md-icon>
+                <md-input-container fxFlex>
+                    <input name="nickname" formControlName="nickname" mdInput placeholder="Nickname">
+                </md-input-container>
+            </div>
+
+            <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
+                <md-icon class="mr-12 mt-12">phone</md-icon>
+                <md-input-container fxFlex>
+                    <input formControlName="phone" mdInput placeholder="Phone number">
+                </md-input-container>
+            </div>
+
+            <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
+                <md-icon class="mr-12 mt-12">email</md-icon>
+                <md-input-container fxFlex>
+                    <input name="email" formControlName="email" mdInput type="email" placeholder="Email">
+                </md-input-container>
+            </div>
+
+            <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
+                <md-icon class="mr-12 mt-12">domain</md-icon>
+                <md-input-container fxFlex>
+                    <input name="company" formControlName="company" mdInput placeholder="Company">
+                </md-input-container>
+            </div>
+
+            <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
+                <md-icon class="mr-12 mt-12">work</md-icon>
+                <md-input-container fxFlex>
+                    <input name="jobTitle" formControlName="jobTitle" mdInput placeholder="Job title">
+                </md-input-container>
+            </div>
+
+            <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
+                <md-form-field class="mr-24" fxFlex>
+                    <input mdInput [mdDatepicker]="birthdayDatePicker" placeholder="Birthday">
+                    <md-datepicker-toggle mdSuffix [for]="birthdayDatePicker"></md-datepicker-toggle>
+                    <md-datepicker #birthdayDatePicker></md-datepicker>
+                </md-form-field>
+            </div>
+
+            <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
+                <md-icon class="mr-12 mt-12">home</md-icon>
+                <md-input-container fxFlex>
+                    <input name="address" formControlName="address" mdInput placeholder="Address">
+                </md-input-container>
+            </div>
+
+            <div fxLayout="row" class="textarea-wrapper" fxLayoutAlign="start start">
+                <md-icon class="mr-12 mt-12">note</md-icon>
+                <md-input-container fxFlex>
+                    <textarea name="notes" formControlName="notes" placeholder="Notes" mdInput type="text" max-rows="4"></textarea>
+                </md-input-container>
+            </div>
+
+        </form>
+
     </div>
 
-    <md-toolbar-row class="toolbar-bottom" fxLayout="column" fxLayoutAlign="center center">
+    <div md-dialog-actions class="m-0 p-16" fxLayout="row" fxLayoutAlign="space-between center">
-        <img [src]="contact.avatar" class=" avatar contact-avatar huge"
-             [alt]="contact.name"/>
-        <div class="contact-name">{{contact.name}}</div>
-    </md-toolbar-row>
-</md-toolbar>
 
-<div md-dialog-content class="p-24 m-0" fusePerfectScrollbar>
+        <button *ngIf="action !=='edit'"
+                md-raised-button
+                (click)="dialogRef.close(contactForm)"
+                class="save-button mat-accent"
+                [disabled]="contactForm.invalid"
+                aria-label="SAVE">
+            SAVE
+        </button>
 
-    <form [formGroup]="contactForm">
+        <button *ngIf="action ==='edit'"
+                md-raised-button
+                (click)="dialogRef.close(['save',contactForm])"
+                class="save-button mat-accent"
+                [disabled]="contactForm.invalid"
+                aria-label="SAVE">
+            SAVE
+        </button>
 
-        <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
+        <button *ngIf="action ==='edit'"
-            <md-icon class="mr-12 mt-12">account_circle</md-icon>
+                md-button
-            <md-input-container fxFlex>
+                class="mat-icon-button"
-                <input name="name" formControlName="name" placeholder="Name" mdInput required>
+                (click)="dialogRef.close(['delete',contactForm])"
-            </md-input-container>
+                aria-label="Delete"
-        </div>
+                md-tooltip="Delete">
-
+            <md-icon>delete</md-icon>
-        <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
+        </button>
-            <md-icon class="mr-12 mt-12"></md-icon>
-            <md-input-container fxFlex>
-                <input name="lastName" formControlName="lastName" placeholder="Lastname" mdInput>
-            </md-input-container>
-        </div>
-
-        <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
-            <md-icon class="mr-12 mt-12">star</md-icon>
-            <md-input-container fxFlex>
-                <input name="nickname" formControlName="nickname" mdInput placeholder="Nickname">
-            </md-input-container>
-        </div>
-
-        <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
-            <md-icon class="mr-12 mt-12">phone</md-icon>
-            <md-input-container fxFlex>
-                <input formControlName="phone" mdInput placeholder="Phone number">
-            </md-input-container>
-        </div>
-
-        <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
-            <md-icon class="mr-12 mt-12">email</md-icon>
-            <md-input-container fxFlex>
-                <input name="email" formControlName="email" mdInput type="email" placeholder="Email">
-            </md-input-container>
-        </div>
-
-        <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
-            <md-icon class="mr-12 mt-12">domain</md-icon>
-            <md-input-container fxFlex>
-                <input name="company" formControlName="company" mdInput placeholder="Company">
-            </md-input-container>
-        </div>
-
-        <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
-            <md-icon class="mr-12 mt-12">work</md-icon>
-            <md-input-container fxFlex>
-                <input name="jobTitle" formControlName="jobTitle" mdInput placeholder="Job title">
-            </md-input-container>
-        </div>
-
-        <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
-            <md-form-field class="mr-24" fxFlex>
-                <input mdInput [mdDatepicker]="birthdayDatePicker" placeholder="Birthday">
-                <md-datepicker-toggle mdSuffix [for]="birthdayDatePicker"></md-datepicker-toggle>
-                <md-datepicker #birthdayDatePicker></md-datepicker>
-            </md-form-field>
-        </div>
-
-        <div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
-            <md-icon class="mr-12 mt-12">home</md-icon>
-            <md-input-container fxFlex>
-                <input name="address" formControlName="address" mdInput placeholder="Address">
-            </md-input-container>
-        </div>
-
-        <div fxLayout="row" class="textarea-wrapper" fxLayoutAlign="start start">
-            <md-icon class="mr-12 mt-12">note</md-icon>
-            <md-input-container fxFlex>
-                <textarea name="notes" formControlName="notes" placeholder="Notes" mdInput type="text" max-rows="4"></textarea>
-            </md-input-container>
-        </div>
-
-    </form>
-
-</div>
-
-<div md-dialog-actions class="m-0 p-16" fxLayout="row" fxLayoutAlign="space-between center">
-
-    <button *ngIf="action !=='edit'"
-            md-raised-button
-            (click)="dialogRef.close(contactForm)"
-            class="save-button mat-accent"
-            [disabled]="contactForm.invalid"
-            aria-label="SAVE">
-        SAVE
-    </button>
-
-    <button *ngIf="action ==='edit'"
-            md-raised-button
-            (click)="dialogRef.close(['save',contactForm])"
-            class="save-button mat-accent"
-            [disabled]="contactForm.invalid"
-            aria-label="SAVE">
-        SAVE
-    </button>
-
-    <button *ngIf="action ==='edit'"
-            md-button
-            class="mat-icon-button"
-            (click)="dialogRef.close(['delete',contactForm])"
-            aria-label="Delete"
-            md-tooltip="Delete">
-        <md-icon>delete</md-icon>
-    </button>
 
+    </div>
 </div>

src/app/main/content/apps/contacts/contact-form/contact-form.component.scss

@@ -3,14 +3,20 @@
     .mat-dialog-container {
         padding: 0;
         width: 400px;
+        overflow: hidden;
+
+        .mat-toolbar {
+            min-height: initial;
+        }
 
         .toolbar-bottom {
-            height: 200px;
+            height: auto;
         }
     }
-}
 
-:host {
+    .dialog-content-wrapper {
-    display: flex;
+        max-height: 85vh;
-    flex-direction: column;
+        display: flex;
+        flex-direction: column;
+    }
 }

src/app/main/content/apps/contacts/contact-list/contact-list.component.html

@@ -104,9 +104,3 @@
 </md-table>
 
 
-<!-- ADD CONTACT BUTTON -->
-<button md-fab class="md-accent-bg" id="add-contact-button" (click)="newContact()" aria-label="add contact"
-        *fuseIfOnDom [@animate]="{value:'*', params:{delay:'300ms',scale:'.2'}}">
-    <md-icon>person_add</md-icon>
-</button>
-<!-- / ADD CONTACT BUTTON -->

src/app/main/content/apps/contacts/contact-list/contact-list.component.scss

@@ -8,7 +8,7 @@
         box-shadow: none;
 
         .mat-column-checkbox {
-            flex: 0 1 64px;
+            flex: 0 1 48px;
         }
 
         .mat-column-avatar {
@@ -22,6 +22,7 @@
         .mat-row {
             position: relative;
             cursor: pointer;
+            padding-right: 8px;
 
             .mat-cell {
                 min-width: 0;

src/app/main/content/apps/contacts/contact-list/contact-list.component.ts

@@ -12,7 +12,7 @@ import { fuseAnimations } from '../../../../../core/animations';
     selector   : 'fuse-contacts-contact-list',
     templateUrl: './contact-list.component.html',
     styleUrls  : ['./contact-list.component.scss'],
-    animations   : fuseAnimations
+    animations : fuseAnimations
 })
 export class FuseContactsContactListComponent implements OnInit
 {
@@ -63,28 +63,6 @@ export class FuseContactsContactListComponent implements OnInit
         this.dataSource = new FilesDataSource(this.contactsService);
     }
 
-    newContact()
-    {
-        this.dialogRef = this.dialog.open(FuseContactsContactFormDialogComponent, {
-            panelClass: 'contact-form-dialog',
-            data      : {
-                action: 'new'
-            }
-        });
-
-        this.dialogRef.afterClosed()
-            .subscribe((response: FormGroup) => {
-                if ( !response )
-                {
-                    return;
-                }
-
-                this.contactsService.updateContact(response.getRawValue());
-
-            });
-
-    }
-
     editContact(contact)
     {
         this.dialogRef = this.dialog.open(FuseContactsContactFormDialogComponent, {

src/app/main/content/apps/contacts/contacts.component.html

@@ -1,7 +1,7 @@
-<div id="contacts" class="page-layout simple left-sidenav inner-sidenav" fusePerfectScrollbar>
+<div id="contacts" class="page-layout simple left-sidenav inner-sidenav">
 
     <!-- HEADER -->
-    <div class="header md-accent-bg p-24" fxLayout="column" fxLayoutAlign="start start"
+    <div class="header md-accent-bg p-16 p-sm-24" fxLayout="column" fxLayoutAlign="start start"
          fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="space-between center">
 
         <!-- APP TITLE -->
@@ -51,7 +51,7 @@
         <!-- / SIDENAV -->
 
         <!-- CENTER -->
-        <div class="center p-24 pr-sm-92" fusePerfectScrollbar>
+        <div class="center p-24 pb-56 pr-sm-92" fusePerfectScrollbar>
 
             <!-- CONTENT -->
             <div class="content md-white-bg mat-elevation-z4">
@@ -67,3 +67,10 @@
     </md-sidenav-container>
 
 </div>
+
+<!-- ADD CONTACT BUTTON -->
+<button md-fab class="md-accent-bg" id="add-contact-button" (click)="newContact()" aria-label="add contact"
+        *fuseIfOnDom [@animate]="{value:'*', params:{delay:'300ms',scale:'.2'}}">
+    <md-icon>person_add</md-icon>
+</button>
+<!-- / ADD CONTACT BUTTON -->

src/app/main/content/apps/contacts/contacts.component.scss

@@ -4,3 +4,10 @@
         overflow: hidden;
     }
 }
+#add-contact-button {
+    position: absolute;
+    bottom: 12px;
+    right: 12px;
+    padding: 0;
+    z-index: 99;
+}

src/app/main/content/apps/contacts/contacts.component.ts

@@ -1,7 +1,9 @@
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { ContactsService } from './contacts.service';
 import { fuseAnimations } from '../../../../core/animations';
-import { FormControl } from '@angular/forms';
+import { FormControl, FormGroup } from '@angular/forms';
+import { FuseContactsContactFormDialogComponent } from './contact-form/contact-form.component';
+import { MdDialog } from '@angular/material';
 
 @Component({
     selector     : 'fuse-contacts',
@@ -14,12 +16,38 @@ export class FuseContactsComponent implements OnInit
 {
     hasSelectedContacts: boolean;
     searchInput: FormControl;
+    dialogRef: any;
 
-    constructor(private contactsService: ContactsService)
+    constructor(
+        private contactsService: ContactsService,
+        public dialog: MdDialog
+    )
     {
         this.searchInput = new FormControl('');
     }
 
+    newContact()
+    {
+        this.dialogRef = this.dialog.open(FuseContactsContactFormDialogComponent, {
+            panelClass: 'contact-form-dialog',
+            data      : {
+                action: 'new'
+            }
+        });
+
+        this.dialogRef.afterClosed()
+            .subscribe((response: FormGroup) => {
+                if ( !response )
+                {
+                    return;
+                }
+
+                this.contactsService.updateContact(response.getRawValue());
+
+            });
+
+    }
+
     ngOnInit()
     {
 

src/app/main/content/apps/mail/dialogs/compose/compose.component.html

@@ -1,109 +1,111 @@
-<md-toolbar md-dialog-title class="mat-accent m-0">
+<div class="dialog-content-wrapper">
-    <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
+    <md-toolbar md-dialog-title class="mat-accent m-0">
-        <span class="title dialog-title">New Message</span>
+        <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
-        <button md-button class="mat-icon-button"
+            <span class="title dialog-title">New Message</span>
-                (click)="dialogRef.close()"
+            <button md-button class="mat-icon-button"
-                aria-label="Close dialog">
+                    (click)="dialogRef.close()"
-            <md-icon>close</md-icon>
+                    aria-label="Close dialog">
-        </button>
+                <md-icon>close</md-icon>
-    </div>
+            </button>
-</md-toolbar>
+        </div>
+    </md-toolbar>
 
-<div md-dialog-content class="p-24 m-0" fusePerfectScrollbar>
+    <div md-dialog-content class="p-24 m-0" fusePerfectScrollbar>
 
-    <form name="composeForm" [formGroup]="composeForm" class="compose-form" fxLayout="column" fxFlex>
+        <form name="composeForm" [formGroup]="composeForm" class="compose-form" fxLayout="column" fxFlex>
 
-        <md-input-container>
+            <md-input-container>
-            <input mdInput name="from"
+                <input mdInput name="from"
-                   placeholder="From"
+                       placeholder="From"
-                   formControlName="from"
+                       formControlName="from"
-                   type="email">
+                       type="email">
-        </md-input-container>
+            </md-input-container>
 
-        <md-input-container ng-class="{'hidden-cc': vm.hiddenCC, 'hidden-bcc': vm.hiddenBCC}">
+            <md-input-container ng-class="{'hidden-cc': vm.hiddenCC, 'hidden-bcc': vm.hiddenBCC}">
-            <input mdInput name="to"
+                <input mdInput name="to"
-                   placeholder="To"
+                       placeholder="To"
-                   formControlName="to"
+                       formControlName="to"
-                   type="email" required>
+                       type="email" required>
-        </md-input-container>
+            </md-input-container>
 
-        <md-input-container>
+            <md-input-container>
-            <input mdInput
+                <input mdInput
-                   name="cc"
+                       name="cc"
-                   placeholder="Cc"
+                       placeholder="Cc"
-                   formControlName="cc"
+                       formControlName="cc"
-                   type="email">
+                       type="email">
-        </md-input-container>
+            </md-input-container>
 
-        <md-input-container>
+            <md-input-container>
-            <input mdInput
+                <input mdInput
-                   name="bcc"
+                       name="bcc"
-                   placeholder="Bcc"
+                       placeholder="Bcc"
-                   formControlName="bcc"
+                       formControlName="bcc"
-                   type="email">
+                       type="email">
-        </md-input-container>
+            </md-input-container>
 
-        <md-input-container>
+            <md-input-container>
-            <input mdInput name="subject"
+                <input mdInput name="subject"
-                   placeholder="Subject"
+                       placeholder="Subject"
-                   formControlName="subject">
+                       formControlName="subject">
-        </md-input-container>
+            </md-input-container>
 
-        <md-input-container>
+            <md-input-container>
             <textarea mdInput name="message"
                       placeholder="Message"
                       formControlName="message"
                       rows="6">
             </textarea>
-        </md-input-container>
+            </md-input-container>
 
-        <div class="attachment-list">
+            <div class="attachment-list">
 
-            <div class="attachment" fxLayout="row" fxLayoutAlign="space-between center">
+                <div class="attachment" fxLayout="row" fxLayoutAlign="space-between center">
-                <div>
+                    <div>
-                    <span class="filename">attachment-2.doc</span>
+                        <span class="filename">attachment-2.doc</span>
-                    <span class="size">(12 Kb)</span>
+                        <span class="size">(12 Kb)</span>
+                    </div>
+
+                    <button md-icon-button aria-label="Delete attachment">
+                        <md-icon class="s-16">close</md-icon>
+                    </button>
                 </div>
 
-                <button md-icon-button aria-label="Delete attachment">
+                <div class="attachment" fxLayout="row" fxLayoutAlign="space-between center">
-                    <md-icon class="s-16">close</md-icon>
+                    <div>
-                </button>
+                        <span class="filename">attachment-1.jpg</span>
-            </div>
+                        <span class="size">(350 Kb)</span>
+                    </div>
 
-            <div class="attachment" fxLayout="row" fxLayoutAlign="space-between center">
+                    <button md-icon-button aria-label="Delete attachment">
-                <div>
+                        <md-icon class="s-16">close</md-icon>
-                    <span class="filename">attachment-1.jpg</span>
+                    </button>
-                    <span class="size">(350 Kb)</span>
                 </div>
-
-                <button md-icon-button aria-label="Delete attachment">
-                    <md-icon class="s-16">close</md-icon>
-                </button>
             </div>
-        </div>
+        </form>
-    </form>
-</div>
-
-<div md-dialog-actions class="m-0 p-16" fxLayout="row" fxLayoutAlign="space-between center">
-    <div>
-        <button md-raised-button
-                (click)="dialogRef.close(['send',composeForm])"
-                class="save-button mat-accent"
-                [disabled]="composeForm.invalid"
-                aria-label="SAVE">
-            SEND
-        </button>
-
-        <button md-icon-button md-tooltip="Attach a file">
-            <md-icon>attach_file</md-icon>
-        </button>
     </div>
 
-    <button md-button
+    <div md-dialog-actions class="m-0 p-16" fxLayout="row" fxLayoutAlign="space-between center">
-            class="mat-icon-button"
+        <div>
-            (click)="dialogRef.close(['delete',composeForm])"
+            <button md-raised-button
-            aria-label="Delete"
+                    (click)="dialogRef.close(['send',composeForm])"
-            md-tooltip="Delete">
+                    class="save-button mat-accent"
-        <md-icon>delete</md-icon>
+                    [disabled]="composeForm.invalid"
-    </button>
+                    aria-label="SAVE">
+                SEND
+            </button>
+
+            <button md-icon-button md-tooltip="Attach a file">
+                <md-icon>attach_file</md-icon>
+            </button>
+        </div>
+
+        <button md-button
+                class="mat-icon-button"
+                (click)="dialogRef.close(['delete',composeForm])"
+                aria-label="Delete"
+                md-tooltip="Delete">
+            <md-icon>delete</md-icon>
+        </button>
+    </div>
 </div>

src/app/main/content/apps/mail/dialogs/compose/compose.component.scss

@@ -1,8 +1,3 @@
-:host {
-    display: flex;
-    flex-direction: column;
-}
-
 .mail-compose-dialog {
     .mat-dialog-container {
         padding: 0;
@@ -36,4 +31,10 @@
             }
         }
     }
+
+    .dialog-content-wrapper {
+        max-height: 85vh;
+        display: flex;
+        flex-direction: column;
+    }
 }

src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.html

@@ -1,452 +1,454 @@
-<md-toolbar *ngIf="card" md-dialog-title class="md-accent-bg m-0">
+<div class="dialog-content-wrapper">
+    <md-toolbar *ngIf="card" md-dialog-title class="md-accent-bg m-0">
 
-    <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
+        <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
 
-        <div fxFlex fxLayout="row" fxLayoutAlign="start center">
+            <div fxFlex fxLayout="row" fxLayoutAlign="start center">
+
+                <!-- DUE DATE -->
+                <div class="due-date" fxFlex="0 1 auto">
+
+                    <button *ngIf="card.due" md-icon-button class="" [mdMenuTriggerFor]="dueDateMenu">
+                        <md-icon>today</md-icon>
+                    </button>
+
+                    <md-menu #dueDateMenu="mdMenu" [overlapTrigger]="false">
+                        <button md-menu-item (click)="removeDueDate()">Remove Due Date</button>
+                    </md-menu>
+
+                    <md2-datepicker *ngIf="!card.due" [(ngModel)]="card.due" openOnFocus="true" placeholder="Set Date/Time" type="datetime"></md2-datepicker>
+                </div>
+                <!-- / DUE DATE -->
+
+                <!-- LABELS -->
+                <div class="labels" fxFlex="0 1 auto">
+
+                    <button md-icon-button [mdMenuTriggerFor]="labelsMenu">
+                        <md-icon>label</md-icon>
+                    </button>
+
+                    <md-menu #labelsMenu="mdMenu" [overlapTrigger]="false" class="scrumboard-labels-menu">
+
+                        <fuse-scrumboard-label-selector [card]="card" (onCardLabelsChange)="updateCard()"></fuse-scrumboard-label-selector>
+
+                    </md-menu>
+                </div>
+                <!-- / LABELS -->
+
+                <!-- MEMBERS -->
+                <div class="members" fxFlex="0 1 auto">
+
+                    <button md-icon-button class="" [mdMenuTriggerFor]="membersMenu">
+                        <md-icon>account_circle</md-icon>
+                    </button>
+
+                    <md-menu #membersMenu="mdMenu" [overlapTrigger]="false">
+                        <div fxFlex fxLayout="column" class="scrumboard-members-menu" (click)="$event.stopPropagation()">
+                            <md-checkbox class="member px-12" [checked]="card.idMembers.indexOf(member.id) > -1"
+                                         *ngFor="let member of board.members"
+                                         (change)="toggleInArray(member.id, card.idMembers);updateCard()">
+                                <div fxLayout="row" fxLayoutAlign="start center">
+                                    <img [alt]="member.name" [src]=" member.avatar" class="avatar"/>
+                                    <p class="member-name">{{ member.name }}</p>
+                                </div>
+                            </md-checkbox>
+                        </div>
+                    </md-menu>
+                </div>
+                <!-- / MEMBERS -->
+
+                <!-- ATTACHMENT -->
+                <button md-icon-button aria-label="Attachment">
+                    <md-icon>attachment</md-icon>
+                </button>
+                <!-- / ATTACHMENT -->
+
+                <!-- CHECKLIST -->
+                <div class="due-date " fxFlex="0 1 auto">
+
+                    <button md-icon-button class="" [mdMenuTriggerFor]="checklistMenu" #checklistMenuTrigger="mdMenuTrigger" (onMenuOpen)="onChecklistMenuOpen()">
+                        <md-icon>check_box</md-icon>
+                    </button>
+
+                    <md-menu #checklistMenu="mdMenu" [overlapTrigger]="false">
+
+                        <form class="px-16 py-8" #newChecklistForm="ngForm" (submit)="addChecklist(newChecklistForm)" (click)="$event.stopPropagation()"
+                              fxLayout="column" fxLayoutAlign="start end">
+
+                            <md-input-container floatPlaceholder="never" (click)="$event.stopPropagation()" fxFlex>
+                                <input #newCheckListTitleField mdInput ngModel #checklistTitle="ngModel" name="checklistTitle" placeholder="Checklist title" required>
+                            </md-input-container>
+
+                            <button md-raised-button class="mat-accent" aria-label="Add Checklist" [disabled]="!newChecklistForm.valid">Add Checklist</button>
+                        </form>
+
+                    </md-menu>
+                </div>
+                <!-- / CHECKLIST -->
+
+                <!-- SUBSCRIBE -->
+                <div class="subscribe " fxFlex="0 1 auto">
+                    <button md-icon-button class="" [mdMenuTriggerFor]="subscribeMenu">
+                        <md-icon>remove_red_eye</md-icon>
+                    </button>
+                    <md-menu #subscribeMenu="mdMenu" [overlapTrigger]="false">
+                        <button *ngIf="card.subscribed" md-menu-item (click)="toggleSubscribe()">
+                            Unsubscribe
+                        </button>
+                        <button *ngIf="!card.subscribed" md-menu-item (click)="toggleSubscribe()">
+                            Subscribe
+                        </button>
+                    </md-menu>
+                </div>
+                <!-- / SUBSCRIBE -->
+
+                <!-- OPTIONS -->
+                <div class="options " fxFlex="0 1 auto">
+                    <button md-icon-button class="" [mdMenuTriggerFor]="optionsMenu">
+                        <md-icon>more_horiz</md-icon>
+                    </button>
+                    <md-menu #optionsMenu="mdMenu" [overlapTrigger]="false">
+                        <button md-menu-item (click)="removeCard()">
+                            Remove Card
+                        </button>
+                    </md-menu>
+                </div>
+                <!-- / OPTIONS -->
+            </div>
+
+            <!-- CLOSE DIALOG BUTTON -->
+            <button md-icon-button (click)="dialogRef.close()" aria-label="Close Dialog">
+                <md-icon>close</md-icon>
+            </button>
+            <!-- / CLOSE DIALOG BUTTON -->
+        </div>
+    </md-toolbar>
+
+    <div *ngIf="card" md-dialog-content class="p-24 m-0" fusePerfectScrollbar>
+
+        <div fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="space-between center"
+             fxLayout.xs="column" fxLayoutAlign="center center">
+
+            <!-- BREADCRUMB -->
+            <div class="card-breadcrumb mb-16 mb-sm-0" fxLayout="row" fxLayoutAlign="start center">
+                <span>{{board.name}}</span>
+                <md-icon class="s-20">chevron_right</md-icon>
+                <span>{{list.name}}</span>
+            </div>
+            <!-- / BREADCRUMB -->
 
             <!-- DUE DATE -->
-            <div class="due-date" fxFlex="0 1 auto">
+            <div *ngIf="card.due" class="due-date" fxLayout="row" fxLayoutAlign="start center">
 
-                <button *ngIf="card.due" md-icon-button class="" [mdMenuTriggerFor]="dueDateMenu">
+                <md2-datepicker class="picker ml-8" [(ngModel)]="card.due" openOnFocus="true" type="datetime" format="dd/MM/y H:mm"></md2-datepicker>
-                    <md-icon>today</md-icon>
+
+                <button md-icon-button class="remove-due-date" (click)="removeDueDate()">
+                    <md-icon class="s-16">close</md-icon>
                 </button>
-
-                <md-menu #dueDateMenu="mdMenu" [overlapTrigger]="false">
-                    <button md-menu-item (click)="removeDueDate()">Remove Due Date</button>
-                </md-menu>
-
-                <md2-datepicker *ngIf="!card.due" [(ngModel)]="card.due" openOnFocus="true" placeholder="Set Date/Time" type="datetime"></md2-datepicker>
             </div>
             <!-- / DUE DATE -->
 
-            <!-- LABELS -->
-            <div class="labels" fxFlex="0 1 auto">
-
-                <button md-icon-button [mdMenuTriggerFor]="labelsMenu">
-                    <md-icon>label</md-icon>
-                </button>
-
-                <md-menu #labelsMenu="mdMenu" [overlapTrigger]="false" class="scrumboard-labels-menu">
-
-                    <fuse-scrumboard-label-selector [card]="card" (onCardLabelsChange)="updateCard()"></fuse-scrumboard-label-selector>
-
-                </md-menu>
-            </div>
-            <!-- / LABELS -->
-
-            <!-- MEMBERS -->
-            <div class="members" fxFlex="0 1 auto">
-
-                <button md-icon-button class="" [mdMenuTriggerFor]="membersMenu">
-                    <md-icon>account_circle</md-icon>
-                </button>
-
-                <md-menu #membersMenu="mdMenu" [overlapTrigger]="false">
-                    <div fxFlex fxLayout="column" class="scrumboard-members-menu" (click)="$event.stopPropagation()">
-                        <md-checkbox class="member px-12" [checked]="card.idMembers.indexOf(member.id) > -1"
-                                     *ngFor="let member of board.members"
-                                     (change)="toggleInArray(member.id, card.idMembers);updateCard()">
-                            <div fxLayout="row" fxLayoutAlign="start center">
-                                <img [alt]="member.name" [src]=" member.avatar" class="avatar"/>
-                                <p class="member-name">{{ member.name }}</p>
-                            </div>
-                        </md-checkbox>
-                    </div>
-                </md-menu>
-            </div>
-            <!-- / MEMBERS -->
-
-            <!-- ATTACHMENT -->
-            <button md-icon-button aria-label="Attachment">
-                <md-icon>attachment</md-icon>
-            </button>
-            <!-- / ATTACHMENT -->
-
-            <!-- CHECKLIST -->
-            <div class="due-date " fxFlex="0 1 auto">
-
-                <button md-icon-button class="" [mdMenuTriggerFor]="checklistMenu" #checklistMenuTrigger="mdMenuTrigger" (onMenuOpen)="onChecklistMenuOpen()">
-                    <md-icon>check_box</md-icon>
-                </button>
-
-                <md-menu #checklistMenu="mdMenu" [overlapTrigger]="false">
-
-                    <form class="px-16 py-8" #newChecklistForm="ngForm" (submit)="addChecklist(newChecklistForm)" (click)="$event.stopPropagation()"
-                          fxLayout="column" fxLayoutAlign="start end">
-
-                        <md-input-container floatPlaceholder="never" (click)="$event.stopPropagation()" fxFlex>
-                            <input #newCheckListTitleField mdInput ngModel #checklistTitle="ngModel" name="checklistTitle" placeholder="Checklist title" required>
-                        </md-input-container>
-
-                        <button md-raised-button class="mat-accent" aria-label="Add Checklist" [disabled]="!newChecklistForm.valid">Add Checklist</button>
-                    </form>
-
-                </md-menu>
-            </div>
-            <!-- / CHECKLIST -->
-
-            <!-- SUBSCRIBE -->
-            <div class="subscribe " fxFlex="0 1 auto">
-                <button md-icon-button class="" [mdMenuTriggerFor]="subscribeMenu">
-                    <md-icon>remove_red_eye</md-icon>
-                </button>
-                <md-menu #subscribeMenu="mdMenu" [overlapTrigger]="false">
-                    <button *ngIf="card.subscribed" md-menu-item (click)="toggleSubscribe()">
-                        Unsubscribe
-                    </button>
-                    <button *ngIf="!card.subscribed" md-menu-item (click)="toggleSubscribe()">
-                        Subscribe
-                    </button>
-                </md-menu>
-            </div>
-            <!-- / SUBSCRIBE -->
-
-            <!-- OPTIONS -->
-            <div class="options " fxFlex="0 1 auto">
-                <button md-icon-button class="" [mdMenuTriggerFor]="optionsMenu">
-                    <md-icon>more_horiz</md-icon>
-                </button>
-                <md-menu #optionsMenu="mdMenu" [overlapTrigger]="false">
-                    <button md-menu-item (click)="removeCard()">
-                        Remove Card
-                    </button>
-                </md-menu>
-            </div>
-            <!-- / OPTIONS -->
         </div>
 
-        <!-- CLOSE DIALOG BUTTON -->
+        <!-- NAME -->
-        <button md-icon-button (click)="dialogRef.close()" aria-label="Close Dialog">
+        <div fxLayout="row" fxLayoutAlign="start center">
-            <md-icon>close</md-icon>
+            <md-icon *ngIf="card.subscribed" class="card-subscribe s-20 mr-12">remove_red_eye</md-icon>
-        </button>
+            <div class="card-name">
-        <!-- / CLOSE DIALOG BUTTON -->
+                <md-input-container floatPlaceholder="never" fxFlex>
-    </div>
+                    <input mdInput [(ngModel)]="card.name" placeholder="Title" required (change)="updateCard()">
-</md-toolbar>
+                </md-input-container>
-
+            </div>
-<div *ngIf="card" md-dialog-content class="p-24 m-0" fusePerfectScrollbar>
-
-    <div fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="space-between center"
-         fxLayout.xs="column" fxLayoutAlign="center center">
-
-        <!-- BREADCRUMB -->
-        <div class="card-breadcrumb mb-16 mb-sm-0" fxLayout="row" fxLayoutAlign="start center">
-            <span>{{board.name}}</span>
-            <md-icon class="s-20">chevron_right</md-icon>
-            <span>{{list.name}}</span>
         </div>
-        <!-- / BREADCRUMB -->
+        <!-- / NAME -->
 
-        <!-- DUE DATE -->
+        <!-- DESCRIPTION -->
-        <div *ngIf="card.due" class="due-date" fxLayout="row" fxLayoutAlign="start center">
+        <div class="description">
-
+            <md-input-container fxFlex>
-            <md2-datepicker class="picker ml-8" [(ngModel)]="card.due" openOnFocus="true" type="datetime" format="dd/MM/y H:mm"></md2-datepicker>
+                <textarea mdInput [(ngModel)]="card.description" placeholder="Description" columns="1" md-maxlength="150" max-rows="4" (change)="updateCard()"></textarea>
-
-            <button md-icon-button class="remove-due-date" (click)="removeDueDate()">
-                <md-icon class="s-16">close</md-icon>
-            </button>
-        </div>
-        <!-- / DUE DATE -->
-
-    </div>
-
-    <!-- NAME -->
-    <div fxLayout="row" fxLayoutAlign="start center">
-        <md-icon *ngIf="card.subscribed" class="card-subscribe s-20 mr-12">remove_red_eye</md-icon>
-        <div class="card-name">
-            <md-input-container floatPlaceholder="never" fxFlex>
-                <input mdInput [(ngModel)]="card.name" placeholder="Title" required (change)="updateCard()">
             </md-input-container>
         </div>
-    </div>
+        <!-- / DESCRIPTION -->
-    <!-- / NAME -->
 
-    <!-- DESCRIPTION -->
+        <!-- SECTIONS -->
-    <div class="description">
+        <div class="sections">
-        <md-input-container fxFlex>
-            <textarea mdInput [(ngModel)]="card.description" placeholder="Description" columns="1" md-maxlength="150" max-rows="4" (change)="updateCard()"></textarea>
-        </md-input-container>
-    </div>
-    <!-- / DESCRIPTION -->
 
-    <!-- SECTIONS -->
+            <!-- LABELS SECTION -->
-    <div class="sections">
+            <div *ngIf="card.idLabels[0] || card.idMembers[0]" class="section"
+                 fxLayout="column" fxLayout.gt-xs="row">
 
-        <!-- LABELS SECTION -->
+                <div *ngIf="card.idLabels[0]" fxFlex class="labels">
-        <div *ngIf="card.idLabels[0] || card.idMembers[0]" class="section"
+                    <div class="section-header" fxLayout="row" fxLayoutAlign="start center">
-             fxLayout="column" fxLayout.gt-xs="row">
+                        <md-icon class="s-20">label</md-icon>
-
+                        <span class="section-title">Labels</span>
-            <div *ngIf="card.idLabels[0]" fxFlex class="labels">
+                    </div>
-                <div class="section-header" fxLayout="row" fxLayoutAlign="start center">
+                    <div class="section-content">
-                    <md-icon class="s-20">label</md-icon>
+                        <md-chip-list class="label-chips">
-                    <span class="section-title">Labels</span>
+                            <md-chip class="label-chip mb-4"
+                                     *ngFor="let labelId of card.idLabels"
+                                     [class]="board.labels | getById:labelId:'color'"
+                                     fxLayout="row" fxLayoutAlign="start center">
+                                <span>{{board.labels|getById:labelId:'name'}}</span>
+                                <md-icon class="ml-8 s-16 chip-remove" (click)="toggleInArray(labelId, card.idLabels);updateCard()">close</md-icon>
+                            </md-chip>
+                        </md-chip-list>
+                    </div>
                 </div>
-                <div class="section-content">
+
-                    <md-chip-list class="label-chips">
+                <div *ngIf="card.idMembers[0]" fxFlex class="members">
-                        <md-chip class="label-chip mb-4"
+                    <div class="section-header" fxLayout="row" fxLayoutAlign="start center">
-                                 *ngFor="let labelId of card.idLabels"
+                        <md-icon class="s-20">supervisor_account</md-icon>
-                                 [class]="board.labels | getById:labelId:'color'"
+                        <span class="section-title">Members</span>
-                                 fxLayout="row" fxLayoutAlign="start center">
+                    </div>
-                            <span>{{board.labels|getById:labelId:'name'}}</span>
+                    <div class="section-content">
-                            <md-icon class="ml-8 s-16 chip-remove" (click)="toggleInArray(labelId, card.idLabels);updateCard()">close</md-icon>
+                        <md-chip-list class="member-chips">
-                        </md-chip>
+                            <md-chip class="member-chip mb-4" *ngFor="let memberId of card.idMembers"
-                    </md-chip-list>
+                                     fxLayout="row" fxLayoutAlign="start center">
+                                <img class="member-chip-avatar" [src]="board.members | getById:memberId:'avatar'"
+                                     [md-tooltip]="board.members | getById:memberId:'name'">
+                                <md-icon class="ml-8 s-16 chip-remove" (click)="toggleInArray(memberId, card.idMembers);updateCard()">close</md-icon>
+                            </md-chip>
+                        </md-chip-list>
+                    </div>
                 </div>
             </div>
+            <!-- / LABELS SECTION -->
 
-            <div *ngIf="card.idMembers[0]" fxFlex class="members">
+            <!-- ATTACHMENTS SECTION -->
-                <div class="section-header" fxLayout="row" fxLayoutAlign="start center">
+            <div *ngIf="card.attachments[0]" class="section">
-                    <md-icon class="s-20">supervisor_account</md-icon>
-                    <span class="section-title">Members</span>
-                </div>
-                <div class="section-content">
-                    <md-chip-list class="member-chips">
-                        <md-chip class="member-chip mb-4" *ngFor="let memberId of card.idMembers"
-                                 fxLayout="row" fxLayoutAlign="start center">
-                            <img class="member-chip-avatar" [src]="board.members | getById:memberId:'avatar'"
-                                 [md-tooltip]="board.members | getById:memberId:'name'">
-                            <md-icon class="ml-8 s-16 chip-remove" (click)="toggleInArray(memberId, card.idMembers);updateCard()">close</md-icon>
-                        </md-chip>
-                    </md-chip-list>
-                </div>
-            </div>
-        </div>
-        <!-- / LABELS SECTION -->
 
-        <!-- ATTACHMENTS SECTION -->
+                <div class="attachments">
-        <div *ngIf="card.attachments[0]" class="section">
 
-            <div class="attachments">
+                    <div class="section-header" fxLayout="row" fxLayoutAlign="start center">
-
+                        <md-icon class="s-20">attachment</md-icon>
-                <div class="section-header" fxLayout="row" fxLayoutAlign="start center">
+                        <span class="section-title">Attachments</span>
-                    <md-icon class="s-20">attachment</md-icon>
-                    <span class="section-title">Attachments</span>
-                </div>
-
-                <div class="section-content">
-
-                    <div class="attachment" *ngFor="let item of card.attachments" [ngSwitch]="item.type">
-
-                        <div *ngSwitchCase="'image'"
-                             fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="start center"
-                             fxLayout="column" fxLayoutAlign="center start">
-
-                            <div class="attachment-preview mat-elevation-z2"
-                                 [ngStyle]="{'background-image': 'url('+item.src+')'}">
-                            </div>
-
-                            <div class="attachment-content" fxLayout="column">
-
-                                <div fxLayout="row" fxLayoutAlign="start center">
-                                    <span class="attachment-name">{{item.name}}</span>
-                                    <md-icon *ngIf="card.idAttachmentCover === item.id"
-                                             class="yellow-700-fg attachment-is-cover s-20">star
-                                    </md-icon>
-                                </div>
-
-                                <span class="attachment-time">{{item.time}}</span>
-
-                                <div>
-                                    <button md-raised-button class="attachment-actions-button" [mdMenuTriggerFor]="attachmentActionsMenu">
-                                        <span fxLayout="row" fxLayoutAlign="center center">
-                                            <span>Actions</span>
-                                            <md-icon class="s-20">arrow_drop_down</md-icon>
-                                        </span>
-                                    </button>
-                                    <md-menu #attachmentActionsMenu="mdMenu">
-                                        <button md-menu-item (click)="toggleCoverImage(item.id)">
-                                            <span *ngIf="card.idAttachmentCover !== item.id">Make Cover</span>
-                                            <span *ngIf="card.idAttachmentCover === item.id">Remove Cover</span>
-                                        </button>
-                                        <button md-menu-item (click)="removeAttachment(item)">
-                                            Remove Attachment
-                                        </button>
-                                    </md-menu>
-                                </div>
-
-                            </div>
-                        </div>
-
-                        <div *ngSwitchCase="'link'" fxLayout="row">
-                            <div class="attachment-preview mat-elevation-z2" fxLayout="column"
-                                 fxLayoutAlign="center center">
-                                <span>LINK</span>
-                            </div>
-                            <div class="attachment-content" fxLayout="column">
-                                <span class="attachment-url">{{item.url}}</span>
-                                <span class="attachment-time">{{item.time}}</span>
-                            </div>
-                        </div>
                     </div>
 
-                    <button md-button class="add-attachment-button" aria-label="add attachment">
+                    <div class="section-content">
-                        <div fxLayout="row" fxLayoutAlign="start center">
+
-                            <md-icon class="s-20">add</md-icon>
+                        <div class="attachment" *ngFor="let item of card.attachments" [ngSwitch]="item.type">
-                            <span>Add an attachment</span>
+
+                            <div *ngSwitchCase="'image'"
+                                 fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="start center"
+                                 fxLayout="column" fxLayoutAlign="center start">
+
+                                <div class="attachment-preview mat-elevation-z2"
+                                     [ngStyle]="{'background-image': 'url('+item.src+')'}">
+                                </div>
+
+                                <div class="attachment-content" fxLayout="column">
+
+                                    <div fxLayout="row" fxLayoutAlign="start center">
+                                        <span class="attachment-name">{{item.name}}</span>
+                                        <md-icon *ngIf="card.idAttachmentCover === item.id"
+                                                 class="yellow-700-fg attachment-is-cover s-20">star
+                                        </md-icon>
+                                    </div>
+
+                                    <span class="attachment-time">{{item.time}}</span>
+
+                                    <div>
+                                        <button md-raised-button class="attachment-actions-button" [mdMenuTriggerFor]="attachmentActionsMenu">
+                                            <span fxLayout="row" fxLayoutAlign="center center">
+                                                <span>Actions</span>
+                                                <md-icon class="s-20">arrow_drop_down</md-icon>
+                                            </span>
+                                        </button>
+                                        <md-menu #attachmentActionsMenu="mdMenu">
+                                            <button md-menu-item (click)="toggleCoverImage(item.id)">
+                                                <span *ngIf="card.idAttachmentCover !== item.id">Make Cover</span>
+                                                <span *ngIf="card.idAttachmentCover === item.id">Remove Cover</span>
+                                            </button>
+                                            <button md-menu-item (click)="removeAttachment(item)">
+                                                Remove Attachment
+                                            </button>
+                                        </md-menu>
+                                    </div>
+
+                                </div>
+                            </div>
+
+                            <div *ngSwitchCase="'link'" fxLayout="row">
+                                <div class="attachment-preview mat-elevation-z2" fxLayout="column"
+                                     fxLayoutAlign="center center">
+                                    <span>LINK</span>
+                                </div>
+                                <div class="attachment-content" fxLayout="column">
+                                    <span class="attachment-url">{{item.url}}</span>
+                                    <span class="attachment-time">{{item.time}}</span>
+                                </div>
+                            </div>
                         </div>
-                    </button>
-                </div>
-            </div>
-        </div>
-        <!-- / ATTACHMENTS SECTION -->
 
-        <!-- CHECKLISTS SECTION -->
+                        <button md-button class="add-attachment-button" aria-label="add attachment">
-        <div class="section" *ngFor="let checklist of card.checklists">
+                            <div fxLayout="row" fxLayoutAlign="start center">
-
+                                <md-icon class="s-20">add</md-icon>
-            <div class="checklist">
+                                <span>Add an attachment</span>
-
+                            </div>
-                <div class="section-header" fxLayout="row" fxLayoutAlign="start center">
-
-                    <md-icon class="s-20">check_box</md-icon>
-
-                    <span fxFlex class="section-title">{{checklist.name}}</span>
-
-
-                    <div>
-                        <button md-icon-button class="checklist-actions-button" [mdMenuTriggerFor]="checklistActionsMenu">
-                            <md-icon class="s-20">more_vert</md-icon>
                         </button>
-                        <md-menu #checklistActionsMenu="mdMenu">
-                            <button md-menu-item (click)="removeChecklist(checklist)">
-                                <md-icon>delete</md-icon>
-                                <span>Remove Checklist</span>
-                            </button>
-                        </md-menu>
                     </div>
-
                 </div>
+            </div>
+            <!-- / ATTACHMENTS SECTION -->
 
-                <div class="section-content">
+            <!-- CHECKLISTS SECTION -->
+            <div class="section" *ngFor="let checklist of card.checklists">
 
-                    <div class="checklist-progress" fxLayout="row" fxLayoutAlign="start center">
+                <div class="checklist">
 
-                        <span class="checklist-progress-value">
+                    <div class="section-header" fxLayout="row" fxLayoutAlign="start center">
-                            {{checklist.checkItemsChecked}} / {{checklist.checkItems.length}}
+
-                        </span>
+                        <md-icon class="s-20">check_box</md-icon>
+
+                        <span fxFlex class="section-title">{{checklist.name}}</span>
+
+
+                        <div>
+                            <button md-icon-button class="checklist-actions-button" [mdMenuTriggerFor]="checklistActionsMenu">
+                                <md-icon class="s-20">more_vert</md-icon>
+                            </button>
+                            <md-menu #checklistActionsMenu="mdMenu">
+                                <button md-menu-item (click)="removeChecklist(checklist)">
+                                    <md-icon>delete</md-icon>
+                                    <span>Remove Checklist</span>
+                                </button>
+                            </md-menu>
+                        </div>
 
-                        <md-progress-bar class="mat-accent checklist-progressbar" mode="determinate"
-                                         value="{{100 * checklist.checkItemsChecked / checklist.checkItems.length}}">
-                        </md-progress-bar>
                     </div>
 
-                    <div class="check-items">
+                    <div class="section-content">
 
-                        <div class="check-item" *ngFor="let checkItem of checklist.checkItems" fxLayout="row" fxLayoutAlign="space-between center">
+                        <div class="checklist-progress" fxLayout="row" fxLayoutAlign="start center">
 
-                            <div fxFlex fxLayout="row" fxLayoutAlign="start center">
+                            <span class="checklist-progress-value">
-                                <md-checkbox [(ngModel)]="checkItem.checked"
+                                {{checklist.checkItemsChecked}} / {{checklist.checkItems.length}}
-                                             (change)="updateCheckedCount(checklist)"
+                            </span>
-                                             aria-label="{{checkItem.name}}">
+
-                                </md-checkbox>
+                            <md-progress-bar class="mat-accent checklist-progressbar" mode="determinate"
-                                <md-input-container fxFlex class="mx-12">
+                                             value="{{100 * checklist.checkItemsChecked / checklist.checkItems.length}}">
-                                    <input mdInput [(ngModel)]="checkItem.name">
+                            </md-progress-bar>
+                        </div>
+
+                        <div class="check-items">
+
+                            <div class="check-item" *ngFor="let checkItem of checklist.checkItems" fxLayout="row" fxLayoutAlign="space-between center">
+
+                                <div fxFlex fxLayout="row" fxLayoutAlign="start center">
+                                    <md-checkbox [(ngModel)]="checkItem.checked"
+                                                 (change)="updateCheckedCount(checklist)"
+                                                 aria-label="{{checkItem.name}}">
+                                    </md-checkbox>
+                                    <md-input-container fxFlex class="mx-12">
+                                        <input mdInput [(ngModel)]="checkItem.name">
+                                    </md-input-container>
+                                </div>
+
+                                <button md-icon-button class="checklist-actions-button" (click)="removeChecklistItem(checkItem, checklist)">
+                                    <md-icon class="s-20">delete</md-icon>
+                                </button>
+
+                            </div>
+                        </div>
+
+                        <form #newCheckItemForm="ngForm" (submit)="addCheckItem(newCheckItemForm,checklist)" name="newCheckItemForm" class="new-check-item-form"
+                              fxLayout="row" fxLayoutAlign="start center">
+
+                            <div fxLayout="row" fxLayoutAlign="start center" fxFlex>
+                                <md-icon class="s-20">add</md-icon>
+
+                                <md-input-container class="no-errors-spacer mx-12" fxFlex>
+                                    <input mdInput ngModel #checkItem="ngModel" name="checkItem" placeholder="Add an item" autocomplete="off">
                                 </md-input-container>
                             </div>
 
-                            <button md-icon-button class="checklist-actions-button" (click)="removeChecklistItem(checkItem, checklist)">
+                            <button md-raised-button
-                                <md-icon class="s-20">delete</md-icon>
+                                    [disabled]="!newCheckItemForm.valid || newCheckItemForm.pristine"
-                            </button>
+                                    class="mat-accent" aria-label="Add">
-
-                        </div>
-                    </div>
-
-                    <form #newCheckItemForm="ngForm" (submit)="addCheckItem(newCheckItemForm,checklist)" name="newCheckItemForm" class="new-check-item-form"
-                          fxLayout="row" fxLayoutAlign="start center">
-
-                        <div fxLayout="row" fxLayoutAlign="start center" fxFlex>
-                            <md-icon class="s-20">add</md-icon>
-
-                            <md-input-container class="no-errors-spacer mx-12" fxFlex>
-                                <input mdInput ngModel #checkItem="ngModel" name="checkItem" placeholder="Add an item" autocomplete="off">
-                            </md-input-container>
-                        </div>
-
-                        <button md-raised-button
-                                [disabled]="!newCheckItemForm.valid || newCheckItemForm.pristine"
-                                class="mat-accent" aria-label="Add">
-                            <span>Add</span>
-                        </button>
-                    </form>
-
-                </div>
-            </div>
-        </div>
-        <!-- / CHECKLISTS SECTION -->
-
-        <!-- COMMENTS SECTION -->
-        <div class="section">
-
-            <div class="comments">
-
-                <div class="section-header" fxLayout="row" fxLayoutAlign="start center">
-                    <md-icon class="s-20">comment</md-icon>
-                    <span class="section-title">Comments</span>
-                </div>
-
-                <div class="section-content">
-                    <form name="cardCommentForm"
-                          #newCommentForm="ngForm" (submit)="addNewComment(newCommentForm)"
-                          ng-submit="vm.addNewComment(vm.newCommentText); vm.newCommentText =''"
-                          class="comment new-comment" fxLayout="column" fxLayoutAlign="start" no-validate>
-
-                        <div fxLayout="row">
-                            <img class="comment-member-avatar" src="assets/images/avatars/profile.jpg">
-                            <md-input-container fxFlex>
-                                <input mdInput name="newComment" ngModel #newComment="ngModel"
-                                       placeholder="Write a comment.." required>
-                            </md-input-container>
-                        </div>
-
-                        <div fxLayout="row" fxLayoutAlign="end center">
-                            <button md-raised-button class="mat-accent"
-                                    [disabled]="!newCommentForm.valid || newCommentForm.pristine"
-                                    aria-label="Add">
                                 <span>Add</span>
                             </button>
-                        </div>
+                        </form>
-                    </form>
 
-                    <div class="comment" fxLayout="row" *ngFor="let comment of card.comments">
+                    </div>
+                </div>
+            </div>
+            <!-- / CHECKLISTS SECTION -->
 
-                        <img class="comment-member-avatar"
+            <!-- COMMENTS SECTION -->
-                             [src]="board.members | getById: comment.idMember:'avatar'">
+            <div class="section">
 
-                        <div fxLayout="column">
+                <div class="comments">
-                            <div class="comment-member-name">
+
-                                {{board.members | getById: comment.idMember:'name'}}
+                    <div class="section-header" fxLayout="row" fxLayoutAlign="start center">
+                        <md-icon class="s-20">comment</md-icon>
+                        <span class="section-title">Comments</span>
+                    </div>
+
+                    <div class="section-content">
+                        <form name="cardCommentForm"
+                              #newCommentForm="ngForm" (submit)="addNewComment(newCommentForm)"
+                              ng-submit="vm.addNewComment(vm.newCommentText); vm.newCommentText =''"
+                              class="comment new-comment" fxLayout="column" fxLayoutAlign="start" no-validate>
+
+                            <div fxLayout="row">
+                                <img class="comment-member-avatar" src="assets/images/avatars/profile.jpg">
+                                <md-input-container fxFlex>
+                                    <input mdInput name="newComment" ngModel #newComment="ngModel"
+                                           placeholder="Write a comment.." required>
+                                </md-input-container>
+                            </div>
+
+                            <div fxLayout="row" fxLayoutAlign="end center">
+                                <button md-raised-button class="mat-accent"
+                                        [disabled]="!newCommentForm.valid || newCommentForm.pristine"
+                                        aria-label="Add">
+                                    <span>Add</span>
+                                </button>
+                            </div>
+                        </form>
+
+                        <div class="comment" fxLayout="row" *ngFor="let comment of card.comments">
+
+                            <img class="comment-member-avatar"
+                                 [src]="board.members | getById: comment.idMember:'avatar'">
+
+                            <div fxLayout="column">
+                                <div class="comment-member-name">
+                                    {{board.members | getById: comment.idMember:'name'}}
+                                </div>
+                                <div class="comment-bubble">{{comment.message}}</div>
+                                <div class="comment-time secondary-text">{{comment.time}}</div>
                             </div>
-                            <div class="comment-bubble">{{comment.message}}</div>
-                            <div class="comment-time secondary-text">{{comment.time}}</div>
                         </div>
                     </div>
                 </div>
             </div>
-        </div>
+            <!-- / COMMENTS SECTION -->
-        <!-- / COMMENTS SECTION -->
 
-        <!-- ACTIVITIES SECTION -->
+            <!-- ACTIVITIES SECTION -->
-        <div *ngIf="card.activities[0]" class="section">
+            <div *ngIf="card.activities[0]" class="section">
 
-            <div class="activities">
+                <div class="activities">
 
-                <div class="section-header" fxLayout="row" fxLayoutAlign="start center">
+                    <div class="section-header" fxLayout="row" fxLayoutAlign="start center">
-                    <md-icon class="s-20">list</md-icon>
+                        <md-icon class="s-20">list</md-icon>
-                    <span class="section-title">Activity</span>
+                        <span class="section-title">Activity</span>
-                </div>
-
-                <div class="section-content">
-                    <div class="activity" fxLayout="row" fxLayoutAlign="start center" *ngFor="let activity of card.activities">
-                        <img class="activity-member-avatar"
-                             [src]="board.members| getById:activity.idMember:'avatar'">
-                        <div class="activity-member-name">{{board.members| getById:activity.idMember:'name'}}</div>
-                        <div class="activity-message">{{activity.message}}</div>
-                        <div class="activity-time secondary-text">{{activity.time}}</div>
                     </div>
+
+                    <div class="section-content">
+                        <div class="activity" fxLayout="row" fxLayoutAlign="start center" *ngFor="let activity of card.activities">
+                            <img class="activity-member-avatar"
+                                 [src]="board.members| getById:activity.idMember:'avatar'">
+                            <div class="activity-member-name">{{board.members| getById:activity.idMember:'name'}}</div>
+                            <div class="activity-message">{{activity.message}}</div>
+                            <div class="activity-time secondary-text">{{activity.time}}</div>
+                        </div>
+                    </div>
+
                 </div>
-
             </div>
-        </div>
+            <!-- / ACTIVITIES SECTION -->
-        <!-- / ACTIVITIES SECTION -->
 
+        </div>
+        <!-- / SECTIONS -->
     </div>
-    <!-- / SECTIONS -->
 </div>

src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.scss

@@ -1,10 +1,5 @@
 @import "src/app/core/scss/fuse";
 
-:host {
-    display: flex;
-    flex-direction: column;
-}
-
 .scrumboard-card-dialog {
 
     .mat-dialog-container {
@@ -387,6 +382,12 @@
         }
 
     }
+
+    .dialog-content-wrapper {
+        max-height: 85vh;
+        display: flex;
+        flex-direction: column;
+    }
 }
 
 .scrumboard-members-menu {