From 4b5abdb5cea315b7c299b09351caa4bd2cc2b483 Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Fri, 11 Dec 2015 15:11:53 -0500
Subject: [PATCH] Adapt to latest md changes

See https://github.com/angular/material/commit/17797f0
---
 .../ContactsUI/UIxContactEditorTemplate.wox   | 101 +++++-----
 .../UIxContactFolderLinksTemplate.wox         |   6 +-
 .../ContactsUI/UIxContactFolderProperties.wox |   2 +-
 .../ContactsUI/UIxContactFoldersView.wox      |   5 +-
 .../ContactsUI/UIxContactsUserFolders.wox     |   5 +-
 .../MailerUI/UIxMailFolderTemplate.wox        |   3 +-
 .../PreferencesUI/UIxAccountEditor.wox        | 168 +++++++++-------
 .../PreferencesUI/UIxFilterEditor.wox         | 181 ++++++++---------
 UI/Templates/PreferencesUI/UIxPreferences.wox | 189 +++++++++---------
 .../UIxAppointmentEditorTemplate.wox          |  83 ++++----
 UI/Templates/SchedulerUI/UIxCalMainView.wox   |   7 +-
 .../SchedulerUI/UIxCalUserRightsEditor.wox    |  12 +-
 .../UIxCalendarFolderLinksTemplate.wox        |  70 ++++---
 .../SchedulerUI/UIxCalendarProperties.wox     |   6 +-
 .../SchedulerUI/UIxReminderEditor.wox         |  24 +--
 .../SchedulerUI/UIxTaskEditorTemplate.wox     |  77 +++----
 .../js/Preferences/FiltersDialogController.js |   8 +-
 .../components/autocomplete/autocomplete.scss |   2 +-
 .../components/pseudo-input/pseudo-input.scss | 116 -----------
 .../components/radioButton/radio-button.scss  |  10 +-
 .../scss/components/select/select.scss        |  31 ---
 .../scss/components/toolbar/toolbar.scss      |   8 +-
 .../scss/core/typography.scss                 |   3 +-
 .../scss/views/MailerUI.scss                  |   1 +
 24 files changed, 496 insertions(+), 622 deletions(-)

diff --git a/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox b/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox
index 55931a85b..03d65371c 100644
--- a/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox
+++ b/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox
@@ -8,18 +8,18 @@
   <div layout="column" class="layout-fill sg-reversible">
     <md-card style="overflow: hidden">
       <md-card-actions layout="row" layout-align="end center">
-        <md-button class="sg-icon-button"
+        <md-button class="md-icon-button"
                    label:aria-label="Cancel"
                    ng-click="editor.cancel()">
           <md-icon>close</md-icon>
         </md-button>
         <div class="md-flex"><!-- spacer --></div>
-        <md-button class="sg-icon-button"
+        <md-button class="md-icon-button"
                    label:aria-label="Reset"
                    ng-click="editor.reset()">
           <md-icon>undo</md-icon>
         </md-button>
-        <md-button class="sg-icon-button"
+        <md-button class="md-icon-button"
                    label:aria-label="Save"
                    ng-click="editor.save(editor.card.$isCard()?cardForm:listForm)">
           <md-icon>save</md-icon>
@@ -33,7 +33,7 @@
         
         <!-- contact editor -->
         <form name="cardForm" ng-show="editor.card.$isCard()" ng-submit="editor.save(cardForm)">
-          <md-input-container>
+          <md-input-container class="md-block md-flex">
             <var:entity const:name="nbsp"/>
             <label>
               <var:string label:value="Display"/>
@@ -85,20 +85,20 @@
           <!-- org units -->
           <div class="attr" ng-repeat="unit in editor.card.orgUnits">
             <div layout="row" layout-align="center end">
-              <md-input-container>
+              <md-input-container class="md-flex">
                 <label>
                   <var:string label:value="Organization Unit"/>
                 </label>
                 <input type="text" ng-model="unit.value"
                        sg-focus-on="orgUnit_{{$index}}"/>
               </md-input-container>
-              <md-button class="sg-icon-button" type="button" ng-click="editor.card.$delete('orgUnits', $index)">
+              <md-button class="md-icon-button" type="button" ng-click="editor.card.$delete('orgUnits', $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="sg-icon-button" type="button" ng-click="editor.addOrgUnit($event)">
+            <md-button class="md-icon-button" type="button" ng-click="editor.addOrgUnit($event)">
               <md-icon>add_circle</md-icon>
             </md-button>
             <label class="button-label">
@@ -108,14 +108,13 @@
 
           <!-- categories -->
           <md-chips ng-model="editor.card.categories">
-            <md-chip-template>
-              {{$chip.value}}
-            </md-chip-template>
+            <md-chip-template>{{$chip.value}}</md-chip-template>
             <md-autocomplete
                 md-selected-item="editor.categories.selected"
                 md-selected-item-change="editor.card.$addCategory(category)"
                 md-search-text="editor.categories.searchText"
                 md-items="category in editor.card.constructor.filterCategories(editor.categories.searchText)"
+                md-min-length="0"
                 label:placeholder="Add a category">
               <span md-highlight-text="editor.categories.searchText">{{category}}</span>
             </md-autocomplete>
@@ -124,26 +123,26 @@
           <!-- emails -->
           <div class="section">
             <div class="attr" ng-repeat="email in editor.card.emails">
-              <div class="md-layout-margin" layout="row" layout-align="space-between end">
+              <div layout="row">
                 <md-input-container flex="20">
                   <md-select ng-model="email.type" label:placeholder="Type">
                     <md-option ng-repeat="type in ::editor.allEmailTypes" ng-value="type">{{ type }}</md-option>
                   </md-select>
                 </md-input-container>
-                <md-input-container>
+                <md-input-container class="md-flex">
                   <label>
                     <var:string label:value="Email Address"/>
                   </label>
                   <input type="email" ng-model="email.value"
                          sg-focus-on="email_{{$index}}"/>
                 </md-input-container>
-                <md-button class="sg-icon-button" type="button" ng-click="editor.card.$delete('emails', $index)">
+                <md-button class="md-icon-button" type="button" ng-click="editor.card.$delete('emails', $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="sg-icon-button" type="button" ng-click="editor.addEmail()">
+              <md-button class="md-icon-button" type="button" ng-click="editor.addEmail()">
                 <md-icon>add_circle</md-icon>
               </md-button>
               <label class="button-label">
@@ -152,20 +151,21 @@
             </div>
           </div>
 
+          <!-- screenname -->
           <div class="section">
-            <div layout="row" layout-align="space-between end" ng-show="editor.card.c_screenname != null">
-              <md-input-container>
+            <div layout="row" ng-show="editor.card.c_screenname != null">
+              <md-input-container class="md-flex">
                 <label class="pseudo-input-label">
                   <var:string label:value="Screen Name"/>
                 </label>
                 <input type="text" ng-model="editor.card.c_screenname"/>
               </md-input-container>
-              <md-button class="sg-icon-button" type="button" ng-click="editor.card.$delete('c_screenname', -1)">
+              <md-button class="md-icon-button" type="button" ng-click="editor.card.$delete('c_screenname', -1)">
                 <md-icon>remove_circle</md-icon>
               </md-button>
             </div>
             <div class="md-layout-margin" layout="row" layout-align="start center" ng-show="editor.card.c_screenname == null">
-              <md-button class="sg-icon-button" type="button" ng-click="editor.addScreenName($event)">
+              <md-button class="md-icon-button" type="button" ng-click="editor.addScreenName($event)">
                 <md-icon>add_circle</md-icon>
               </md-button>
               <label class="button-label">
@@ -184,12 +184,12 @@
                 <md-datepicker class="pseudo-input-field"
                                ng-model="editor.card.birthday"><!-- birthday --></md-datepicker>
               </div>
-              <md-button class="sg-icon-button" type="button" ng-click="editor.card.$delete('birthday', -1)">
+              <md-button class="md-icon-button" type="button" ng-click="editor.card.$delete('birthday', -1)">
                 <md-icon>remove_circle</md-icon>
               </md-button>
             </div>
             <div class="md-layout-margin" layout="row" layout-align="start center" ng-hide="editor.card.birthday">
-              <md-button class="sg-icon-button" type="button" ng-click="editor.addBirthday()">
+              <md-button class="md-icon-button" type="button" ng-click="editor.addBirthday()">
                 <md-icon>add_circle</md-icon>
               </md-button>
               <label class="button-label">
@@ -201,27 +201,26 @@
           <!-- phones -->
           <div class="section">
             <div class="attr" ng-repeat="phone in editor.card.phones">
-              <div class="md-layout-margin" layout="row" layout-align="space-between end">
+              <div layout="row">
                 <md-input-container flex="20">
                   <md-select ng-model="phone.type" label:placeholder="Type">
                     <md-option ng-repeat="type in ::editor.allTelTypes" ng-value="type">{{ type }}</md-option>
                   </md-select>
                 </md-input-container>
-                <md-input-container>
+                <md-input-container class="md-flex">
                   <label>
                     <var:string label:value="Phone Number"/>
                   </label>
                   <input type="text" ng-model="phone.value"
                          sg-focus-on="phone_{{$index}}"/>
                 </md-input-container>
-                <md-button class="sg-icon-button" type="button" ng-click="editor.card.$delete('phones', $index)">
+                <md-button class="md-icon-button" type="button" ng-click="editor.card.$delete('phones', $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="sg-icon-button" type="button" ng-click="editor.addPhone()">
+            <div layout="row" layout-align="start center">
+              <md-button class="md-icon-button" type="button" ng-click="editor.addPhone()">
                 <md-icon>add_circle</md-icon>
               </md-button>
               <label class="button-label">
@@ -233,25 +232,25 @@
           <!-- urls -->
           <div class="section">
             <div class="attr" ng-repeat="url in editor.card.urls">
-              <div class="md-layout-margin" layout="row" layout-align="space-between end">
+              <div layout="row">
                 <md-input-container flex="20">
                   <md-select ng-model="url.type" label:placeholder="Type">
                     <md-option ng-repeat="type in ::editor.allUrlTypes" ng-value="type">{{ type }}</md-option>
                   </md-select>
                 </md-input-container>
-                <md-input-container>
+                <md-input-container class="md-flex">
                   <label>
                     <var:string label:value="URL"/>
                   </label>
                   <input type="url" ng-model="url.value" sg-focus-on="url_{{$index}}"/>
                 </md-input-container>
-                <md-button class="sg-icon-button" type="button" ng-click="editor.card.$delete('urls', $index)">
+                <md-button class="md-icon-button" type="button" ng-click="editor.card.$delete('urls', $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="sg-icon-button" type="button" ng-click="editor.addUrl()">
+              <md-button class="md-icon-button" type="button" ng-click="editor.addUrl()">
                 <md-icon>add_circle</md-icon>
               </md-button>
               <label class="button-label">
