From dc3741f436545e93777b5ae86f82d21ebef5f377 Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Wed, 14 Oct 2015 10:31:15 -0400
Subject: [PATCH] (html,js) Adjust padding of dialogs

Following this commit:
https://github.com/angular/material/commit/d2140b1565b7e91d4f0b11b6c3983b976abd00f8
---
 .../UIxContactFolderLinksTemplate.wox         |   4 +-
 .../ContactsUI/UIxContactsUserFolders.wox     |   2 +-
 UI/Templates/MailerUI/UIxMailEditor.wox       |   2 +-
 .../MailerUI/UIxMailUserDelegationEditor.wox  |  46 +-
 UI/Templates/MainUI/SOGoRootPage.wox          |   2 +-
 .../PreferencesUI/UIxAccountEditor.wox        |   2 +-
 .../PreferencesUI/UIxFilterEditor.wox         |   2 +-
 UI/Templates/PreferencesUI/UIxPreferences.wox |   2 +-
 .../UIxAppointmentEditorTemplate.wox          | 412 +++++++++---------
 .../UIxCalendarFolderLinksTemplate.wox        |   4 +-
 .../SchedulerUI/UIxCalendarProperties.wox     |   2 +-
 .../SchedulerUI/UIxTaskEditorTemplate.wox     | 410 ++++++++---------
 UI/Templates/UIxAclEditor.wox                 |   4 +-
 .../js/Common/Dialog.service.js               |   2 +-
 .../js/Contacts/AddressBooksController.js     |   2 +-
 .../js/Contacts/CardController.js             |   2 +-
 .../js/Mailer/MessageController.js            |   2 +-
 .../js/Scheduler/ComponentController.js       |   2 +-
 18 files changed, 452 insertions(+), 452 deletions(-)

diff --git a/UI/Templates/ContactsUI/UIxContactFolderLinksTemplate.wox b/UI/Templates/ContactsUI/UIxContactFolderLinksTemplate.wox
index db993e4b2..728201a57 100644
--- a/UI/Templates/ContactsUI/UIxContactFolderLinksTemplate.wox
+++ b/UI/Templates/ContactsUI/UIxContactFolderLinksTemplate.wox
@@ -20,8 +20,8 @@
       </div>
     </md-toolbar>
 
-    <md-dialog-content>
-      <div layout="column" layout-padding="layout-padding">
+    <md-dialog-content class="md-padding">
+      <div layout="column">
         <div class="sg-md-title"><var:string label:value="Authenticated User Access"/></div>
         <md-input-container>
           <label><var:string label:value="CardDAV URL"/></label>
diff --git a/UI/Templates/ContactsUI/UIxContactsUserFolders.wox b/UI/Templates/ContactsUI/UIxContactsUserFolders.wox
index bb79b38bd..a3e08485f 100644
--- a/UI/Templates/ContactsUI/UIxContactsUserFolders.wox
+++ b/UI/Templates/ContactsUI/UIxContactsUserFolders.wox
@@ -15,7 +15,7 @@
         </md-button>
       </div>
     </md-toolbar>
-    <md-dialog-content>
+    <md-dialog-content class="md-dialog-content">
       <md-input-container>
         <label><md-icon>search</md-icon><var:string label:value="Search User"/></label>
         <input type="input"
diff --git a/UI/Templates/MailerUI/UIxMailEditor.wox b/UI/Templates/MailerUI/UIxMailEditor.wox
index 30bea8ef4..588ae14ab 100644
--- a/UI/Templates/MailerUI/UIxMailEditor.wox
+++ b/UI/Templates/MailerUI/UIxMailEditor.wox
@@ -33,7 +33,7 @@
       </div>
     </md-toolbar>
 
-    <md-dialog-content>
+    <md-dialog-content class="md-padding">
       <header>
         <div class="msg-header-content">
 
diff --git a/UI/Templates/MailerUI/UIxMailUserDelegationEditor.wox b/UI/Templates/MailerUI/UIxMailUserDelegationEditor.wox
index c43792c02..9143cc286 100644
--- a/UI/Templates/MailerUI/UIxMailUserDelegationEditor.wox
+++ b/UI/Templates/MailerUI/UIxMailUserDelegationEditor.wox
@@ -20,7 +20,29 @@
       </div>
     </md-toolbar>
 
-    <md-dialog-content>
+    <md-dialog-content class="md-padding">
+      <div>
+        <md-autocomplete
+            class="md-flex"
+            md-input-name="addUser"
+            md-search-text="delegate.searchText"
+            md-selected-item="delegate.userToAdd"
+            md-selected-item-change="delegate.addUser(user)"
+            md-items="user in delegate.userFilter(delegate.searchText)"
+            md-item-text="user.empty"
+            md-min-length="3"
+            md-no-cache="true"
+            label:md-floating-label="Add User">
+          <span class="md-contact-suggestion" layout="row" layout-align="space-between center">
+            <span class="md-contact-name"
+                  md-highlight-text="delegate.searchText"
+                  md-highlight-flags="^i">{{user.cn}}</span> <span class="md-contact-email"
+                  md-highlight-text="delegate.searchText"
+                  md-highlight-flags="^i">{{user.c_email}}</span>
+          </span>
+        </md-autocomplete>
+      </div>
+
       <md-list>
         <md-list-item ng-repeat="user in delegate.users | orderBy:['userClass', 'displayName']">
           <div layout="row" layout-align="start center" class="md-flex card-picture">
@@ -38,27 +60,5 @@
         </md-list-item>
       </md-list>
     </md-dialog-content>
-
-    <div class="md-actions">
-      <md-autocomplete
-          class="md-flex"
-          md-input-name="addUser"
-          md-search-text="delegate.searchText"
-          md-selected-item="delegate.userToAdd"
-          md-selected-item-change="delegate.addUser(user)"
-          md-items="user in delegate.userFilter(delegate.searchText)"
-          md-item-text="user.empty"
-          md-min-length="3"
-          md-no-cache="true"
-          label:md-floating-label="Add User">
-        <span class="md-contact-suggestion" layout="row" layout-align="space-between center">
-          <span class="md-contact-name"
-                md-highlight-text="delegate.searchText"
-                md-highlight-flags="^i">{{user.cn}}</span> <span class="md-contact-email"
-                md-highlight-text="delegate.searchText"
-                md-highlight-flags="^i">{{user.c_email}}</span>
-        </span>
-      </md-autocomplete>
-    </div>
   </md-dialog>
 </container>
diff --git a/UI/Templates/MainUI/SOGoRootPage.wox b/UI/Templates/MainUI/SOGoRootPage.wox
index 10fd536c1..55761a8d1 100644
--- a/UI/Templates/MainUI/SOGoRootPage.wox
+++ b/UI/Templates/MainUI/SOGoRootPage.wox
@@ -101,7 +101,7 @@
 
   <script type="text/ng-template" id="aboutBox.html">
     <md-dialog flex="50" sm-flex="100">
