Fixed: Mail Compose dialog responsive issues

+ Added Show/Hide CC & BCC fields toggle button

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

@@ -28,7 +28,12 @@
                        type="email" required>
             </mat-form-field>
 
-            <mat-form-field>
+            <div class="show-hide-extra-fields" (click)="toggleExtraToFields()">
+                <span [fxShow]="!showExtraToFields">Show CC & BCC</span>
+                <span [fxShow]="showExtraToFields">Hide CC & BCC</span>
+            </div>
+
+            <mat-form-field [fxShow]="showExtraToFields">
                 <input matInput
                        name="cc"
                        placeholder="Cc"
@@ -36,7 +41,7 @@
                        type="email">
             </mat-form-field>
 
-            <mat-form-field>
+            <mat-form-field [fxShow]="showExtraToFields">
                 <input matInput
                        name="bcc"
                        placeholder="Bcc"
@@ -51,11 +56,11 @@
             </mat-form-field>
 
             <mat-form-field>
-            <textarea matInput name="message"
+                <textarea matInput name="message"
-                      placeholder="Message"
+                          placeholder="Message"
-                      formControlName="message"
+                          formControlName="message"
-                      rows="6">
+                          rows="6">
-            </textarea>
+                </textarea>
             </mat-form-field>
 
             <div class="attachment-list">

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

@@ -1,7 +1,17 @@
+@import "src/app/core/scss/fuse";
+
 .mail-compose-dialog {
+
+    @include media-breakpoint('xs') {
+        width: 100%;
+    }
+
+    @include media-breakpoint-up('sm') {
+        width: 640px;
+    }
+
     .mat-dialog-container {
         padding: 0;
-        width: 720px;
 
         .compose-form {
 
@@ -9,6 +19,12 @@
                 width: 100%;
             }
 
+            .show-hide-extra-fields {
+                text-align: right;
+                cursor: pointer;
+                font-size: 12px;
+            }
+
             .attachment-list {
                 font-size: 13px;
                 padding-top: 16px;

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

@@ -10,6 +10,7 @@ import { FormControl, FormGroup } from '@angular/forms';
 })
 export class FuseMailComposeDialogComponent implements OnInit
 {
+    showExtraToFields = false;
     composeForm: FormGroup;
 
     constructor(
@@ -39,4 +40,8 @@ export class FuseMailComposeDialogComponent implements OnInit
         });
     }
 
+    toggleExtraToFields()
+    {
+        this.showExtraToFields = !this.showExtraToFields;
+    }
 }