@@ -263,72 +262,68 @@
           <!-- addresses -->
           <div class="section">
             <div class="attr" ng-repeat="address in editor.card.addresses">
-              <div layout="row" layout-align="center end">
+              <div layout="row">
                 <md-input-container flex="20">
                   <md-select ng-model="address.type" label:placeholder="Type">
                     <md-option ng-repeat="type in ::editor.allAddressTypes" ng-value="type">{{ type }}</md-option>
                   </md-select>
                 </md-input-container>
-                <md-input-container>
+                <md-input-container class="md-flex">
                   <label>
                     <var:string label:value="street"/>
                   </label>
                   <input type="text" ng-model="address.street"
                          sg-focus-on="address_{{$index}}"/>
                 </md-input-container>
-                <md-input-container>
-                  <label>
-                    <var:string label:value=""/>
-                  </label>
-                  <input type="text" ng-model="address.street2"/>
-                </md-input-container>
               </div>
-              <div layout="row" layout-align="center end">
-                <md-input-container>
+              <div layout="row">
+                <md-input-container flex="20">
                   <label>
                     <var:string label:value="Postoffice"/>
                   </label>
                   <input type="text" ng-model="address.postoffice"/>
                 </md-input-container>
+                <md-input-container class="md-flex">
+                  <label>
+                    <var:string label:value="street (continued)"/>
+                  </label>
+                  <input type="text" ng-model="address.street2"/>
+                </md-input-container>
               </div>
-              <div layout="row" layout-align="center end">
-                <md-input-container>
+              <div layout="row">
+                <md-input-container flex="50" flex-xs="100">
                   <label>
                     <var:string label:value="City"/>
                   </label>
                   <input type="text" ng-model="address.locality"/>
                 </md-input-container>
-              </div>
-              <div layout="row" layout-align="center end">
-                <md-input-container>
+                <md-input-container flex="50" flex-xs="100">
                   <label>
                     <var:string label:value="Region"/>
                   </label>
                   <input type="text" ng-model="address.region"/>
                 </md-input-container>
               </div>
-              <div layout="row" layout-align="center end">
-                <md-input-container>
+              <div layout="row">
+                <md-input-container flex="50" flex-xs="100">
                   <label>
                     <var:string label:value="Country"/>
                   </label>
                   <input type="text" ng-model="address.country"/>
                 </md-input-container>
-              </div>
-              <div layout="row" layout-align="center end">
-                <md-input-container>
+                <md-input-container class="md-flex">
                   <label>
                     <var:string label:value="Postal Code"/>
                   </label>
                   <input type="text" ng-model="address.postalcode"/>
                 </md-input-container>
-                <md-button class="sg-icon-button" type="button" ng-click="editor.card.$delete('addresses', $index)">
+                <md-button class="md-icon-button" type="button" ng-click="editor.card.$delete('addresses', $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="sg-icon-button" type="button" ng-click="editor.addAddress()">
+              <md-button class="md-icon-button" type="button" ng-click="editor.addAddress()">
                 <md-icon>add_circle</md-icon>
               </md-button>
               <label class="button-label">
@@ -338,7 +333,7 @@
           </div>
 
           <!-- note -->
-          <md-input-container>
+          <md-input-container class="md-block md-flex">
             <label class="right inline">
               <var:string label:value="Note"/>
             </label>
diff --git a/UI/Templates/ContactsUI/UIxContactFolderLinksTemplate.wox b/UI/Templates/ContactsUI/UIxContactFolderLinksTemplate.wox
index 6b50eb2d9..db2cdebf7 100644
--- a/UI/Templates/ContactsUI/UIxContactFolderLinksTemplate.wox
+++ b/UI/Templates/ContactsUI/UIxContactFolderLinksTemplate.wox
@@ -23,15 +23,15 @@
     <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>
+        <md-input-container class="md-block">
           <label><var:string label:value="CardDAV URL"/></label>
           <input type="text" ng-model="links.addressbook.urls.cardDavURL" ng-readonly="true"/>
         </md-input-container>
       </div>
       <var:if condition="isPublicAccessEnabled">
-        <div layout="column" layout-padding="layout-padding">
+        <div layout="column">
           <div class="sg-md-title"><var:string label:value="Public Access"/></div>
-          <md-input-container>
+          <md-input-container class="md-block">
             <label><var:string label:value="CardDAV URL"/></label>
             <input type="text" ng-model="links.addressbook.urls.publicCardDavURL" ng-readonly="true"/>
           </md-input-container>
diff --git a/UI/Templates/ContactsUI/UIxContactFolderProperties.wox b/UI/Templates/ContactsUI/UIxContactFolderProperties.wox
index 7c5f0b2f7..5085f6ea7 100644
--- a/UI/Templates/ContactsUI/UIxContactFolderProperties.wox
+++ b/UI/Templates/ContactsUI/UIxContactFolderProperties.wox
@@ -11,7 +11,7 @@
     <md-toolbar>
       <div class="md-toolbar-tools">
         <!-- name -->
-        <md-input-container>
+        <md-input-container class="md-block md-flex">
           <label><var:string label:value="Name"/></label>
           <input type="text"
                  class="md-title"
diff --git a/UI/Templates/ContactsUI/UIxContactFoldersView.wox b/UI/Templates/ContactsUI/UIxContactFoldersView.wox
index 4e38b40bf..e02506793 100644
--- a/UI/Templates/ContactsUI/UIxContactFoldersView.wox
+++ b/UI/Templates/ContactsUI/UIxContactFoldersView.wox
@@ -275,14 +275,15 @@
           </div>
           <!-- search mode -->
           <div class="md-toolbar-tools sg-toolbar-secondary"
+               layout="row"
                ng-show="addressbook.mode.search"
                sg-search="addressbook.selectedFolder.$filter(searchText, { search: searchField })">
-            <md-button class="sg-icon-button"
+            <md-button class="md-icon-button"
                        sg-search-cancel="addressbook.cancelSearch()"
                        label:aria-label="Back">
               <md-icon>arrow_back</md-icon>
             </md-button>
-            <md-input-container md-no-float="md-no-float">
+            <md-input-container class="md-flex" md-no-float="md-no-float">
               <input name="folderSearch" type="search" label:placeholder="Search"/>
             </md-input-container>
             <md-input-container flex="25">
diff --git a/UI/Templates/ContactsUI/UIxContactsUserFolders.wox b/UI/Templates/ContactsUI/UIxContactsUserFolders.wox
index 45ed4c2b6..798b97ff1 100644
--- a/UI/Templates/ContactsUI/UIxContactsUserFolders.wox
+++ b/UI/Templates/ContactsUI/UIxContactsUserFolders.wox
@@ -16,8 +16,9 @@
       </div>
     </md-toolbar>
     <md-dialog-content class="md-dialog-content">
-      <md-input-container>
-        <label><md-icon>search</md-icon><var:string label:value="Search User"/></label>
+      <md-input-container class="md-block md-flex">
+        <md-icon>search</md-icon>
+        <label><var:string label:value="Search User"/></label>
         <input type="input"
                autocomplete="off"
                ng-model="subscribe.searchText"
diff --git a/UI/Templates/MailerUI/UIxMailFolderTemplate.wox b/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
index 41e81f3de..420751ff1 100644
--- a/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
+++ b/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
@@ -117,6 +117,7 @@
       </div>
       <!-- search mode -->
       <div class="md-toolbar-tools sg-toolbar-secondary"
+           layout="row"
            ng-show="mailbox.mode.search"
            sg-search="mailbox.selectedFolder.$filter({ sort: 'date', asc: false }, [{ searchBy: searchField, searchInput: searchText }])">
         <md-button class="sg-icon-button"
@@ -124,7 +125,7 @@
                    label:aria-label="Back">
           <md-icon>arrow_back</md-icon>
         </md-button>
-        <md-input-container md-no-float="md-no-float">
+        <md-input-container class="md-flex" md-no-float="md-no-float">
           <input name="folderSearch" type="search" ng-minlength="3" label:placeholder="Search"/>
         </md-input-container>
         <md-input-container flex="25">
diff --git a/UI/Templates/PreferencesUI/UIxAccountEditor.wox b/UI/Templates/PreferencesUI/UIxAccountEditor.wox
index 1f179d88b..3b1fc2205 100644
--- a/UI/Templates/PreferencesUI/UIxAccountEditor.wox
+++ b/UI/Templates/PreferencesUI/UIxAccountEditor.wox
@@ -11,7 +11,7 @@
     <md-toolbar>
       <div class="md-toolbar-tools">
         <md-icon class="material-icons sg-icon-toolbar-bg">account_box</md-icon>
-        <md-input-container>
+        <md-input-container class="md-block md-flex">
           <label><var:string label:value="Account Name"/></label>
           <input type="text" required="required"
                  ng-readonly="$AccountDialogController.accountId == 0"
@@ -26,69 +26,79 @@
 
       <form id="mainForm" name="accountForm" var:href="ownPath">
 
-        <md-input-container>
-          <label><var:string label:value="Server Name"/></label>
-          <input type="text" required="required"
-                 ng-readonly="$AccountDialogController.accountId == 0"
-                 ng-model="$AccountDialogController.account.serverName"/>
+        <div layout="row">
+          <md-input-container class="md-block md-flex">
+            <label><var:string label:value="Server Name"/></label>
+            <input type="text" required="required"
+                   ng-disabled="$AccountDialogController.accountId == 0"
+                   ng-model="$AccountDialogController.account.serverName"/>
+          </md-input-container>
+
+          <md-input-container class="md-block" flex="30">
+            <label><var:string label:value="Port"/></label>
+            <input type="number" required="required" min="1" max="65535"
+                   ng-disabled="$AccountDialogController.accountId == 0"
+                   ng-model="$AccountDialogController.account.port"/>
+          </md-input-container>
+        </div>
+
+        <md-input-container class="md-block md-input-has-value">
+          <label><var:string label:value="Encryption"/></label>
+          <md-radio-group ng-model="$AccountDialogController.account.encryption">
+            <md-radio-button ng-disabled="$AccountDialogController.accountId == 0" value="none" class="md-primary"><var:string label:value="None"/></md-radio-button>
+            <md-radio-button ng-disabled="$AccountDialogController.accountId == 0" value="ssl"><var:string label:value="SSL"/></md-radio-button>
+            <md-radio-button ng-disabled="$AccountDialogController.accountId == 0" value="tls"><var:string label:value="TLS"/></md-radio-button>
+          </md-radio-group>
         </md-input-container>
 