-      <md-dialog-content>
+      <md-dialog-content class="md-dialog-content">
         <p><a href="http://sogo.nu/" target="_new">sogo.nu</a></p>
         <p>Version <var:string value="version"/> (<var:string value="buildDate" />)</p>
         <br/>
diff --git a/UI/Templates/PreferencesUI/UIxAccountEditor.wox b/UI/Templates/PreferencesUI/UIxAccountEditor.wox
index 379c0153e..b4ee5dd22 100644
--- a/UI/Templates/PreferencesUI/UIxAccountEditor.wox
+++ b/UI/Templates/PreferencesUI/UIxAccountEditor.wox
@@ -24,7 +24,7 @@
         </md-button>
       </div>
     </md-toolbar>
-    <md-dialog-content>
+    <md-dialog-content class="md-dialog-content">
 
       <form id="mainForm" name="accountForm" var:href="ownPath">
 
diff --git a/UI/Templates/PreferencesUI/UIxFilterEditor.wox b/UI/Templates/PreferencesUI/UIxFilterEditor.wox
index c337ee129..e065fc6e7 100644
--- a/UI/Templates/PreferencesUI/UIxFilterEditor.wox
+++ b/UI/Templates/PreferencesUI/UIxFilterEditor.wox
@@ -21,7 +21,7 @@
         </md-button>
       </div>
     </md-toolbar>
-    <md-dialog-content>
+    <md-dialog-content class="md-dialog-content">
       <script type="text/javascript">
         var filterId = '<var:string value="filterId"/>';
         var sieveFolderEncoding = '<var:string value="sieveFolderEncoding"/>';
diff --git a/UI/Templates/PreferencesUI/UIxPreferences.wox b/UI/Templates/PreferencesUI/UIxPreferences.wox
index 86545bf28..97fb98888 100644
--- a/UI/Templates/PreferencesUI/UIxPreferences.wox
+++ b/UI/Templates/PreferencesUI/UIxPreferences.wox
@@ -672,7 +672,7 @@
         <!-- MAIL > ACCOUNTS -->
         <md-tab id="mailAccountsTab"
                 aria-controls="mailAccountsTab-content"
-                label:label="Accounts">
+                label:label="IMAP Accounts">
 
           <md-list class="sg-padded">
             <md-list-item ng-repeat="item in
diff --git a/UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox b/UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox
index cb28c37c4..5261f343e 100644
--- a/UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox
+++ b/UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox
@@ -23,207 +23,207 @@
           </md-button>
         </div>
       </md-toolbar>
-    <md-dialog-content>
-      <!-- location -->
-      <md-input-container>
-        <label><var:string label:value="Location"/></label>
-        <input type="text" ng-model="editor.component.location"/>
-      </md-input-container>
-      <!-- calendar -->
-      <md-input-container>
-        <label><var:string label:value="Calendar"/></label>
-        <md-select ng-model="editor.component.destinationCalendar">
-          <md-option ng-repeat="calendar in ::editor.calendars"
-                     ng-value="calendar.id">{{calendar.name}}</md-option>
-        </md-select>
-      </md-input-container>
-      <!-- categories -->
-      <md-chips ng-model="editor.component.categories">
-        <md-autocomplete
-            md-selected-item="editor.categories.selected"
-            md-search-text="editor.categories.searchText"
-            md-items="category in editor.component.constructor.filterCategories(editor.categories.searchText)"
-            label:placeholder="Add a category">
-          <span md-highlight-text="editor.categories.searchText">{{category}}</span>
-        </md-autocomplete>
-      </md-chips>
-      <!-- classification -->
-      <md-radio-group layout="row" layout-align="space-around center"
-                      ng-model="editor.component.classification">
-        <md-radio-button value="public">
-          <var:string label:value="label_Public"/>
-        </md-radio-button>
-        <md-radio-button value="confidential">
-          <var:string label:value="label_Confidential"/>
-        </md-radio-button>
-        <md-radio-button value="private">
-          <var:string label:value="label_Private"/>
-        </md-radio-button>
-      </md-radio-group>
-      <!-- priority -->
-      <div class="pseudo-input-container">
-        <label class="pseudo-input-label"><var:string label:value="Priority"/></label>
-        <md-slider class="md-flex"
-                   md-discrete="true"
-                   ng-model="editor.component.priority"
-                   step="1"
-                   min="0"
-                   max="9"
-                   label:aria-label="Priority"><!-- slider --></md-slider>
-      </div>
-      <!-- is all day -->
-      <md-checkbox
-          ng-model="editor.component.isAllDay"
-          ng-true-value="1"
-          ng-false-value="0"
-          label:aria-label="All day Event">
-        <var:string label:value="All day Event"/>
-      </md-checkbox>
-      <!-- is transparent -->
-      <md-checkbox
-          ng-model="editor.component.isTransparent"
-          ng-true-value="1"
-          ng-false-value="0"
-          label:aria-label="Show Time as Free">
-        <var:string label:value="Show Time as Free"/>
-      </md-checkbox>
-      <!-- send appointment notifications -->
-      <md-checkbox
-          ng-model="editor.component.sendAppointmentNotifications"
-          ng-true-value="1"
-          ng-false-value="0"
-          label:aria-label="Send Appointment Notifications">
-        <var:string label:value="Send Appointment Notifications"/>
-      </md-checkbox>
-      <!-- start + end -->
-      <div layout="row">
-        <div flex="50">
-          <div class="pseudo-input-container">
-            <label class="pseudo-input-label"><var:string label:value="From"/></label>
+      <md-dialog-content class="md-dialog-content">
+        <!-- location -->
+        <md-input-container>
+          <label><var:string label:value="Location"/></label>
+          <input type="text" ng-model="editor.component.location"/>
+        </md-input-container>
+        <!-- calendar -->
+        <md-input-container>
+          <label><var:string label:value="Calendar"/></label>
+          <md-select ng-model="editor.component.destinationCalendar">
+            <md-option ng-repeat="calendar in ::editor.calendars"
+                       ng-value="calendar.id">{{calendar.name}}</md-option>
+          </md-select>
+        </md-input-container>
+        <!-- categories -->
+        <md-chips ng-model="editor.component.categories">
+          <md-autocomplete
+              md-selected-item="editor.categories.selected"
+              md-search-text="editor.categories.searchText"
+              md-items="category in editor.component.constructor.filterCategories(editor.categories.searchText)"
+              label:placeholder="Add a category">
+            <span md-highlight-text="editor.categories.searchText">{{category}}</span>
+          </md-autocomplete>
+        </md-chips>
+        <!-- classification -->
+        <md-radio-group layout="row" layout-align="space-around center"
+                        ng-model="editor.component.classification">
+          <md-radio-button value="public">
+            <var:string label:value="label_Public"/>
+          </md-radio-button>
+          <md-radio-button value="confidential">
+            <var:string label:value="label_Confidential"/>
+          </md-radio-button>
+          <md-radio-button value="private">
+            <var:string label:value="label_Private"/>
+          </md-radio-button>
+        </md-radio-group>
+        <!-- priority -->
+        <div class="pseudo-input-container">
+          <label class="pseudo-input-label"><var:string label:value="Priority"/></label>
+          <md-slider class="md-flex"
+                     md-discrete="true"
+                     ng-model="editor.component.priority"
+                     step="1"
+                     min="0"
+                     max="9"
+                     label:aria-label="Priority"><!-- slider --></md-slider>
+        </div>
+        <!-- is all day -->
+        <md-checkbox
+            ng-model="editor.component.isAllDay"
+            ng-true-value="1"
+            ng-false-value="0"
+            label:aria-label="All day Event">
+          <var:string label:value="All day Event"/>
+        </md-checkbox>
+        <!-- is transparent -->
+        <md-checkbox
+            ng-model="editor.component.isTransparent"
+            ng-true-value="1"
+            ng-false-value="0"
+            label:aria-label="Show Time as Free">
+          <var:string label:value="Show Time as Free"/>
+        </md-checkbox>
+        <!-- send appointment notifications -->
+        <md-checkbox
+            ng-model="editor.component.sendAppointmentNotifications"
+            ng-true-value="1"
+            ng-false-value="0"
+            label:aria-label="Send Appointment Notifications">
+          <var:string label:value="Send Appointment Notifications"/>
+        </md-checkbox>
+        <!-- start + end -->
+        <div layout="row">
+          <div flex="50">
+            <div class="pseudo-input-container">
+              <label class="pseudo-input-label"><var:string label:value="From"/></label>
+            </div>
+            <div layout="row" layout-align="start center" layout-wrap="layout-wrap">
+              <md-datepicker ng-model="editor.component.start"
+                             label:md-placeholder="From"> <!-- date picker--></md-datepicker>
+              <sg-timepicker ng-model="editor.component.start"
+                             ng-hide="editor.component.isAllDay"><!-- time picker --></sg-timepicker>
+            </div>
           </div>
