Adjust containers width according to Google's specs

UI/Templates/MailerUI/UIxMailFolderTemplate.wox

@@ -2,7 +2,7 @@
 <container
     xmlns = "http://www.w3.org/1999/xhtml"
     >
-  <md-content flex="40" style="min-width: 300px; position: relative;" id="messagesList">
+  <md-content style="min-width: 300px; position: relative;" id="messagesList">
     <style>
       .vs-repeat-repeated-element {
         width: 100%;

UI/WebServerResources/css/styles.css

@@ -8316,7 +8316,7 @@ md-tooltip {
 .md-whiteframe-z1 {
   box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.26); }
 
-.md-whiteframe-z2, [id='messagesList'] {
+.md-whiteframe-z2 {
   box-shadow: 0px 8px 17px rgba(0, 0, 0, 0.2); }
 
 .md-whiteframe-z3 {
@@ -8376,6 +8376,13 @@ md-item-content .sg-child-level-10 {
 md-item-content .sg-child-level-11 {
   padding-left: 165px; }
 
+[id="messagesList"] {
+  max-width: 384px;
+  flex: 1 1 auto; }
+
+[data-ui-view="message"] {
+  max-width: 512px; }
+
 .view[layout=row] {
   max-height: 100%; }
 

UI/WebServerResources/scss/components/toolbar/_extends.scss

@@ -1,6 +1,2 @@
 /*! toolbar/_extends.scss - */
 @import '../../../angular-material/src/components/toolbar/toolbar.scss';
-
-[id='messagesList'] {
-  @extend .md-whiteframe-z2;
-}

UI/WebServerResources/scss/core/base_styles/_base_style.scss

@@ -10,7 +10,7 @@
  */
 
 
-main { 
+main {
   background-color: sg-color($sogoPaper, 200);
   padding-bottom: $toolbar-height; // padding to compensate for the bottom bar
 }

UI/WebServerResources/scss/views/MailerUI.scss

@@ -28,7 +28,14 @@ $i: 1;
     md-item-content .sg-child-level-#{$i} { padding-left: 15px * $i; }
     $i: $i + 1;
 }
+[id="messagesList"] {
+  max-width: grid-step(6);
+  flex: 1 1 auto;
 
+}
+[data-ui-view="message"] {
+  max-width: grid-step(8);
+}
 //$total-columns: 13;
 //$column-gutter: 0;