-        <md-input-container>
-          <label><var:string label:value="Port"/></label>
-          <input type="number" required="required" min="1" max="65535"
-                 ng-readonly="$AccountDialogController.accountId == 0"
-                 ng-model="$AccountDialogController.account.port"/>
-        </md-input-container>
+        <div layout="row">
+          <md-input-container class="md-block" flex="50">
+            <label><var:string label:value="User Name"/></label>
+            <input type="text" required="required"
+                   ng-disabled="$AccountDialogController.accountId == 0"
+                   ng-model="$AccountDialogController.account.userName"/>
+          </md-input-container>
 
-        <label><var:string label:value="Encryption"/></label>
-        <md-radio-group ng-model="$AccountDialogController.account.encryption">
-          <md-radio-button ng-disabled="$AccountDialogController.accountId == 0" value="none" class="md-primary"><var:string label:value="None"/></md-radio-button>
-          <md-radio-button ng-disabled="$AccountDialogController.accountId == 0" value="ssl"><var:string label:value="SSL"/></md-radio-button>
-          <md-radio-button ng-disabled="$AccountDialogController.accountId == 0" value="tls"><var:string label:value="TLS"/></md-radio-button>
-        </md-radio-group>
+          <md-input-container class="md-block" flex="50"
+                              ng-hide="$AccountDialogController.accountId == 0">
+            <label><var:string label:value="Password"/></label>
+            <input type="password"
+                   ng-model="$AccountDialogController.account.password"/>
+          </md-input-container>
+        </div>
 
-        <md-input-container>
-          <label><var:string label:value="User Name"/></label>
-          <input type="text" required="required"
-                 ng-readonly="$AccountDialogController.accountId == 0"
-                 ng-model="$AccountDialogController.account.userName"/>
-        </md-input-container>
-
-        <md-input-container>
-          <label><var:string label:value="Password"/></label>
-          <input type="password"
-                 ng-readonly="$AccountDialogController.accountId == 0"
-                 ng-model="$AccountDialogController.account.password"/>
-        </md-input-container>
-
-        <md-input-container>
+        <md-input-container class="md-block md-flex">
           <label><var:string label:value="Full Name"/></label>
           <input type="text" required="required"
-                 ng-readonly="$AccountDialogController.customFromIsReadonly()"
+                 ng-disabled="$AccountDialogController.customFromIsReadonly()"
                  ng-model="$AccountDialogController.account.identities[0].fullName"/>
         </md-input-container>
 
-        <md-input-container>
-          <label><var:string label:value="Email"/></label>
-          <input type="email" required="required"
-                 ng-readonly="$AccountDialogController.customFromIsReadonly()"
-                 ng-model="$AccountDialogController.account.identities[0].email"/>
-        </md-input-container>
-
-        <md-input-container>
-          <label><var:string label:value="Reply To Email"/></label>
-          <input type="email" ng-model="$AccountDialogController.account.identities[0].replyTo"/>
-        </md-input-container>
+        <div layout="row">
+          <md-input-container class="md-block" flex="50">
+            <label><var:string label:value="Email"/></label>
+            <input type="email" required="required"
+                   ng-disabled="$AccountDialogController.customFromIsReadonly()"
+                   ng-model="$AccountDialogController.account.identities[0].email"/>
+          </md-input-container>
+          <md-input-container class="md-block" flex="50"
+                              ng-hide="$AccountDialogController.customFromIsReadonly()">
+            <label><var:string label:value="Reply To Email"/></label>
+            <input type="email"
+                   ng-model="$AccountDialogController.account.identities[0].replyTo"/>
+          </md-input-container>
+        </div>
 
         <!-- To switch between a simple text editor and the CK/HTML editor, we use a ng-if and not
              a ng-class as it doesn't get initialized by the ckEditor class directive -->
-        <md-input-container ng-if="$AccountDialogController.defaults.SOGoMailComposeMessageType == 'text'">
-          <label><var:string label:value="Signature"/> {{$AccountDialogController.defaults.SOGoMailComposeMessageType}}</label>
+        <md-input-container class="md-block md-flex"
+            ng-if="$AccountDialogController.defaults.SOGoMailComposeMessageType == 'text'">
+          <label><var:string label:value="Signature"/></label>
           <textarea ng-model="$AccountDialogController.account.identities[0].signature"><!-- signature --></textarea>
         </md-input-container>
         <div class="pseudo-input-container"
              ng-if="$AccountDialogController.defaults.SOGoMailComposeMessageType == 'html'">
-          <label class="pseudo-input-label"><var:string label:value="Signature"/> {{$AccountDialogController.defaults.LocaleCode}}</label>
+          <label class="pseudo-input-label"><var:string label:value="Signature"/></label>
           <textarea class="ck-editor"
                     ck-locale="$AccountDialogController.defaults.LocaleCode"
                     ck-options="{ 'height': '70px',
@@ -98,39 +108,43 @@
                     ng-model="$AccountDialogController.account.identities[0].signature"><!-- signature --></textarea>
         </div>
 
-        <md-radio-group ng-model="$AccountDialogController.account.receipts.receiptAction">
+        <md-input-container class="md-block md-input-has-value">
           <label><var:string label:value="When I receive a request for a return receipt"/></label>
-          <md-radio-button value="ignore"><var:string label:value="Never send a return receipt"/></md-radio-button>
-          <md-radio-button value="allow"><var:string label:value="Allow return receipts for some messages"/></md-radio-button>
-        </md-radio-group>
+          <md-radio-group ng-model="$AccountDialogController.account.receipts.receiptAction">
+            <md-radio-button value="ignore"><var:string label:value="Never send a return receipt"/></md-radio-button>
+            <md-radio-button value="allow"><var:string label:value="Allow return receipts for some messages"/></md-radio-button>
+          </md-radio-group>
+        </md-input-container>
 
-        <label>
-          <var:string label:value="If I'm not in the To or Cc of the message"/>
-          <md-select ng-model="$AccountDialogController.account.receipts.receiptNonRecipientAction">
-            <md-option  const:value="ignore"><var:string label:value="Never send"/></md-option>
-            <md-option  const:value="send"><var:string label:value="Always send"/></md-option>
-            <md-option  const:value="ask"><var:string label:value="Ask me"/></md-option>
-          </md-select>
-        </label>
+        <div layout="column" flex-offset="5"
+             ng-show="$AccountDialogController.account.receipts.receiptAction == 'allow'">
+          <md-input-container class="md-block md-flex">
+            <label><var:string label:value="If I'm not in the To or Cc of the message"/></label>
+            <md-select ng-model="$AccountDialogController.account.receipts.receiptNonRecipientAction">
+              <md-option  const:value="ignore"><var:string label:value="Never send"/></md-option>
+              <md-option  const:value="send"><var:string label:value="Always send"/></md-option>
+              <md-option  const:value="ask"><var:string label:value="Ask me"/></md-option>
+            </md-select>
+          </md-input-container>
 
-        <label>
-          <var:string  label:value="If the sender is outside my domain"/>
-          <md-select ng-model="$AccountDialogController.account.receipts.receiptOutsideDomainAction">
-            <md-option  const:value="ignore"><var:string label:value="Never send"/></md-option>
-            <md-option  const:value="send"><var:string label:value="Always send"/></md-option>
-            <md-option  const:value="ask"><var:string label:value="Ask me"/></md-option>
-          </md-select>
-        </label>
-
-        <label>
-          <var:string label:value="In all other cases"/>
-          <md-select ng-model="$AccountDialogController.account.receipts.receiptAnyAction">
-            <md-option  const:value="ignore"><var:string label:value="Never send"/></md-option>
-            <md-option  const:value="send"><var:string label:value="Always send"/></md-option>
-            <md-option  const:value="ask"><var:string label:value="Ask me"/></md-option>
-          </md-select>
-        </label>
+          <md-input-container class="md-block md-flex">
+            <label><var:string  label:value="If the sender is outside my domain"/></label>
+            <md-select ng-model="$AccountDialogController.account.receipts.receiptOutsideDomainAction">
+              <md-option  const:value="ignore"><var:string label:value="Never send"/></md-option>
+              <md-option  const:value="send"><var:string label:value="Always send"/></md-option>
+              <md-option  const:value="ask"><var:string label:value="Ask me"/></md-option>
+            </md-select>
+          </md-input-container>
 
+          <md-input-container class="md-block md-flex">
+            <label><var:string label:value="In all other cases"/></label>
+            <md-select ng-model="$AccountDialogController.account.receipts.receiptAnyAction">
+              <md-option  const:value="ignore"><var:string label:value="Never send"/></md-option>
+              <md-option  const:value="send"><var:string label:value="Always send"/></md-option>
+              <md-option  const:value="ask"><var:string label:value="Ask me"/></md-option>
+            </md-select>        
+          </md-input-container>
+        </div>
 
       </form>
     </md-dialog-content>
diff --git a/UI/Templates/PreferencesUI/UIxFilterEditor.wox b/UI/Templates/PreferencesUI/UIxFilterEditor.wox
index 9ba36746c..3abfc21f1 100644
--- a/UI/Templates/PreferencesUI/UIxFilterEditor.wox
+++ b/UI/Templates/PreferencesUI/UIxFilterEditor.wox
@@ -12,7 +12,7 @@
     <md-toolbar>
       <div class="md-toolbar-tools">
         <md-icon class="material-icons sg-icon-toolbar-bg">filter_list</md-icon>
-        <md-input-container>
+        <md-input-container class="md-block md-flex">
           <label><var:string label:value="Filter name"/></label>
           <input class="md-title" type="text" ng-model="filterEditor.filter.name" required="required"/>
         </md-input-container>
@@ -29,7 +29,7 @@
       </script>
 
       <div layout="row" layout-align="start center">
-        <var:string label:value="For incoming messages that"/>
+        <p><var:string label:value="For incoming messages that"/></p>
         <md-input-container class="md-flex">
           <md-select ng-model="filterEditor.filter.match" required="required">
             <md-option const:value="all">
@@ -47,51 +47,50 @@
 
       <!-- CONDITIONS -->
       <div layout="column">
-        <div id="filterRules"><!-- empty -->
-          <md-list>
-            <md-list-item ng-repeat="rule in filterEditor.filter.rules">
-              <md-input-container flex="25">
-                <md-select ng-model="rule.field">
-                  <md-option ng-value="key" ng-repeat="(key, value) in filterEditor.fieldLabels">{{ value }}</md-option>
-                </md-select>
-              </md-input-container>
+        <div id="filterRules"><!-- empty --></div>
+          <div layout="row"
+               ng-repeat="rule in filterEditor.filter.rules">
 
-              <md-input-container flex="25" ng-show="rule.field == 'header'">
-                <input type="text" ng-model="rule.custom_header"/>
-              </md-input-container>
+            <md-input-container class="md-block" flex="25">
+              <md-select ng-model="rule.field">
+                <md-option ng-value="key" ng-repeat="(key, value) in filterEditor.fieldLabels">{{ value }}</md-option>
+              </md-select>
+            </md-input-container>
 