-          <div layout="row" layout-align="start center" layout-wrap="layout-wrap">
-            <md-datepicker ng-model="editor.component.start"
-                           label:md-placeholder="From"> <!-- date picker--></md-datepicker>
-            <sg-timepicker ng-model="editor.component.start"
-                           ng-hide="editor.component.isAllDay"><!-- time picker --></sg-timepicker>
+          <div flex="50">
+            <div class="pseudo-input-container">
+              <label class="pseudo-input-label"><var:string label:value="To"/></label>
+            </div>
+            <div layout="row" layout-align="start center" layout-wrap="layout-wrap">
+              <md-datepicker ng-model="editor.component.end"
+                             label:md-placeholder="To"> <!-- date picker--></md-datepicker>
+              <sg-timepicker ng-model="editor.component.end"
+                             ng-hide="editor.component.isAllDay"><!-- time picker --></sg-timepicker>
+            </div>
           </div>
         </div>
-        <div flex="50">
-          <div class="pseudo-input-container">
-            <label class="pseudo-input-label"><var:string label:value="To"/></label>
-          </div>
-          <div layout="row" layout-align="start center" layout-wrap="layout-wrap">
-            <md-datepicker ng-model="editor.component.end"
-                           label:md-placeholder="To"> <!-- date picker--></md-datepicker>
-            <sg-timepicker ng-model="editor.component.end"
-                           ng-hide="editor.component.isAllDay"><!-- time picker --></sg-timepicker>
+        <!-- attach urls -->
+        <div class="attr" ng-repeat="attach in editor.component.attachUrls">
+          <div layout="row" layout-align="center end">
+            <md-input-container>
+              <label>
+                <var:string label:value="URL"/>
+              </label>
+              <input type="text" ng-model="attach.value"
+                     sg-focus-on="attachUrl_{{$index}}"/>
+            </md-input-container>
+            <md-button class="sg-icon-button" type="button" ng-click="editor.component.deleteAttachUrl($index)">
+              <md-icon>remove_circle</md-icon>
+            </md-button>
           </div>
         </div>
-      </div>
-      <!-- attach urls -->
-      <div class="attr" ng-repeat="attach in editor.component.attachUrls">
-        <div layout="row" layout-align="center end">
-          <md-input-container>
-            <label>
-              <var:string label:value="URL"/>
-            </label>
-            <input type="text" ng-model="attach.value"
-                   sg-focus-on="attachUrl_{{$index}}"/>
-          </md-input-container>
-          <md-button class="sg-icon-button" type="button" ng-click="editor.component.deleteAttachUrl($index)">
-            <md-icon>remove_circle</md-icon>
+        <div class="md-layout-margin" layout="row" layout-align="start center">
+          <md-button class="sg-icon-button" type="button" ng-click="editor.addAttachUrl($event)">
+            <md-icon>add_circle</md-icon>
+          </md-button>
+          <label class="button-label">
+            <var:string label:value="Attach"/>
+          </label>
+        </div>
+        <!-- comment -->
+        <md-input-container>
+          <label><var:string label:value="Description"/></label>
+          <textarea ng-model="editor.component.comment"><!-- comment --></textarea>
+        </md-input-container>
+        <!-- repeat -->
+        <div layout="row" layout-align="start end">
+          <div class="md-flex">
+            <md-input-container>
+              <label><var:string label:value="Repeat"/></label>
+              <md-select ng-model="editor.component.repeat.frequency" ng-disabled="editor.component.occurrenceId">
+                <var:foreach list="repeatList" item="item">
+                  <md-option var:value="item"><var:string var:value="itemRepeatText"/></md-option>
+                </var:foreach>
+              </md-select>
+            </md-input-container>
+          </div>
+          <md-button type="button" class="sg-icon-button"
+                     label:aria-label="repeat_CUSTOM"
+                     ng-disabled="editor.component.occurrenceId"
+                     ng-show="editor.component.repeat.frequency != 'never'"
+                     ng-click="editor.toggleRecurrenceEditor()">
+            <md-icon ng-class="{'md-rotate-45': editor.showRecurrenceEditor}">add</md-icon>
           </md-button>
         </div>
