fix(mail(js)): add collapse button to toolbar of HTML editor

It is useful on small screens to be able to collapse the toolbar.

UI/WebServerResources/js/Common/sgCkeditor.component.js

@@ -18,20 +18,16 @@
     // Default plugins that have successfully passed through Angular's $sanitize service
     var defaultConfiguration = {
       toolbarGroups: [
-        { name: 'basicstyles', groups: [ 'basicstyles' ] },
-        { name: 'colors' },
-        { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align' ] },
-        { name: 'links' },
-        { name: 'insert' },
-        { name: 'editing', groups: [ 'spellchecker' ] },
-        { name: 'styles' },
-        { name: 'mode' }
+        { name: 'basicstyles', groups: [ 'basicstyles', 'colors', 'list', 'indent', 'blocks', 'align', 'links', 'insert', 'spellchecker', 'styles', 'mode' ] }
       ],
 
       // The default plugins included in the basic setup define some buttons that
       // are not needed in a basic editor. They are removed here.
       removeButtons: 'Strike,Subscript,Superscript,BGColor,Anchor,Format,Image',
 
+      // Allow the toolbar to be collapsed (useful for small screens)
+      toolbarCanCollapse: true,
+
       // Dialog windows are also simplified.
       removeDialogTabs: 'link:advanced',
 

UI/WebServerResources/scss/views/MailerUI.scss

@@ -303,13 +303,18 @@ md-sidenav {
 
 // Message body container of mail composer dialog
 .sg-mail-editor-content {
+  margin-top: 0;
   margin-bottom: 0;
   .cke_chrome {
     border-color: transparent;
   }
   .cke_top {
-    position: sticky;
     top: 0;
+    position: sticky;
+  }
+  // Fix margin of toolbar collapser button
+  a.cke_toolbox_collapser {
+    margin: 4px 2px;
   }
 }