-              <md-input-container flex="25" ng-show="rule.field == 'size'">
-                <md-select ng-model="rule.operator">
-                  <md-option ng-value="key" ng-repeat="(key, value) in filterEditor.numberOperatorLabels">
-                    {{ value }}
-                  </md-option>
-                </md-select>
-              </md-input-container>
+            <md-input-container class="md-block" flex="25" ng-show="rule.field == 'header'">
+              <input type="text" ng-model="rule.custom_header"/>
+            </md-input-container>
 
-              <md-input-container flex="25" ng-show="rule.field != 'size'">
-                <md-select ng-model="rule.operator">
-                  <md-option ng-value="key" ng-repeat="(key, value) in filterEditor.textOperatorLabels">
-                    {{ value }}
-                  </md-option>
-                </md-select>
-              </md-input-container>
+            <md-input-container class="md-block" flex="25" ng-show="rule.field == 'size'">
+              <md-select ng-model="rule.operator">
+                <md-option ng-value="key" ng-repeat="(key, value) in filterEditor.numberOperatorLabels">
+                  {{ value }}
+                </md-option>
+              </md-select>
+            </md-input-container>
 
-              <md-input-container class="md-flex" md-no-float="md-no-float">
-                <input type="text" label:placeholder="Value" ng-model="rule.value"/>
-              </md-input-container>
+            <md-input-container class="md-block" flex="25" ng-show="rule.field != 'size'">
+              <md-select ng-model="rule.operator">
+                <md-option ng-value="key" ng-repeat="(key, value) in filterEditor.textOperatorLabels">
+                  {{ value }}
+                </md-option>
+              </md-select>
+            </md-input-container>
 
-              <md-button class="sg-icon-button" type="button"
-                         ng-click="filterEditor.removeMailFilterRule($index)">
-                <md-icon>remove_circle</md-icon>
-              </md-button>
+            <md-input-container class="md-block md-flex" md-no-float="md-no-float">
+              <label><var:string label:value="Value"/></label>
+              <input type="text" ng-model="rule.value"/>
+            </md-input-container>
 
-            </md-list-item>
-          </md-list>
-        </div>
+            <md-button class="md-icon-button" type="button"
+                       ng-click="filterEditor.removeMailFilterRule($index)">
+              <md-icon>remove_circle</md-icon>
+            </md-button>
+          </div>
 
         <div layout="row" layout-align="end center">
           <label class="button-label"><var:string label:value="Add a condition"/></label>
-          <md-button class="sg-icon-button" type="button"
+          <md-button class="md-icon-button" type="button"
                      ng-click="filterEditor.addMailFilterRule($event)">
             <md-icon>add_circle</md-icon>
           </md-button>
@@ -100,72 +99,74 @@
 
       <!-- ACTIONS -->
       <div layout="column">
-        <var:string label:value="Perform these actions"/>
+        <p><var:string label:value="Perform these actions"/></p>
         <div id="filterActions"><!-- empty --></div>
+        <div layout="row"
+             ng-repeat="action in filterEditor.filter.actions">
 
-        <md-list>
-          <md-list-item layout="row" layout-align="space-between center"
-                        ng-repeat="action in filterEditor.filter.actions">
-            <md-input-container>
-              <md-select ng-model="action.method">
-                <md-option ng-value="key" ng-repeat="(key, value) in filterEditor.methodLabels">{{ value }}</md-option>
-              </md-select>
-            </md-input-container>
+          <md-input-container class="md-block md-flex">
+            <md-select ng-model="action.method">
+              <md-option ng-value="key" ng-repeat="(key, value) in filterEditor.methodLabels">{{ value }}</md-option>
+            </md-select>
+          </md-input-container>
 
-            <!-- FORWARD MESSAGE TO -->
-            <md-input-container ng-show="action.method == 'redirect'" >
-              <input type="text" ng-model="action.argument"/>
-            </md-input-container>
+          <!-- FORWARD MESSAGE TO -->
+          <md-input-container class="md-block" flex="50" ng-show="action.method == 'redirect'" >
+            <label><var:string label:value="Email"/></label>
+            <input type="text" ng-model="action.argument"/>
+          </md-input-container>
 
-            <!-- DISCARD -->
-            <!-- nada -->
+          <!-- DISCARD -->
+          <!-- nada -->
 
-            <!-- KEEP -->
-            <!-- nada -->
+          <!-- KEEP -->
+          <!-- nada -->
 
-            <!-- SEND REJECT MESSAGE -->
-            <md-input-container ng-show="action.method == 'reject'">
-              <input type="text" ng-model="action.argument"/>
-            </md-input-container>
+          <!-- SEND REJECT MESSAGE -->
+          <md-input-container class="md-block" flex="50" ng-show="action.method == 'reject'">
+            <label><var:string label:value="Message"/></label>
+            <input type="text" ng-model="action.argument"/>
+          </md-input-container>
 
-            <!-- FILE INTO -->
-            <md-input-container ng-show="action.method == 'fileinto'" >
-              <md-select ng-model="action.argument">
-                <md-option ng-value="item.path" ng-repeat="item in filterEditor.mailboxes">
-                  <div ng-class="'sg-child-level-' + item.level">
-                    {{ item.name }}
-                  </div>
-                </md-option>
-              </md-select>
-            </md-input-container>
+          <!-- FILE INTO -->
+          <md-input-container class="md-block" flex="50" ng-show="action.method == 'fileinto'" >
+            <label><var:string label:value="Mailbox"/></label>
+            <md-select ng-model="action.argument">
+              <md-option ng-value="item.path" ng-repeat="item in filterEditor.mailboxes">
+                <div ng-class="'sg-child-level-' + item.level">
+                  {{ item.name }}
+                </div>
+              </md-option>
+            </md-select>
+          </md-input-container>
 
-            <!-- FLAG WITH -->
-            <md-input-container ng-show="action.method == 'addflag'" >
-              <md-select ng-model="action.argument" >
-                <md-option value="seen"><var:string label:value="Seen"/></md-option>
-                <md-option value="deleted"><var:string label:value="Deleted"/></md-option>
-                <md-option value="answered"><var:string label:value="Answered"/></md-option>
-                <md-option value="flagged"><var:string label:value="Flagged"/></md-option>
-                <md-option value="junk"><var:string label:value="Junk"/></md-option>
-                <md-option value="not_junk"><var:string label:value="Not Junk"/></md-option>
-                <md-option ng-value="key" ng-repeat="(key, value) in labels">{{ value[0] }}</md-option>
-              </md-select>
-            </md-input-container>
+          <!-- FLAG WITH -->
+          <md-input-container class="md-block" flex="50" ng-show="action.method == 'addflag'" >
+            <label><var:string label:value="Flag"/></label>
+            <md-select ng-model="action.argument" >
+              <md-option value="seen"><var:string label:value="Seen"/></md-option>
+              <md-option value="deleted"><var:string label:value="Deleted"/></md-option>
+              <md-option value="answered"><var:string label:value="Answered"/></md-option>
+              <md-option value="flagged"><var:string label:value="Flagged"/></md-option>
+              <md-option value="junk"><var:string label:value="Junk"/></md-option>
+              <md-option value="not_junk"><var:string label:value="Not Junk"/></md-option>
+              <md-option ng-value="key" ng-repeat="(key, value) in labels">{{ value[0] }}</md-option>
+            </md-select>
+          </md-input-container>
 
-            <!-- STOP -->
-            <!-- nada -->
+          <!-- STOP -->
+          <!-- nada -->
 
-            <md-button class="sg-icon-button" type="button"
-                       ng-click="filterEditor.removeMailFilterAction($index)">
-              <md-icon>remove_circle</md-icon>
-            </md-button>
+          <md-button class="md-icon-button" type="button"
+                     ng-click="filterEditor.removeMailFilterAction($index)">
+            <md-icon>remove_circle</md-icon>
+          </md-button>
 
-          </md-list-item>
-        </md-list>
+        </div>
 
         <div layout="row" layout-align="end center">
           <label class="button-label"><var:string label:value="Add an action"/></label>
-          <md-button class="sg-icon-button" type="button"
+          <md-button class="md-icon-button" type="button"
                      ng-click="filterEditor.addMailFilterAction($event)">
             <md-icon>add_circle</md-icon>
           </md-button>
diff --git a/UI/Templates/PreferencesUI/UIxPreferences.wox b/UI/Templates/PreferencesUI/UIxPreferences.wox
index ce0a757e8..3b1eb58a7 100644
--- a/UI/Templates/PreferencesUI/UIxPreferences.wox
+++ b/UI/Templates/PreferencesUI/UIxPreferences.wox
@@ -97,71 +97,62 @@
             </md-input-container>
 
             <div layout="row">
-              <div flex="50">
-                <md-input-container>
-                  <label><var:string label:value="Language"/></label>
-                  <md-select ng-model="app.preferences.defaults.SOGoLanguage"
-                             ng-change="app.onLanguageChange()">
-                    <var:foreach list="languages" item="item">
-                      <md-option var:value="item">
-                        <var:string value="languageText"/>
-                      </md-option>
-                    </var:foreach>
-                  </md-select>
-                </md-input-container>
-              </div>
-              <div flex="50">
-                <md-autocomplete
-                    style="padding-bottom: 0"
-                    md-search-text="app.timeZonesSearchText"
-                    md-selected-item="app.preferences.defaults.SOGoTimeZone"
-                    md-items="timezone in app.timeZonesListFilter(app.timeZonesSearchText)"
-                    md-item-text="timezone"
-                    md-min-length="3"
-                    md-select-on-match="true"
-                    label:md-floating-label="Current Time Zone">
-                  <span md-highlight-text="app.timeZonesSearchText">{{timezone}}</span>
-                </md-autocomplete>
-              </div>
+              <md-input-container class="md-block" flex="50">
+                <label><var:string label:value="Language"/></label>
+                <md-select ng-model="app.preferences.defaults.SOGoLanguage"
+                           ng-change="app.onLanguageChange()">
+                  <var:foreach list="languages" item="item">
+                    <md-option var:value="item">
+                      <var:string value="languageText"/>
+                    </md-option>
+                  </var:foreach>
+                </md-select>
+              </md-input-container>
+              <md-autocomplete
+                  class="md-block" flex="50"
+                  style="padding-bottom: 0"
+                  md-search-text="app.timeZonesSearchText"
+                  md-selected-item="app.preferences.defaults.SOGoTimeZone"
+                  md-items="timezone in app.timeZonesListFilter(app.timeZonesSearchText)"
+                  md-item-text="timezone"
+                  md-min-length="3"
+                  md-select-on-match="true"
+                  label:md-floating-label="Current Time Zone">
+                <span md-highlight-text="app.timeZonesSearchText">{{timezone}}</span>
+              </md-autocomplete>
             </div>
 
             <div layout="row">