-      </div>
-      <div class="md-layout-margin" layout="row" layout-align="start center">
-        <md-button class="sg-icon-button" type="button" ng-click="editor.addAttachUrl($event)">
-          <md-icon>add_circle</md-icon>
-        </md-button>
-        <label class="button-label">
-          <var:string label:value="Attach"/>
-        </label>
-      </div>
-      <!-- comment -->
-      <md-input-container>
-        <label><var:string label:value="Description"/></label>
-        <textarea ng-model="editor.component.comment"><!-- comment --></textarea>
-      </md-input-container>
-      <!-- repeat -->
-      <div layout="row" layout-align="start end">
-        <div class="md-flex">
-          <md-input-container>
-            <label><var:string label:value="Repeat"/></label>
-            <md-select ng-model="editor.component.repeat.frequency" ng-disabled="editor.component.occurrenceId">
-              <var:foreach list="repeatList" item="item">
-                <md-option var:value="item"><var:string var:value="itemRepeatText"/></md-option>
-              </var:foreach>
-            </md-select>
+        <div ng-show="editor.showRecurrenceEditor" class="sg-subcontent">
+          <var:component className="UIxRecurrenceEditor" />
+        </div>
+        <!-- end repeat -->
+        <div layout="row" layout-align="start end">
+          <div ng-show="editor.component.repeat.frequency != 'never'">
+            <md-input-container>
+              <label><var:string label:value="End Repeat"/></label>
+              <md-select ng-model="editor.component.repeat.end"
+                         ng-disabled="editor.component.occurrenceId">
+                <md-option value="never"><var:string label:value="Never"/></md-option>
+                <md-option value="count"><var:string label:value="After"/></md-option>
+                <md-option value="until"><var:string label:value="On Date"/></md-option>
+              </md-select>
+            </md-input-container>
+          </div>
+          <div layout="row" layout-align="start center" ng-show="editor.component.repeat.end == 'count'">
+            <md-input-container class="md-input-number">
+              <input type="number" label:aria-label="times" ng-model="editor.component.repeat.count"/>
+            </md-input-container>
+            <var:string label:value="times"/>
+          </div>
+          <md-input-container ng-show="editor.component.repeat.end == 'until'">
+            <input type="date" label:aria-label="Repeat until" ng-model="editor.component.repeat.until"/>
           </md-input-container>
         </div>
-        <md-button type="button" class="sg-icon-button"
-                   label:aria-label="repeat_CUSTOM"
-                   ng-disabled="editor.component.occurrenceId"
-                   ng-show="editor.component.repeat.frequency != 'never'"
-                   ng-click="editor.toggleRecurrenceEditor()">
-          <md-icon ng-class="{'md-rotate-45': editor.showRecurrenceEditor}">add</md-icon>
-        </md-button>
-      </div>
-      <div ng-show="editor.showRecurrenceEditor" class="sg-subcontent">
-        <var:component className="UIxRecurrenceEditor" />
-      </div>
-      <!-- end repeat -->
-      <div layout="row" layout-align="start end">
-        <div ng-show="editor.component.repeat.frequency != 'never'">
-          <md-input-container>
-            <label><var:string label:value="End Repeat"/></label>
-            <md-select ng-model="editor.component.repeat.end"
-                       ng-disabled="editor.component.occurrenceId">
-              <md-option value="never"><var:string label:value="Never"/></md-option>
-              <md-option value="count"><var:string label:value="After"/></md-option>
-              <md-option value="until"><var:string label:value="On Date"/></md-option>
-            </md-select>
-          </md-input-container>
+        <!-- attendees -->
+        <div layout="row" layout-align="start start">
+          <md-autocomplete class="md-flex"
+                           label:md-floating-label="Invite Attendees"
+                           md-selected-item="attendeeToAdd"
+                           md-search-text="editor.searchText"
+                           md-selected-item-change="editor.addAttendee(card)"
+                           md-items="card in editor.cardFilter(editor.searchText)"
+                           md-item-text="card.empty"
+                           md-min-length="3"
+                           md-delay="300"
+                           md-no-cache="true"
+                           sg-enter="editor.addAttendee(editor.searchText)">
+            <md-item-template>
+              <div class="md-contact-suggestion">
+                <span class="md-contact-name"
+                      md-highlight-text="editor.searchText"
+                      md-highlight-flags="^i">{{card.$$fullname}}</span>
+                <span class="md-contact-email"
+                      md-highlight-text="editor.searchText"
+                      md-highlight-flags="^i">{{card.$$email}}</span>
+              </div>
+            </md-item-template>
+          </md-autocomplete>
+          <md-button type="button" class="sg-icon-button"
+                     label:aria-label="repeat_CUSTOM"
+                     ng-click="editor.toggleAttendeesEditor()">
+            <md-icon ng-class="{'md-rotate-180': editor.showAttendeesEditor}">expand_more</md-icon>
+          </md-button>
         </div>
-        <div layout="row" layout-align="start center" ng-show="editor.component.repeat.end == 'count'">
-          <md-input-container class="md-input-number">
-            <input type="number" label:aria-label="times" ng-model="editor.component.repeat.count"/>
-          </md-input-container>
-          <var:string label:value="times"/>
-        </div>
-        <md-input-container ng-show="editor.component.repeat.end == 'until'">
-          <input type="date" label:aria-label="Repeat until" ng-model="editor.component.repeat.until"/>
-        </md-input-container>
-      </div>
-      <!-- attendees -->
-      <div layout="row" layout-align="start start">
-        <md-autocomplete class="md-flex"
-                         label:md-floating-label="Invite Attendees"
-                         md-selected-item="attendeeToAdd"
-                         md-search-text="editor.searchText"
-                         md-selected-item-change="editor.addAttendee(card)"
-                         md-items="card in editor.cardFilter(editor.searchText)"
-                         md-item-text="card.empty"
-                         md-min-length="3"
-                         md-delay="300"
-                         md-no-cache="true"
-                         sg-enter="editor.addAttendee(editor.searchText)">
-          <md-item-template>
-            <div class="md-contact-suggestion">
-              <span class="md-contact-name"
-                    md-highlight-text="editor.searchText"
-                    md-highlight-flags="^i">{{card.$$fullname}}</span>
-              <span class="md-contact-email"
-                    md-highlight-text="editor.searchText"
-                    md-highlight-flags="^i">{{card.$$email}}</span>
-            </div>
-          </md-item-template>
-        </md-autocomplete>
-        <md-button type="button" class="sg-icon-button"
-                   label:aria-label="repeat_CUSTOM"
-                   ng-click="editor.toggleAttendeesEditor()">
-          <md-icon ng-class="{'md-rotate-180': editor.showAttendeesEditor}">expand_more</md-icon>
-        </md-button>
-      </div>
         <!-- md-contact-chips don't support "readonly", so we build them using md-chips
              in readonly mode and a template similar to the one of md-contact-chips -->
         <md-chips class="md-contact-chips sg-readonly"