-              <div flex="30">
-                <md-input-container>
-                  <label><var:string label:value="Short Date Format"/></label>
-                  <md-select ng-model="app.preferences.defaults.SOGoShortDateFormat">
-                    <var:foreach list="shortDateFormatsList" item="item">
-                      <md-option var:value="item">
-                        <var:string value="itemShortDateFormatText"/>
-                      </md-option>
-                    </var:foreach>
-                  </md-select>
-                </md-input-container>
-              </div>
-              <div flex="40">
-                <md-input-container>
-                  <label><var:string label:value="Long Date Format"/></label>
-                  <md-select ng-model="app.preferences.defaults.SOGoLongDateFormat">
-                    <var:foreach list="longDateFormatsList" item="item">
-                      <md-option var:value="item">
-                        <var:string value="itemLongDateFormatText"/>
-                      </md-option>
-                    </var:foreach>
-                  </md-select>
-                </md-input-container>
-              </div>
-              <div flex="30">
-                <md-input-container>
-                  <label><var:string label:value="Time Format"/></label>
-                  <md-select ng-model="app.preferences.defaults.SOGoTimeFormat">
-                    <var:foreach list="timeFormatsList" item="item">
-                      <md-option var:value="item">
-                        <var:string value="itemTimeFormatText"/>
-                      </md-option>
-                    </var:foreach>
-                  </md-select>
-                </md-input-container>
-              </div>
+              <md-input-container class="md-block" flex="30">
+                <label><var:string label:value="Short Date Format"/></label>
+                <md-select ng-model="app.preferences.defaults.SOGoShortDateFormat">
+                  <var:foreach list="shortDateFormatsList" item="item">
+                    <md-option var:value="item">
+                      <var:string value="itemShortDateFormatText"/>
+                    </md-option>
+                  </var:foreach>
+                </md-select>
+              </md-input-container>
+              <md-input-container class="md-block" flex="40">
+                <label><var:string label:value="Long Date Format"/></label>
+                <md-select ng-model="app.preferences.defaults.SOGoLongDateFormat">
+                  <var:foreach list="longDateFormatsList" item="item">
+                    <md-option var:value="item">
+                      <var:string value="itemLongDateFormatText"/>
+                    </md-option>
+                  </var:foreach>
+                </md-select>
+              </md-input-container>
+              <md-input-container class="md-block" flex="30">
+                <label><var:string label:value="Time Format"/></label>
+                <md-select ng-model="app.preferences.defaults.SOGoTimeFormat">
+                  <var:foreach list="timeFormatsList" item="item">
+                    <md-option var:value="item">
+                      <var:string value="itemTimeFormatText"/>
+                    </md-option>
+                  </var:foreach>
+                </md-select>
+              </md-input-container>
             </div>
 
             <md-input-container>
@@ -207,13 +198,13 @@
                 label:label="Password">
           <md-content id="passwordView" class="md-padding">
             <div layout="row">
-              <md-input-container>
+              <md-input-container class="md-block" flex="50">
                 <label><var:string label:value="New password"/>
                 </label>
 	        <input type="password" ng-model="app.passwords.newPassword"/>
               </md-input-container>
 
-              <md-input-container>
+              <md-input-container class="md-block" flex="50">
                 <label><var:string label:value="Confirmation"/>
                 </label>
 	        <input type="password" ng-model="app.passwords.newPasswordConfirmation"/>
@@ -248,7 +239,7 @@
                       id="calendarOptionsView-content">
             <div layout="column" flex="100">
               <div layout="row">
-                <md-input-container>
+                <md-input-container class="md-block" flex="33">
                   <label><var:string label:value="Week begins on" /></label>
                   <md-select ng-model="app.preferences.defaults.SOGoFirstDayOfWeek">
                     <var:foreach list="daysList" item="item">
@@ -259,7 +250,7 @@
                   </md-select>
                 </md-input-container>
 
-                <md-input-container>
+                <md-input-container class="md-block" flex="33">
                   <label><var:string label:value="Day start time" /></label>
                   <md-select ng-model="app.preferences.defaults.SOGoDayStartTime">
                     <var:foreach list="hoursList" item="item">
@@ -270,7 +261,7 @@
                   </md-select>
                 </md-input-container>
 
-                <md-input-container>
+                <md-input-container class="md-block" flex="33">
                   <label><var:string label:value="Day end time" /></label>
                   <md-select ng-model="app.preferences.defaults.SOGoDayEndTime">
                     <var:foreach list="hoursList" item="item">
@@ -313,7 +304,7 @@
               </md-input-container>
 
               <div layout="row">
-                <md-input-container>
+                <md-input-container class="md-block" flex="50">
                   <label><var:string label:value="Default events classification" /></label>
                   <md-select ng-model="app.preferences.defaults.SOGoCalendarEventsDefaultClassification">
                     <var:foreach list="calendarClassificationsList" item="item">
@@ -324,7 +315,7 @@
                   </md-select>
                 </md-input-container>
 
-                <md-input-container>
+                <md-input-container class="md-block" flex="50">
                   <label><var:string label:value="Default tasks classification"/></label>
                   <md-select ng-model="app.preferences.defaults.SOGoCalendarTasksDefaultClassification">
                     <var:foreach list="calendarClassificationsList" item="item">
@@ -362,7 +353,7 @@
                                          app.preferences.defaults.SOGoCalendarCategories
                                          track by $index">
                   <sg-color-picker ng-model="app.preferences.defaults.SOGoCalendarCategoriesColors[item]"><!-- color picker--></sg-color-picker>
-                  <md-input-container>
+                  <md-input-container class="md-block md-flex">
 	            <input type="text" label:aria-label="Calendar Category"
                            ng-model="app.preferences.defaults.SOGoCalendarCategories[$index]"
                            sg-focus-on="calendarCategory_{{$index}}"/>
@@ -445,7 +436,7 @@
                               ng-repeat="item in
                                          app.preferences.defaults.SOGoContactsCategories
                                          track by $index">
-                  <md-input-container>
+                  <md-input-container class="md-block md-flex">
 	            <input type="text"
                            label:aria-label="Contact Category"
                            ng-model="app.preferences.defaults.SOGoContactsCategories[$index]"
@@ -508,7 +499,7 @@
               </md-checkbox>
             </div>
 
-            <div layout="row" layout-align="space-around end">
+            <div>
               <md-checkbox
                   class="md-align-top-left" ng-model="app.preferences.defaults.SOGoMailAddOutgoingAddresses"
                   ng-true-value="1"
@@ -531,7 +522,7 @@
               </md-input-container>
             </div>
 
-            <md-input-container>
+            <md-input-container class="md-block">
               <label><var:string label:value="Forward messages"/></label>
               <md-select ng-model="app.preferences.defaults.SOGoMailMessageForwarding">
                 <var:foreach list="messageForwardingList" item="item">
@@ -542,8 +533,8 @@
               </md-select>
             </md-input-container>
 
-            <div layout="row">
-              <md-input-container>
+            <div layout="row" layout-wrap="layout-wrap">
+              <md-input-container class="md-block" flex="50" flex-xs="100">
                 <label><var:string label:value="When replying to a message"/></label>
                 <md-select ng-model="app.preferences.defaults.SOGoMailReplyPlacement">
                   <var:foreach list="replyPlacementList" item="item">
@@ -554,7 +545,7 @@
                 </md-select>
               </md-input-container>
 
-              <md-input-container>
+              <md-input-container class="md-block" flex="50" flex-xs="100">
                 <label><var:string label:value="And place my signature"/></label>
                 <md-select ng-model="app.preferences.defaults.SOGoMailSignaturePlacement">
                   <var:foreach list="signaturePlacementList" item="item">
@@ -566,7 +557,7 @@
               </md-input-container>
             </div>
 
-            <md-input-container>
+            <md-input-container class="md-block">
               <label><var:string label:value="Compose messages in"/></label>
               <md-select ng-model="app.preferences.defaults.SOGoMailComposeMessageType">
                 <var:foreach list="composeMessagesType" item="item">
@@ -577,7 +568,7 @@
               </md-select>
             </md-input-container>
 
-            <md-input-container>
+            <md-input-container class="md-block">
               <label><var:string label:value="Display remote inline images"/></label>
               <md-select ng-model="app.preferences.defaults.SOGoMailDisplayRemoteInlineImages">
                 <var:foreach list="displayRemoteInlineImages" item="item">
@@ -589,8 +580,8 @@
             </md-input-container>
 
             <div layout="row" layout-align="start center">
-              <var:string label:value="Auto save every"/>
-              <md-input-container class="md-input-number">
+              <p><var:string label:value="Auto save every"/></p>
+              <md-input-container class="md-input-number" md-no-float="md-no-float">
                 <input type="number" min="0" label:aria-label="minutes" ng-model="preferences.defaults.SOGoMailAutoSave"/>
               </md-input-container>
               <var:string label:value="minutes"/>
@@ -619,7 +610,7 @@
                       ng-false-value="0">
                     <!-- active or not-->
                   </md-checkbox>
-                  <md-input-container>
+                  <md-input-container class="md-flex">
 	            <input type="text" ng-model="app.preferences.defaults.SOGoSieveFilters[$index].name"/>
                   </md-input-container>
                   <md-button class="sg-icon-button" type="button"
@@ -656,17 +647,17 @@
 
           <md-content role="tabpanel" aria-labelledby="mailLabelsView"
                       id="mailLabelsView-content" class="md-padding">
-            <md-list layout="row" layout-wrap="layout-wrap">
-              <md-list-item flex="50"
+            <md-list layout="row" layout-xs="column" layout-wrap="layout-wrap">
+              <md-list-item flex="50" flex-xs="100"
                             ng-repeat="(key, value) in
                                        app.preferences.defaults.SOGoMailLabelsColors">
                 <sg-color-picker ng-model="value[1]"><!-- color picker--></sg-color-picker>
-                <md-input-container>
+                <md-input-container class="md-block md-flex">
 	          <input type="text"
                          label:aria-label="Label"
                          ng-model="value[0]"/>
                 </md-input-container>
-                <md-button class="sg-icon-button" type="button"
+                <md-button class="md-icon-button" type="button"
                            layout="row" layout-align="end center"
                            label:aria-label="Delete Label"
                            ng-click="app.removeMailLabel(key)">
@@ -695,7 +686,7 @@
             <md-list-item ng-repeat="item in
                                      app.preferences.defaults.AuxiliaryMailAccounts
                                      track by $index">
-              <md-input-container>
+              <md-input-container class="md-block md-flex">
 	        <input type="text"
                        label:aria-label="Mail Account"
                        ng-model="app.preferences.defaults.AuxiliaryMailAccounts[$index].name"
@@ -747,28 +738,28 @@
                 <var:string label:value="Enable vacation auto reply"/>
               </md-checkbox>
 