@@ -241,19 +241,19 @@
                      ng-click="editor.component.deleteAttendee($chip)">close</md-icon>
           </md-chip-template>
         </md-chips>
-      <div ng-show="editor.showAttendeesEditor" class="attendees">
-         <var:component className="UIxAttendeesEditor" />
-      </div>
-      <!-- reminder -->
-      <md-checkbox ng-model="editor.component.$hasAlarm"
-                   label:aria-label="Reminder">
-        <var:string label:value="Reminder"/>
-      </md-checkbox>
-      <div class="sg-subcontent"
-           ng-show="editor.component.$hasAlarm">
-        <var:component className="UIxReminderEditor" />
-      </div>
-    </md-dialog-content>
+        <div ng-show="editor.showAttendeesEditor" class="attendees">
+          <var:component className="UIxAttendeesEditor" />
+        </div>
+        <!-- reminder -->
+        <md-checkbox ng-model="editor.component.$hasAlarm"
+                     label:aria-label="Reminder">
+          <var:string label:value="Reminder"/>
+        </md-checkbox>
+        <div class="sg-subcontent"
+             ng-show="editor.component.$hasAlarm">
+          <var:component className="UIxReminderEditor" />
+        </div>
+      </md-dialog-content>
       <!-- cancel/reset/save -->
       <div class="md-actions">
         <md-button type="button" ng-click="editor.cancel()">
@@ -267,6 +267,6 @@
           <var:string label:value="Save"/>
         </md-button>
       </div>
-  </form>
-</md-dialog>
+    </form>
+  </md-dialog>
 </container>
diff --git a/UI/Templates/SchedulerUI/UIxCalendarFolderLinksTemplate.wox b/UI/Templates/SchedulerUI/UIxCalendarFolderLinksTemplate.wox
index 32add212a..251610194 100644
--- a/UI/Templates/SchedulerUI/UIxCalendarFolderLinksTemplate.wox
+++ b/UI/Templates/SchedulerUI/UIxCalendarFolderLinksTemplate.wox
@@ -21,8 +21,8 @@
       </div>
     </md-toolbar>
 
-    <md-dialog-content>
-      <div  layout="column" layout-padding="layout-padding">
+    <md-dialog-content class="md-padding">
+      <div layout="column">
 
         <div layout="column" layout-padding="layout-padding">
           <md-input-container ng-show="links.calendar.isWebCalendar">
diff --git a/UI/Templates/SchedulerUI/UIxCalendarProperties.wox b/UI/Templates/SchedulerUI/UIxCalendarProperties.wox
index 3b0195f2a..fc406f467 100644
--- a/UI/Templates/SchedulerUI/UIxCalendarProperties.wox
+++ b/UI/Templates/SchedulerUI/UIxCalendarProperties.wox
@@ -25,7 +25,7 @@
       </div>
     </md-toolbar>
 
-    <md-dialog-content>
+    <md-dialog-content class="md-dialog-content">
       <md-checkbox
           ng-model="properties.calendar.includeInFreeBusy"
           ng-true-value="1"
diff --git a/UI/Templates/SchedulerUI/UIxTaskEditorTemplate.wox b/UI/Templates/SchedulerUI/UIxTaskEditorTemplate.wox
index 327c4735a..3b65ca7af 100644
--- a/UI/Templates/SchedulerUI/UIxTaskEditorTemplate.wox
+++ b/UI/Templates/SchedulerUI/UIxTaskEditorTemplate.wox
@@ -23,158 +23,158 @@
           </md-button>
         </div>
       </md-toolbar>
-    <md-dialog-content>
-      <!-- location -->
-      <md-input-container>
-        <label><var:string label:value="Location"/></label>
-        <input type="text" ng-model="editor.component.location"/>
-      </md-input-container>
-      <!-- categories -->
-      <md-chips ng-model="editor.component.categories">
-        <md-autocomplete
-            md-selected-item="editor.categories.selected"
-            md-search-text="editor.categories.searchText"
-            md-items="category in editor.component.constructor.filterCategories(editor.categories.searchText)"
-            label:placeholder="Add a category">
-          <span md-highlight-text="editor.categories.searchText">{{category}}</span>
-        </md-autocomplete>
-      </md-chips>
-      <!-- calendar -->
-      <md-input-container>
-        <label><var:string label:value="Calendar"/></label>
-        <md-select ng-model="editor.component.destinationCalendar">
-          <md-option ng-repeat="calendar in ::editor.calendars"
-                     ng-value="calendar.id">{{calendar.name}}</md-option>
-        </md-select>
-      </md-input-container>
-      <!-- classification -->
-      <md-radio-group layout="row" layout-align="space-around center"
-                      ng-model="editor.component.classification">
-        <md-radio-button value="public">
-          <var:string label:value="label_Public"/>
-        </md-radio-button>
-        <md-radio-button value="confidential">
-          <var:string label:value="label_Confidential"/>
-        </md-radio-button>
-        <md-radio-button value="private">
-          <var:string label:value="label_Private"/>
-        </md-radio-button>
-      </md-radio-group>
-      <!-- priority -->
-      <div layout="row" layout-align="center center">
-        <div flex="20"><var:string label:value="Priority"/></div>
-        <md-slider class="md-flex"
-                   md-discrete="true"
-                   ng-model="editor.component.priority"
-                   step="1"
-                   min="0"
-                   max="9"
-                   label:aria-label="Priority"><!-- slider --></md-slider>
-      </div>
-      <!-- is all day -->
-      <md-checkbox
-          ng-model="editor.component.isAllDay"
-          ng-true-value="1"
-          ng-false-value="0"
-          label:aria-label="All day Event">
-        <var:string label:value="All day Event"/>
-      </md-checkbox>
-      <!-- start -->
-      <div ng-show="editor.component.start">
-        <div class="pseudo-input-container">
-          <label class="pseudo-input-label"><var:string label:value="From"/></label>
-        </div>
-        <div layout="row" layout-align="start center" layout-wrap="layout-wrap">
-          <md-datepicker ng-model="editor.component.start"
-                         label:md-placeholder="From"> <!-- date picker--></md-datepicker>
-          <sg-timepicker ng-model="editor.component.start"><!-- time picker --></sg-timepicker>
-          <md-button class="md-icon-button" type="button" ng-click="editor.component.$deleteStartDate()">
-            <md-icon>remove_circle</md-icon>
-          </md-button>
-        </div>
-      </div>
-      <div class="md-layout-margin" layout="row" layout-align="start center" ng-hide="editor.component.start">
-        <md-button class="md-icon-button" type="button" ng-click="editor.component.$addStartDate()">
-          <md-icon>add_circle</md-icon>
-        </md-button>
-        <label class="button-label"><var:string label:value="Add From"/></label>
-      </div>
-      <!-- due -->
-      <div ng-show="editor.component.due">
-        <div class="pseudo-input-container">
-          <label class="pseudo-input-label"><var:string label:value="Due"/></label>
-        </div>
-        <div layout="row" layout-align="start center" layout-wrap="layout-wrap">
-          <md-datepicker ng-model="editor.component.due"
-                         label:md-placeholder="Due"> <!-- date picker--></md-datepicker>
-          <sg-timepicker ng-model="editor.component.due"><!-- time picker --></sg-timepicker>
-          <md-button class="md-icon-button" type="button" ng-click="editor.component.$deleteDueDate()">
-            <md-icon>remove_circle</md-icon>
-          </md-button>
-        </div>
-      </div>
-      <div class="md-layout-margin" layout="row" layout-align="start center" ng-hide="editor.component.due">
-        <md-button class="md-icon-button" type="button" ng-click="editor.component.$addDueDate()">
-          <md-icon>add_circle</md-icon>
-        </md-button>
-        <label class="button-label"><var:string label:value="Add Due"/></label>
-      </div>
-      <!-- status -->
-      <div layout="row">
-        <md-input-container flex="50">
-          <label><var:string label:value="Status"/></label>
-          <md-select ng-model="editor.component.status">
-            <var:foreach list="statusList" item="item">
-              <md-option var:value="item"><var:string value="itemStatusText"/></md-option>
-            </var:foreach>
+      <md-dialog-content class="md-dialog-content">
+        <!-- location -->
+        <md-input-container>
+          <label><var:string label:value="Location"/></label>
+          <input type="text" ng-model="editor.component.location"/>
+        </md-input-container>
+        <!-- categories -->
+        <md-chips ng-model="editor.component.categories">
+          <md-autocomplete
+              md-selected-item="editor.categories.selected"
+              md-search-text="editor.categories.searchText"
+              md-items="category in editor.component.constructor.filterCategories(editor.categories.searchText)"
+              label:placeholder="Add a category">
+            <span md-highlight-text="editor.categories.searchText">{{category}}</span>
+          </md-autocomplete>
+        </md-chips>
+        <!-- calendar -->
+        <md-input-container>
+          <label><var:string label:value="Calendar"/></label>
+          <md-select ng-model="editor.component.destinationCalendar">
+            <md-option ng-repeat="calendar in ::editor.calendars"
+                       ng-value="calendar.id">{{calendar.name}}</md-option>
           </md-select>
         </md-input-container>