-              <div flex-offset="5" ng-show="app.preferences.defaults.Vacation.enabled == 1">
-                <md-input-container>
+              <div layout="column" flex-offset="5" ng-show="app.preferences.defaults.Vacation.enabled == 1">
+                <md-input-container class="md-block md-flex">
                   <label><var:string label:value="Auto reply message"/></label>
                   <textarea const:name="autoReplyText"
                             const:id="autoReplyText"
                             ng-model="app.preferences.defaults.Vacation.autoReplyText"/>
                 </md-input-container>
 
-                <md-input-container>
-                  <label><var:string label:value="Email addresses (separated by commas)"/></label>
-                  <textarea const:name="autoReplyEmailAddresses"
-                            required="required"
-                            const:id="autoReplyEmailAddresses"
-                            ng-model="app.preferences.defaults.Vacation.autoReplyEmailAddresses"/>
-                </md-input-container>
-                <div layout="row" layout-align="end center">
+                <div layout="row" layout-align="start center">
+                  <md-input-container class="md-block md-flex">
+                    <label><var:string label:value="Email addresses (separated by commas)"/></label>
+                    <textarea const:name="autoReplyEmailAddresses"
+                              required="required"
+                              const:id="autoReplyEmailAddresses"
+                              ng-model="app.preferences.defaults.Vacation.autoReplyEmailAddresses"/>
+                  </md-input-container>
                   <md-button ng-click="app.addDefaultEmailAddresses()">
                     <var:string label:value="Add default email addresses" type="button"/>
                   </md-button>
                 </div>
 
-                <md-input-container>
+                <md-input-container class="md-block md-flex">
                   <label><var:string label:value="Days between responses"/></label>
                   <md-select label:aria-label="Days between responses"
                              ng-model="app.preferences.defaults.Vacation.daysBetweenResponse">
@@ -789,7 +780,7 @@
                   </md-checkbox>
                 </div>
 
-                <div layout="row" layout-align="start center">
+                <div layout="row">
                   <md-checkbox
                       ng-model="app.preferences.defaults.Vacation.endDateEnabled"
                       ng-true-value="1"
@@ -830,7 +821,7 @@
               </md-checkbox>
 
               <div flex-offset="5" ng-show="app.preferences.defaults.Forward.enabled == 1">
-                <md-input-container>
+                <md-input-container class="md-block md-flex">
                   <label><var:string label:value="Email addresses (separated by commas)"/></label>
                   <textarea const:name="forwardAddress"
                             const:id="forwardAddress"
diff --git a/UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox b/UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox
index bc9e1d38f..cafc6b9aa 100644
--- a/UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox
+++ b/UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox
@@ -24,19 +24,21 @@
         </div>
       </md-toolbar>
       <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.service.$findAll(null, true)"
-                       ng-value="calendar.id">{{calendar.name}}</md-option>
-          </md-select>
-        </md-input-container>
+        <div layout="row" layout-wrap="layout-wrap">
+          <!-- location -->
+          <md-input-container flex="50" flex-xs="100">
+            <label><var:string label:value="Location"/></label>
+            <input type="text" ng-model="editor.component.location"/>
+          </md-input-container>
+          <!-- calendar -->
+          <md-input-container flex="50" flex-xs="100">
+            <label><var:string label:value="Calendar"/></label>
+            <md-select ng-model="editor.component.destinationCalendar">
+              <md-option ng-repeat="calendar in editor.service.$findAll(null, true)"
+                         ng-value="calendar.id">{{calendar.name}}</md-option>
+            </md-select>
+          </md-input-container>
+        </div>
         <!-- categories -->
         <md-chips ng-model="editor.component.categories">
           <md-autocomplete
@@ -73,6 +75,7 @@
                      label:aria-label="Priority"><!-- slider --></md-slider>
         </div>
         <!-- is all day -->
+        <div layout="row">
         <md-checkbox
             ng-model="editor.component.isAllDay"
             ng-true-value="1"
@@ -80,7 +83,9 @@
             label:aria-label="All day Event">
           <var:string label:value="All day Event"/>
         </md-checkbox>
+        </div>
         <!-- is transparent -->
+        <div layout="row">
         <md-checkbox
             ng-model="editor.component.isTransparent"
             ng-true-value="1"
@@ -88,7 +93,9 @@
             label:aria-label="Show Time as Free">
           <var:string label:value="Show Time as Free"/>
         </md-checkbox>
+        </div>
         <!-- send appointment notifications -->
+        <div layout="row">
         <md-checkbox
             ng-model="editor.component.sendAppointmentNotifications"
             ng-true-value="1"
@@ -96,6 +103,7 @@
             label:aria-label="Send Appointment Notifications">
           <var:string label:value="Send Appointment Notifications"/>
         </md-checkbox>
+        </div>
         <!-- start + end -->
         <div layout="row">
           <div flex="50">
@@ -127,8 +135,8 @@
         </div>
         <!-- attach urls -->
         <div class="attr" ng-repeat="attach in editor.component.attachUrls">
-          <div layout="row" layout-align="center end">
-            <md-input-container>
+          <div layout="row">
+            <md-input-container class="md-block md-flex">
               <label>
                 <var:string label:value="URL"/>
               </label>
@@ -149,14 +157,14 @@
           </label>
         </div>
         <!-- comment -->
-        <md-input-container>
+        <md-input-container class="md-block md-flex">
           <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>
+            <md-input-container class="md-block md-flex">
               <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">
@@ -177,28 +185,25 @@
           <var:component className="UIxRecurrenceEditor" />
         </div>
         <!-- end repeat -->
-        <div layout="row" layout-align="start end">
-          <div flex="50" flex-xs="100"
-               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"/>
+        <div layout="row">
+          <md-input-container class="md-block" flex="50" flex-xs="100"
+                              ng-show="editor.component.repeat.frequency != 'never'">
+            <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>
+          <md-input-container class="md-block md-input-number"
+                              ng-show="editor.component.repeat.end == 'count'">
+            <label><var:string label:value="times"/></label>
+            <input type="number" label:aria-label="times" ng-model="editor.component.repeat.count"/>
+          </md-input-container>
+          <md-datepicker ng-show="editor.component.repeat.end == 'until'"
+                         ng-model="editor.component.repeat.until"
+                         label:md-placeholder="On Date"><!-- date picker --></md-datepicker>
         </div>
         <!-- attendees -->
         <div layout="row" layout-align="start start">
@@ -255,7 +260,7 @@
                      label:aria-label="Reminder">
           <var:string label:value="Reminder"/>
         </md-checkbox>
-        <div class="sg-subcontent"
+        <div flex-offset="5"
              ng-show="editor.component.$hasAlarm">
           <var:component className="UIxReminderEditor" />
         </div>
diff --git a/UI/Templates/SchedulerUI/UIxCalMainView.wox b/UI/Templates/SchedulerUI/UIxCalMainView.wox
index a064965df..fa7c425d1 100644
--- a/UI/Templates/SchedulerUI/UIxCalMainView.wox
+++ b/UI/Templates/SchedulerUI/UIxCalMainView.wox
@@ -539,15 +539,16 @@
           </div>
           <!-- search mode -->
           <div class="md-toolbar-tools sg-toolbar-secondary"
+               layout="row"
                ng-show="list.mode.search"
                sg-search="list.component.$filter(list.componentType, { value: searchText, search: searchField })">
-            <md-button class="sg-icon-button"
+            <md-button class="md-icon-button"
                        sg-search-cancel="list.cancelSearch()"
                        label:aria-label="Back">
               <md-icon>arrow_back</md-icon>
             </md-button>
-            <md-input-container>
-              <input name="folderSearch" type="search" />
+            <md-input-container class="md-flex" md-no-float="md-no-float">
+              <input name="folderSearch" type="search" label:placeholder="Search"/>
             </md-input-container>
             <md-input-container flex="25">
               <md-select>
diff --git a/UI/Templates/SchedulerUI/UIxCalUserRightsEditor.wox b/UI/Templates/SchedulerUI/UIxCalUserRightsEditor.wox
index e9f6186d2..02a5d8cb6 100644
--- a/UI/Templates/SchedulerUI/UIxCalUserRightsEditor.wox
+++ b/UI/Templates/SchedulerUI/UIxCalUserRightsEditor.wox
@@ -9,9 +9,9 @@
    xmlns:uix="OGo:uix">
   <div layout="column">
 
-    <md-input-container>
+    <md-input-container class="md-block md-flex">
       <label><var:string label:value="label_Public"/></label>
-      <md-select flex="50" label:aria-label="Public"
+      <md-select label:aria-label="Public"
                  ng-model="acl.selectedUser.rights.Public"
                  ng-change="acl.confirmChange(acl.selectedUser)">
         <var:foreach list="objectRights" item="currentRight">
@@ -22,9 +22,9 @@
       </md-select>
     </md-input-container>
 
-    <md-input-container>
+    <md-input-container class="md-block md-flex">
       <label><var:string label:value="label_Confidential"/></label>
-      <md-select flex="50" label:aria-label="Confidential"
+      <md-select label:aria-label="Confidential"
                  ng-model="acl.selectedUser.rights.Confidential"
                  ng-change="acl.confirmChange(acl.selectedUser)">
         <var:foreach list="objectRights" item="currentRight">
@@ -35,9 +35,9 @@
       </md-select>
     </md-input-container>
 
-    <md-input-container>
+    <md-input-container class="md-block md-flex">
       <label><var:string label:value="label_Private"/></label>
-      <md-select flex="50" label:aria-label="Private"
+      <md-select label:aria-label="Private"
                  ng-model="acl.selectedUser.rights.Private"
                  ng-change="acl.confirmChange(acl.selectedUser)">
         <var:foreach list="objectRights" item="currentRight">
diff --git a/UI/Templates/SchedulerUI/UIxCalendarFolderLinksTemplate.wox b/UI/Templates/SchedulerUI/UIxCalendarFolderLinksTemplate.wox
index 0b6cce096..ee125db0d 100644
--- a/UI/Templates/SchedulerUI/UIxCalendarFolderLinksTemplate.wox
+++ b/UI/Templates/SchedulerUI/UIxCalendarFolderLinksTemplate.wox
@@ -24,46 +24,44 @@
     <md-dialog-content class="md-padding">
       <div layout="column">
 
-        <div layout="column" layout-padding="layout-padding">
-          <md-input-container ng-show="links.calendar.isWebCalendar">
-            <label><var:string label:value="URL"/></label>
-            <input type="text" ng-model="links.calendar.urls.webCalendarURL" ng-readonly="true"/>
-          </md-input-container>
+        <md-input-container class="md-block" ng-show="links.calendar.isWebCalendar">
+          <label><var:string label:value="URL"/></label>
+          <input type="text" ng-model="links.calendar.urls.webCalendarURL" ng-readonly="true"/>
+        </md-input-container>
 