-        <md-input-container ng-show="editor.component.status == 'completed'">
-          <label><var:string label:value="status_COMPLETED"/></label>
-          <input type="text" ng-model="editor.component.completedDate"/>
-        </md-input-container>
-      </div>
-      <div layout="row" layout-align="center center"
-           ng-show="editor.component.enablePercentComplete()">
-        <md-slider class="md-flex"
-                   md-discrete="true"
-                   ng-model="editor.component.percentComplete"
-                   step="5"
-                   min="0"
-                   max="100"
-                   label:aria-label="% complete"><!-- slider --></md-slider>
-        <div flex="30">{{editor.component.percentComplete}} <var:string label:value="% complete"/></div>
-      </div>
-      <!-- attach urls -->
-      <div class="attr" ng-repeat="attach in editor.component.attachUrls">
-        <div layout="row" layout-align="center end">
-          <md-input-container>
-            <label>
-              <var:string label:value="URL"/>
-            </label>
-            <input type="text" ng-model="attach.value"
-                   sg-focus-on="attachUrl_{{$index}}"/>
-          </md-input-container>
-          <md-button class="md-icon-button" type="button" ng-click="editor.component.deleteAttachUrl($index)">
-            <md-icon>remove_circle</md-icon>
-          </md-button>
+        <!-- classification -->
+        <md-radio-group layout="row" layout-align="space-around center"
+                        ng-model="editor.component.classification">
+          <md-radio-button value="public">
+            <var:string label:value="label_Public"/>
+          </md-radio-button>
+          <md-radio-button value="confidential">
+            <var:string label:value="label_Confidential"/>
+          </md-radio-button>
+          <md-radio-button value="private">
+            <var:string label:value="label_Private"/>
+          </md-radio-button>
+        </md-radio-group>
+        <!-- priority -->
+        <div layout="row" layout-align="center center">
+          <div flex="20"><var:string label:value="Priority"/></div>
+          <md-slider class="md-flex"
+                     md-discrete="true"
+                     ng-model="editor.component.priority"
+                     step="1"
+                     min="0"
+                     max="9"
+                     label:aria-label="Priority"><!-- slider --></md-slider>
         </div>
-      </div>
-      <div class="md-layout-margin" layout="row" layout-align="start center">
-        <md-button class="md-icon-button" type="button" ng-click="editor.addAttachUrl($event)">
-          <md-icon>add_circle</md-icon>
-        </md-button>
-        <label class="button-label">
-          <var:string label:value="Attach"/>
-        </label>
-      </div>
-      <!-- comment -->
-      <md-input-container>
-        <label><var:string label:value="Description"/></label>
-        <textarea ng-model="editor.component.comment"><!-- comment --></textarea>
-      </md-input-container>
-      <!-- repeat -->
-      <div layout="row" layout-align="start end">
+        <!-- is all day -->
+        <md-checkbox
+            ng-model="editor.component.isAllDay"
+            ng-true-value="1"
+            ng-false-value="0"
+            label:aria-label="All day Event">
+          <var:string label:value="All day Event"/>
+        </md-checkbox>
+        <!-- start -->
+        <div ng-show="editor.component.start">
+          <div class="pseudo-input-container">
+            <label class="pseudo-input-label"><var:string label:value="From"/></label>
+          </div>
+          <div layout="row" layout-align="start center" layout-wrap="layout-wrap">
+            <md-datepicker ng-model="editor.component.start"
+                           label:md-placeholder="From"> <!-- date picker--></md-datepicker>
+            <sg-timepicker ng-model="editor.component.start"><!-- time picker --></sg-timepicker>
+            <md-button class="md-icon-button" type="button" ng-click="editor.component.$deleteStartDate()">
+              <md-icon>remove_circle</md-icon>
+            </md-button>
+          </div>
+        </div>
+        <div class="md-layout-margin" layout="row" layout-align="start center" ng-hide="editor.component.start">
+          <md-button class="md-icon-button" type="button" ng-click="editor.component.$addStartDate()">
+            <md-icon>add_circle</md-icon>
+          </md-button>
+          <label class="button-label"><var:string label:value="Add From"/></label>
+        </div>
+        <!-- due -->
+        <div ng-show="editor.component.due">
+          <div class="pseudo-input-container">
+            <label class="pseudo-input-label"><var:string label:value="Due"/></label>
+          </div>
+          <div layout="row" layout-align="start center" layout-wrap="layout-wrap">
+            <md-datepicker ng-model="editor.component.due"
+                           label:md-placeholder="Due"> <!-- date picker--></md-datepicker>
+            <sg-timepicker ng-model="editor.component.due"><!-- time picker --></sg-timepicker>
+            <md-button class="md-icon-button" type="button" ng-click="editor.component.$deleteDueDate()">
+              <md-icon>remove_circle</md-icon>
+            </md-button>
+          </div>
+        </div>
+        <div class="md-layout-margin" layout="row" layout-align="start center" ng-hide="editor.component.due">
+          <md-button class="md-icon-button" type="button" ng-click="editor.component.$addDueDate()">
+            <md-icon>add_circle</md-icon>
+          </md-button>
+          <label class="button-label"><var:string label:value="Add Due"/></label>
+        </div>
+        <!-- status -->
+        <div layout="row">
+          <md-input-container flex="50">
+            <label><var:string label:value="Status"/></label>
+            <md-select ng-model="editor.component.status">
+              <var:foreach list="statusList" item="item">
+                <md-option var:value="item"><var:string value="itemStatusText"/></md-option>
+              </var:foreach>
+            </md-select>
+          </md-input-container>
+          <md-input-container ng-show="editor.component.status == 'completed'">
+            <label><var:string label:value="status_COMPLETED"/></label>
+            <input type="text" ng-model="editor.component.completedDate"/>
+          </md-input-container>
+        </div>
+        <div layout="row" layout-align="center center"
+             ng-show="editor.component.enablePercentComplete()">
+          <md-slider class="md-flex"
+                     md-discrete="true"
+                     ng-model="editor.component.percentComplete"
+                     step="5"
+                     min="0"
+                     max="100"
+                     label:aria-label="% complete"><!-- slider --></md-slider>
+          <div flex="30">{{editor.component.percentComplete}} <var:string label:value="% complete"/></div>
+        </div>
+        <!-- attach urls -->
+        <div class="attr" ng-repeat="attach in editor.component.attachUrls">
+          <div layout="row" layout-align="center end">
+            <md-input-container>
+              <label>
+                <var:string label:value="URL"/>
+              </label>
+              <input type="text" ng-model="attach.value"
+                     sg-focus-on="attachUrl_{{$index}}"/>
+            </md-input-container>
+            <md-button class="md-icon-button" type="button" ng-click="editor.component.deleteAttachUrl($index)">
+              <md-icon>remove_circle</md-icon>
+            </md-button>
+          </div>
+        </div>
+        <div class="md-layout-margin" layout="row" layout-align="start center">
+          <md-button class="md-icon-button" type="button" ng-click="editor.addAttachUrl($event)">
+            <md-icon>add_circle</md-icon>
+          </md-button>
+          <label class="button-label">
+            <var:string label:value="Attach"/>
+          </label>
+        </div>
+        <!-- comment -->
+        <md-input-container>
+          <label><var:string label:value="Description"/></label>
+          <textarea ng-model="editor.component.comment"><!-- comment --></textarea>
+        </md-input-container>
+        <!-- repeat -->
+        <div layout="row" layout-align="start end">
           <md-input-container>
             <label><var:string label:value="Repeat"/></label>
             <md-select class="pseudo-input-field" ng-model="editor.component.repeat.frequency">
@@ -183,62 +183,62 @@
               </var:foreach>
             </md-select>
           </md-input-container>
-        <div class="md-flex"><!-- spacer --></div>
-        <md-button type="button" class="md-icon-button"
-                   label:aria-label="repeat_CUSTOM"
-                   ng-show="editor.component.repeat.frequency != 'never'"
-                   ng-click="editor.toggleRecurrenceEditor()">
-          <md-icon ng-class="{'md-rotate-45': editor.showRecurrenceEditor}">add</md-icon>
+          <div class="md-flex"><!-- spacer --></div>
+          <md-button type="button" class="md-icon-button"
+                     label:aria-label="repeat_CUSTOM"
+                     ng-show="editor.component.repeat.frequency != 'never'"
+                     ng-click="editor.toggleRecurrenceEditor()">
+            <md-icon ng-class="{'md-rotate-45': editor.showRecurrenceEditor}">add</md-icon>
+          </md-button>
+        </div>
+        <div ng-show="editor.showRecurrenceEditor" class="sg-subcontent">
+          <var:component className="UIxRecurrenceEditor" />
+        </div>
+        <!-- end repeat -->
+        <div layout="row" layout-align="start end">
+          <div ng-show="editor.component.repeat.frequency != 'never'">
+            <md-input-container>
+              <label><var:string label:value="End Repeat"/></label>
+              <md-select class="pseudo-input-field" ng-model="editor.component.repeat.end">
+                <md-option value="never"><var:string label:value="Never"/></md-option>
+                <md-option value="count"><var:string label:value="After"/></md-option>
+                <md-option value="until"><var:string label:value="On Date"/></md-option>
+              </md-select>
+            </md-input-container>
+          </div>
+          <div layout="row" layout-align="start center" ng-show="editor.component.repeat.end == 'count'">
+            <md-input-container class="md-input-number">
+              <input type="number" label:aria-label="times" ng-model="editor.component.repeat.count"/>
+            </md-input-container>
+            <var:string label:value="times"/>
+          </div>
+          <md-input-container ng-show="editor.component.repeat.end == 'until'">
+            <input type="date" label:aria-label="Repeat until" ng-model="editor.component.repeat.until"/>
+          </md-input-container>
+        </div>
+        <!-- reminder -->
+        <md-checkbox ng-model="editor.component.$hasAlarm"
+                     label:aria-label="Reminder">
+          <var:string label:value="Reminder"/>
+        </md-checkbox>
+        <div class="sg-subcontent"
+             ng-show="editor.component.$hasAlarm">
+          <var:component className="UIxReminderEditor" />
+        </div>
+      </md-dialog-content>
+      <!-- cancel/reset/save -->
+      <div class="md-actions">
+        <md-button type="button" ng-click="editor.cancel()">
+          <var:string label:value="Cancel"/>
+        </md-button>
+        <md-button type="button" ng-click="editor.component.$reset()">
+          <var:string label:value="Reset"/>
+        </md-button>
+        <md-button class="md-primary md-hue-3" type="submit"
+                   ng-disabled="editor.eventForm.$invalid">
+          <var:string label:value="Save"/>
         </md-button>
       </div>