-          <div ng-hide="links.calendar.isWebCalendar">
-            <div class="sg-md-title"><var:string label:value="Authenticated User Access"/></div>
-            <md-input-container>
-              <label><var:string label:value="CalDAV URL"/></label>
-              <input type="text" ng-model="links.calendar.urls.calDavURL" ng-readonly="true"/>
-            </md-input-container>
-            <md-input-container>
-              <label><var:string label:value="WebDAV ICS URL"/></label>
-              <input  type="text" ng-model="links.calendar.urls.webDavICSURL" ng-readonly="true"/>
-            </md-input-container>
-            <md-input-container>
-              <label><var:string label:value="WebDAV XML URL"/></label>
-              <input  type="text" ng-model="links.calendar.urls.webDavXMLURL" ng-readonly="true"/>
-            </md-input-container>
-          </div>
+        <div layout="column" ng-hide="links.calendar.isWebCalendar">
+          <div class="sg-md-title"><var:string label:value="Authenticated User Access"/></div>
+          <md-input-container class="md-block">
+            <label><var:string label:value="CalDAV URL"/></label>
+            <input type="text" ng-model="links.calendar.urls.calDavURL" ng-readonly="true"/>
+          </md-input-container>
+          <md-input-container class="md-block">
+            <label><var:string label:value="WebDAV ICS URL"/></label>
+            <input  type="text" ng-model="links.calendar.urls.webDavICSURL" ng-readonly="true"/>
+          </md-input-container>
+          <md-input-container class="md-block">
+            <label><var:string label:value="WebDAV XML URL"/></label>
+            <input  type="text" ng-model="links.calendar.urls.webDavXMLURL" ng-readonly="true"/>
+          </md-input-container>
         </div>
 
         <var:if condition="isPublicAccessEnabled">
-            <div layout="column" layout-padding="layout-padding" ng-hide="links.calendar.isWebCalendar">
-              <div class="sg-md-title"><var:string label:value="Public Access"/></div>
-              <md-input-container>
-                <label><var:string label:value="CalDAV URL"/></label>
-                <input type="text" ng-model="links.calendar.urls.publicCalDavURL" ng-readonly="true"/>
-              </md-input-container>
-              <md-input-container>
-                <label><var:string label:value="WebDAV ICS URL"/></label>
-                <input type="text" ng-model="links.calendar.urls.publicWebDavICSURL" ng-readonly="true"/>
-              </md-input-container>
-              <md-input-container>
-                <label><var:string label:value="WebDAV XML URL"/></label>
-                <input type="text" ng-model="links.calendar.urls.publicWebDavXMLURL" ng-readonly="true"/>
-              </md-input-container>
-            </div>
-          </var:if>
+          <div layout="column" ng-hide="links.calendar.isWebCalendar">
+            <div class="sg-md-title"><var:string label:value="Public Access"/></div>
+            <md-input-container class="md-block">
+              <label><var:string label:value="CalDAV URL"/></label>
+              <input type="text" ng-model="links.calendar.urls.publicCalDavURL" ng-readonly="true"/>
+            </md-input-container>
+            <md-input-container class="md-block">
+              <label><var:string label:value="WebDAV ICS URL"/></label>
+              <input type="text" ng-model="links.calendar.urls.publicWebDavICSURL" ng-readonly="true"/>
+            </md-input-container>
+            <md-input-container class="md-block">
+              <label><var:string label:value="WebDAV XML URL"/></label>
+              <input type="text" ng-model="links.calendar.urls.publicWebDavXMLURL" ng-readonly="true"/>
+            </md-input-container>
+          </div>
+        </var:if>
       </div>
 
     </md-dialog-content>
diff --git a/UI/Templates/SchedulerUI/UIxCalendarProperties.wox b/UI/Templates/SchedulerUI/UIxCalendarProperties.wox
index 12b87edc8..d05041da0 100644
--- a/UI/Templates/SchedulerUI/UIxCalendarProperties.wox
+++ b/UI/Templates/SchedulerUI/UIxCalendarProperties.wox
@@ -13,7 +13,7 @@
         <!-- color -->
         <sg-color-picker ng-model="properties.calendar.color"><!-- color picker --></sg-color-picker>
         <!-- name -->
-        <md-input-container>
+        <md-input-container class="md-block md-flex">
           <label><var:string label:value="Name"/></label>
           <input type="text"
                  class="md-title"
@@ -60,7 +60,7 @@
         <var:string label:value="Reload on login"/>
       </md-checkbox>
       <div ng-hide="properties.calendar.isWebCalendar || !properties.calendar.isOwned" layout="column">
-        <md-divider><!-- divider --></md-divider>
+        <md-divider class="md-padding"><!-- divider --></md-divider>
         <md-checkbox
             ng-model="properties.calendar.notifications.notifyOnPersonalModifications"
             ng-true-value="1"
@@ -79,7 +79,7 @@
             ng-false-value="0">
           <var:string label:value="When I modify my calendar, send a mail to"/>
         </md-checkbox>
-        <md-input-container md-no-float="md-no-float">
+        <md-input-container flex-offset="5" md-no-float="md-no-float">
           <input type="text"
                  label:placeholder="Email Address"
                  ng-value="properties.calendar.notifications.notifiedUserOnPersonalModifications"
diff --git a/UI/Templates/SchedulerUI/UIxReminderEditor.wox b/UI/Templates/SchedulerUI/UIxReminderEditor.wox
index fdadfe4fa..08903ea7f 100644
--- a/UI/Templates/SchedulerUI/UIxReminderEditor.wox
+++ b/UI/Templates/SchedulerUI/UIxReminderEditor.wox
@@ -4,7 +4,7 @@
     xmlns:var="http://www.skyrix.com/od/binding"
     xmlns:const="http://www.skyrix.com/od/constant"
     xmlns:label="OGo:label">
-  <div layout="row" layout-align="start center" layout-wrap="layout-wrap">
+  <div layout="row" layout-wrap="layout-wrap">
     <md-input-container class="md-input-number">
       <input type="number" label:aria-label="quantity" ng-model="editor.component.alarm.quantity"/>
     </md-input-container>
@@ -32,18 +32,16 @@
   </div>
 
   <var:if condition="emailAlarmsEnabled">
-    <div layout="row" layout-align="space-around center">
-      <md-radio-group layout="row" layout-align="space-around center"
-                      ng-model="editor.component.alarm.action">
-        <md-radio-button value="display">
-          <var:string label:value="Show an Alert"/>
-        </md-radio-button>
-        <md-radio-button value="email">
-          <var:string label:value="Send an E-mail"/>
-        </md-radio-button>
-      </md-radio-group>
-    </div>
-    <div layout="row" layout-align="space-around center"
+    <md-radio-group layout="column"
+                    ng-model="editor.component.alarm.action">
+      <md-radio-button value="display">
+        <var:string label:value="Show an Alert"/>
+      </md-radio-button>
+      <md-radio-button value="email">
+        <var:string label:value="Send an E-mail"/>
+      </md-radio-button>
+    </md-radio-group>
+    <div layout="row" flex-offset="5"
          ng-show="editor.component.canRemindAttendeesByEmail()">
       <md-checkbox ng-model="editor.component.alarm.organizer"
                    ng-true-value="1"
diff --git a/UI/Templates/SchedulerUI/UIxTaskEditorTemplate.wox b/UI/Templates/SchedulerUI/UIxTaskEditorTemplate.wox
index 6667da874..97f87eebb 100644
--- a/UI/Templates/SchedulerUI/UIxTaskEditorTemplate.wox
+++ b/UI/Templates/SchedulerUI/UIxTaskEditorTemplate.wox
@@ -11,7 +11,7 @@
           <!-- summary -->
           <md-icon ng-if="editor.component.classification == 'confidential'">visibility_off</md-icon>
           <md-icon ng-if="editor.component.classification == 'private'">vpn_key</md-icon>
-          <md-input-container>
+          <md-input-container class="md-block md-flex">
             <label><var:string label:value="Title"/></label>
             <input type="text"
                    class="md-title"
@@ -24,11 +24,21 @@
         </div>
       </md-toolbar>
       <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>
+        <div layout="row" layout-wrap="layout-wrap">
+          <!-- location -->
+          <md-input-container flex="50" flex-xs="100">
+            <label><var:string label:value="Location"/></label>
+            <input type="text" ng-model="editor.component.location"/>
+          </md-input-container>
+          <!-- calendar -->
+          <md-input-container flex="50" flex-xs="100">
+            <label><var:string label:value="Calendar"/></label>
+            <md-select ng-model="editor.component.destinationCalendar">
+              <md-option ng-repeat="calendar in editor.service.$findAll(null, true)"
+                         ng-value="calendar.id">{{calendar.name}}</md-option>
+            </md-select>
+          </md-input-container>
+        </div>
         <!-- categories -->
         <md-chips ng-model="editor.component.categories">
           <md-autocomplete
@@ -40,16 +50,8 @@
             <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.service.$findAll(null, true)"
-                       ng-value="calendar.id">{{calendar.name}}</md-option>
-          </md-select>
-        </md-input-container>
         <!-- classification -->
-        <md-radio-group layout="row" layout-align="space-around center"
+        <md-radio-group class="md-padding" layout="row" layout-align="space-around center"
                         ng-model="editor.component.classification">
           <md-radio-button value="public">
             <var:string label:value="label_Public"/>
@@ -145,7 +147,7 @@
         <!-- attach urls -->
         <div class="attr" ng-repeat="attach in editor.component.attachUrls">
           <div layout="row" layout-align="center end">
-            <md-input-container>
+            <md-input-container class="md-block md-flex">
               <label>
                 <var:string label:value="URL"/>
               </label>
@@ -166,13 +168,13 @@
           </label>
         </div>
         <!-- comment -->
-        <md-input-container>
+        <md-input-container class="md-block md-flex">
           <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>
+          <md-input-container class="md-block md-flex">
             <label><var:string label:value="Repeat"/></label>
             <md-select class="pseudo-input-field" ng-model="editor.component.repeat.frequency">
               <var:foreach list="repeatList" item="item">
@@ -192,33 +194,32 @@
           <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"/>
+        <div layout="row">
+          <md-input-container class="md-block" flex="50" flex-xs="100"
+                              ng-show="editor.component.repeat.frequency != 'never'">
+            <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>
+          <md-input-container class="md-block md-input-number"
+                              ng-show="editor.component.repeat.end == 'count'">
+            <label><var:string label:value="times"/></label>
+            <input type="number" label:aria-label="times" ng-model="editor.component.repeat.count"/>
+          </md-input-container>
+          <md-datepicker ng-show="editor.component.repeat.end == 'until'"
+                         ng-model="editor.component.repeat.until"
+                         label:md-placeholder="On Date"><!-- date picker --></md-datepicker>
         </div>
         <!-- reminder -->
         <md-checkbox ng-model="editor.component.$hasAlarm"
                      label:aria-label="Reminder">
           <var:string label:value="Reminder"/>
         </md-checkbox>