-      <div ng-show="editor.showRecurrenceEditor" class="sg-subcontent">
-        <var:component className="UIxRecurrenceEditor" />
-      </div>
-      <!-- end repeat -->
-      <div layout="row" layout-align="start end">
-        <div ng-show="editor.component.repeat.frequency != 'never'">
-          <md-input-container>
-            <label><var:string label:value="End Repeat"/></label>
-            <md-select class="pseudo-input-field" ng-model="editor.component.repeat.end">
-              <md-option value="never"><var:string label:value="Never"/></md-option>
-              <md-option value="count"><var:string label:value="After"/></md-option>
-              <md-option value="until"><var:string label:value="On Date"/></md-option>
-            </md-select>
-          </md-input-container>
-        </div>
-        <div layout="row" layout-align="start center" ng-show="editor.component.repeat.end == 'count'">
-          <md-input-container class="md-input-number">
-            <input type="number" label:aria-label="times" ng-model="editor.component.repeat.count"/>
-          </md-input-container>
-          <var:string label:value="times"/>
-        </div>
-        <md-input-container ng-show="editor.component.repeat.end == 'until'">
-          <input type="date" label:aria-label="Repeat until" ng-model="editor.component.repeat.until"/>
-        </md-input-container>
-      </div>
-      <!-- reminder -->
-      <md-checkbox ng-model="editor.component.$hasAlarm"
-                   label:aria-label="Reminder">
-        <var:string label:value="Reminder"/>
-      </md-checkbox>
-      <div class="sg-subcontent"
-           ng-show="editor.component.$hasAlarm">
-        <var:component className="UIxReminderEditor" />
-      </div>
-    </md-dialog-content>
-    <!-- cancel/reset/save -->
-    <div class="md-actions">
-      <md-button type="button" ng-click="editor.cancel()">
-        <var:string label:value="Cancel"/>
-      </md-button>
-      <md-button type="button" ng-click="editor.component.$reset()">
-        <var:string label:value="Reset"/>
-      </md-button>
-      <md-button class="md-primary md-hue-3" type="submit"
-                 ng-disabled="editor.eventForm.$invalid">
-        <var:string label:value="Save"/>
-      </md-button>
-    </div>
-  </form>
-</md-dialog>
+    </form>
+  </md-dialog>
 </container>
diff --git a/UI/Templates/UIxAclEditor.wox b/UI/Templates/UIxAclEditor.wox
index 14442a506..b300310a7 100644
--- a/UI/Templates/UIxAclEditor.wox
+++ b/UI/Templates/UIxAclEditor.wox
@@ -19,7 +19,7 @@
         </md-button>
       </div>
     </md-toolbar>
-    <md-dialog-content class="layout-padding">
+    <md-dialog-content class="md-padding">
       <div layout="row">
         <md-icon>search</md-icon>
         <md-autocomplete
@@ -94,7 +94,7 @@
       </md-card>
     </md-dialog-content>
 
-    <div ng-hide="acl.confirmation.showing" class="md-actions">
+    <div class="md-actions" ng-hide="acl.confirmation.showing">
       <md-button class="md-primary" ng-click="acl.saveModal()"><var:string label:value="Save"/></md-button>
     </div>
     <div class="md-actions" ng-show="acl.confirmation.showing">
diff --git a/UI/WebServerResources/js/Common/Dialog.service.js b/UI/WebServerResources/js/Common/Dialog.service.js
index dc290a021..ce5261455 100644
--- a/UI/WebServerResources/js/Common/Dialog.service.js
+++ b/UI/WebServerResources/js/Common/Dialog.service.js
@@ -58,7 +58,7 @@
       escapeToClose: true,
       template: [
         '<md-dialog flex="50" flex-sm="100">',
-        '  <md-dialog-content layout="column">',
+        '  <md-dialog-content class="md-dialog-content" layout="column">',
         '    <h2 class="md-title" ng-bind="title"></h2>',
         '    <md-input-container>',
         '      <label>' + label + '</label>',
diff --git a/UI/WebServerResources/js/Contacts/AddressBooksController.js b/UI/WebServerResources/js/Contacts/AddressBooksController.js
index 373012e83..c0de570c4 100644
--- a/UI/WebServerResources/js/Contacts/AddressBooksController.js
+++ b/UI/WebServerResources/js/Contacts/AddressBooksController.js
@@ -128,7 +128,7 @@
           '      </md-button>',
           '    </div>',
           '  </md-toolbar>',
-          '  <md-dialog-content>',
+          '  <md-dialog-content class="md-dialog-content">',
           '    <div layout="column">',
           '      <div layout="row" layout-align="start center">',
           '        <span>' + l('Select a vCard or LDIF file.') + '</span>',
diff --git a/UI/WebServerResources/js/Contacts/CardController.js b/UI/WebServerResources/js/Contacts/CardController.js
index b14b91f35..4dc5f3218 100644
--- a/UI/WebServerResources/js/Contacts/CardController.js
+++ b/UI/WebServerResources/js/Contacts/CardController.js
@@ -144,7 +144,7 @@
           escapeToClose: true,
           template: [
             '<md-dialog flex="80" flex-sm="100" aria-label="' + l('View Card Source') + '">',
-            '  <md-dialog-content>',
+            '  <md-dialog-content class="md-dialog-content">',
             '    <pre>',
             data,
             '    </pre>',
diff --git a/UI/WebServerResources/js/Mailer/MessageController.js b/UI/WebServerResources/js/Mailer/MessageController.js
index 127d3aa01..9a2150936 100644
--- a/UI/WebServerResources/js/Mailer/MessageController.js
+++ b/UI/WebServerResources/js/Mailer/MessageController.js
@@ -150,7 +150,7 @@
           escapeToClose: true,
           template: [
             '<md-dialog flex="80" flex-sm="100" aria-label="' + l('View Message Source') + '">',
-            '  <md-dialog-content>',
+            '  <md-dialog-content class="md-dialog-content">',
             '    <pre>',
             data,
             '    </pre>',
diff --git a/UI/WebServerResources/js/Scheduler/ComponentController.js b/UI/WebServerResources/js/Scheduler/ComponentController.js
index 651bcd183..9c509766c 100644
--- a/UI/WebServerResources/js/Scheduler/ComponentController.js
+++ b/UI/WebServerResources/js/Scheduler/ComponentController.js
@@ -115,7 +115,7 @@
           escapeToClose: true,
           template: [
             '<md-dialog flex="80" flex-sm="100" aria-label="' + l('View Raw Source') + '">',
-            '  <md-dialog-content>',
+            '  <md-dialog-content class="md-dialog-content">',
             '    <pre>',
             data,
             '    </pre>',