-        <div class="sg-subcontent"
+        <div flex-offset="5"
              ng-show="editor.component.$hasAlarm">
           <var:component className="UIxReminderEditor" />
         </div>
diff --git a/UI/WebServerResources/js/Preferences/FiltersDialogController.js b/UI/WebServerResources/js/Preferences/FiltersDialogController.js
index 0bbe20118..f2b1e3fe9 100644
--- a/UI/WebServerResources/js/Preferences/FiltersDialogController.js
+++ b/UI/WebServerResources/js/Preferences/FiltersDialogController.js
@@ -37,19 +37,19 @@
     vm.methodLabels = {
       "discard": l("Discard the message"),
       "keep": l("Keep the message"),
-      "redirect": l("Forward the message to:"),
+      "redirect": l("Forward the message to"),
       "vacation": l("Send a vacation message"),
       "stop": l("Stop processing filter rules")
     };
 
     if (sieveCapabilities.indexOf("reject") > -1)
-      vm.methodLabels.reject = l("Send a reject message:");
+      vm.methodLabels.reject = l("Send a reject message");
 
     if (sieveCapabilities.indexOf("fileinto") > -1)
-      vm.methodLabels.fileinto = l("File the message in:");
+      vm.methodLabels.fileinto = l("File the message in");
 
     if (sieveCapabilities.indexOf("imapflags") > -1 || sieveCapabilities.indexOf("imap4flags") > -1)
-      vm.methodLabels.addflag = l("Flag the message with:");
+      vm.methodLabels.addflag = l("Flag the message with");
 
     vm.numberOperatorLabels = {
       "under": l("is under"),
diff --git a/UI/WebServerResources/scss/components/autocomplete/autocomplete.scss b/UI/WebServerResources/scss/components/autocomplete/autocomplete.scss
index becdb800a..0c4351d8f 100644
--- a/UI/WebServerResources/scss/components/autocomplete/autocomplete.scss
+++ b/UI/WebServerResources/scss/components/autocomplete/autocomplete.scss
@@ -1,6 +1,6 @@
 @import "extends";
 
-@media (max-width: $layout-breakpoint-sm) {
+@media (max-width: $layout-breakpoint-xs) {
   // Enlarge the autocompletion menu on small devices to fit the entire screen
   .md-autocomplete-suggestions-container {
     right: $baseline-grid*2;
diff --git a/UI/WebServerResources/scss/components/pseudo-input/pseudo-input.scss b/UI/WebServerResources/scss/components/pseudo-input/pseudo-input.scss
index c77d2c6eb..6cfa7167a 100644
--- a/UI/WebServerResources/scss/components/pseudo-input/pseudo-input.scss
+++ b/UI/WebServerResources/scss/components/pseudo-input/pseudo-input.scss
@@ -15,20 +15,6 @@
 ///
 /// ----------------------------------------------------------------------------
 
-// md-input variables we might use
-// ----------------------------------------------------------------------------
-$input-container-padding: 2px !default;
-
-$input-label-default-offset: 24px !default;
-$input-label-default-scale: 1.0 !default;
-$input-label-float-offset: 4px !default;
-$input-label-float-scale: 0.75 !default;
-
-$input-border-width-default: 1px !default;
-$input-border-width-focused: 2px !default;
-$input-line-height: 26px !default;
-$input-padding-top: 2px !default;
-
 .pseudo-input-container {
   display: block; // Should be (reset to ?) a plain block element
   padding: 0 2px;
@@ -94,108 +80,6 @@ input #inner-editor {
   line-height: inherit;
 }
 
-:root #placeholder,
-:root [pseudo="-webkit-input-placeholder"] {
-  padding: 0;
-  height: $mg;
-  color: $colorGrayLight;
-  font: inherit;
-  line-height: inherit;
-}
-
-input::-webkit-datetime-edit,
-:root div#date-time-edit {
-  opacity: 0;
-}
-
-.md-input-focused input::-webkit-datetime-edit,
-.md-input-focused div#date-time-edit,
-.md-input-has-value input::-webkit-datetime-edit {
-  opacity: 1;
-}
-
-md-input-container {
-  display: flex;
-  position: relative;
-  flex-direction: column;
-  flex: 1 1 auto;
-  padding: $input-container-padding;
-
-  textarea,
-  input[type="text"],
-  input[type="password"],
-  input[type="datetime"],
-  input[type="datetime-local"],
-  input[type="date"],
-  input[type="month"],
-  input[type="time"],
-  input[type="week"],
-  input[type="number"],
-  input[type="email"],
-  input[type="url"],
-  input[type="search"],
-  input[type="tel"],
-  input[type="color"] {
-    /* remove default appearance from all input/textarea */
-    -moz-appearance: none;
-    -webkit-appearance: none;
-  }
-  textarea {
-    resize: none;
-    overflow: hidden;
-  }
-
-  label {
-    order: 1;
-    pointer-events: none;
-    -webkit-font-smoothing: antialiased;
-    z-index: 1;
-    transform: translate3d(0, $input-label-default-offset, 0) scale($input-label-default-scale);
-    transform-origin: left top;
-    transition: all $swift-ease-out-timing-function 0.2s;
-  }
-
-  /* 
-   * The .md-input class is added to the input/textarea 
-   */
-  .md-input {
-    flex: 1;
-    order: 2;
-    display: block;
-
-    background: none;
-    padding-top: $input-padding-top;
-    padding-bottom: $input-border-width-focused - $input-border-width-default;
-    border-width: 0 0 $input-border-width-default 0;
-    line-height: $input-line-height;
-    -ms-flex-preferred-size: $input-line-height; //IE fix
-
-    &:focus {
-      outline: none;
-    }
-  }
-
-  &.md-input-focused,
-  &.md-input-has-value {
-    label {
-      transform: translate3d(0,$input-label-float-offset,0) scale($input-label-float-scale);
-    }
-  }
-  &.md-input-focused {
-    .md-input {
-      padding-bottom: 0px; // Increase border width by 1px, decrease padding by 1
-      border-width: 0 0 $input-border-width-focused 0;
-    }
-  }
-
-  .md-input[disabled] {
-    background-position: 0 bottom;
-    // This background-size is coordinated with a linear-gradient set in input-theme.scss
-    // to create a dotted line under the input. 
-    background-size: 3px 1px;
-    background-repeat: repeat-x;
-  }
-}
 md-input-container .bgroup {
   display: block;
 }
diff --git a/UI/WebServerResources/scss/components/radioButton/radio-button.scss b/UI/WebServerResources/scss/components/radioButton/radio-button.scss
index 33b266beb..9f7bc2955 100644
--- a/UI/WebServerResources/scss/components/radioButton/radio-button.scss
+++ b/UI/WebServerResources/scss/components/radioButton/radio-button.scss
@@ -1 +1,9 @@
-@import "extends";
\ No newline at end of file
+@import "extends";
+
+md-input-container {
+  md-radio-group {
+    md-radio-button:first-child {
+      margin-top: $radio-top-left;
+    }
+  }
+}
\ No newline at end of file
diff --git a/UI/WebServerResources/scss/components/select/select.scss b/UI/WebServerResources/scss/components/select/select.scss
index 482e33ed7..f5bd731ef 100644
--- a/UI/WebServerResources/scss/components/select/select.scss
+++ b/UI/WebServerResources/scss/components/select/select.scss
@@ -1,32 +1 @@
 @import "extends";
-
-// Try to align select labels with other input components
-[layout="row"] {
-  .md-select-label {
-    padding-top: 4px;
-  }
-}
-
-// angular material overqualifies, so we are
-md-select.md-default-theme.sg-toolbar-sort {
-  margin: 0 $bl 4px 0;
-  color: $colorWhite;
-
-  md-select-label.md-select-label {
-    border: none;
-    color: inherit;
-  }
-}
-
-md-select.md-default-theme.sg-logout {
-  margin-top: $bl;
-  color: $colorWhite;
-
-  // angular material overqualifies, so we are
-  md-select-label.md-select-label,
-  md-select-label.md-select-label.md-placeholder,
-  md-select-label.md-select-label * {
-    border: none;
-    color: $colorWhite;
-  }
-}
\ No newline at end of file
diff --git a/UI/WebServerResources/scss/components/toolbar/toolbar.scss b/UI/WebServerResources/scss/components/toolbar/toolbar.scss
index e0113a15a..85d2612d0 100644
--- a/UI/WebServerResources/scss/components/toolbar/toolbar.scss
+++ b/UI/WebServerResources/scss/components/toolbar/toolbar.scss
@@ -41,12 +41,16 @@ md-toolbar,
   // Animate the first icon button of a "secondary" toolbar
   &.sg-toolbar-secondary {
     > .md-toolbar-tools > .sg-icon-button:first-child,
-    > .sg-icon-button:first-child {
+    > .md-toolbar-tools > .md-icon-button:first-child,
+    > .sg-icon-button:first-child,
+    > .md-icon-button:first-child {
       transition: $swift-ease-in;
       transform: translateX(0px);
     }
     &.ng-hide > .md-toolbar-tools > .sg-icon-button:first-child,
-    &.ng-hide > .sg-icon-button:first-child {
+    &.ng-hide > .md-toolbar-tools > .md-icon-button:first-child,
+    &.ng-hide > .sg-icon-button:first-child,
+    &.ng-hide > .md-icon-button:first-child {
       transform: translateX(-$touch-zone-width);
     }
   }
diff --git a/UI/WebServerResources/scss/core/typography.scss b/UI/WebServerResources/scss/core/typography.scss
index 6f694b148..9ce5f1da5 100644
--- a/UI/WebServerResources/scss/core/typography.scss
+++ b/UI/WebServerResources/scss/core/typography.scss
@@ -271,7 +271,8 @@ html p {
   font-size: $sg-font-size-2;
   line-height: $sg-line-height-1;
   font-weight: $sg-font-medium;
-  white-space: nowrap;}
+  white-space: nowrap;
+}
 .#{$md}-button {
   font-size: $sg-font-size-2;
   line-height: $sg-line-height-1;
diff --git a/UI/WebServerResources/scss/views/MailerUI.scss b/UI/WebServerResources/scss/views/MailerUI.scss
index 56e4d1515..34ea4dc3c 100644
--- a/UI/WebServerResources/scss/views/MailerUI.scss
+++ b/UI/WebServerResources/scss/views/MailerUI.scss
@@ -188,6 +188,7 @@ md-sidenav {
     max-height: 400px;
     overflow: hidden;
     overflow-y: auto;
+    padding-bottom: 2px; // leave some space for the border
     transition: $swift-ease-in;
     &.ng-hide {
       max-height: 0;