Add a view-detail class (for more generic use)

Fix the regression (scroll) problem on contact editor

UI/WebServerResources/scss/views/MailerUI.scss

@@ -1,32 +1,4 @@
 
-[id="messagesList"] {
-  flex: 0 0 $listView-width;
-
-}
-[ui-view="message"] {
-  flex: 1 2 $detailView-width;
-  min-width: ($detailView-width - $pitch);
-  max-width: ($detailView-width + $pitch);
-  margin: 0 auto;
-  &.ng-enter {
-    border: 4px solid red;
-    transition: all 1s linear;
-    &.ng-enter-active {
-      border: 4px solid green;
-      transition: all 1s linear;
-    }
-  }
-  &.ng-leave {
-    border: 4px solid blue;
-    transition: all 1s linear;
-    &.ng-leave-active {
-      border: 4px solid blue;
-      transition: all 1s linear;
-      filter: opacity(0);
-    }
-  }
-}
-
 // Message view header
 // Could be made into a more generic component
 // ----------------------------------------------------------------------------

UI/WebServerResources/scss/views/_view.scss

@@ -12,4 +12,48 @@
 
 .view[layout=row] {
   max-height: 100%;
+}
+// We make intensive use of the list/detail view pattern, here are some base
+// definitions for this
+// ----------------------------------------------------------------------------
+
+// Variables
+$listView-width: grid-step(6) !global;
+$detailView-width: grid-step(8) !global;
+
+[id="messagesList"] {
+  flex: 0 0 $listView-width;
+
+}
+
+.view-detail {
+  flex: 1 2 $detailView-width;
+  min-width: ($detailView-width - $pitch);
+  max-width: ($detailView-width + $pitch);
+  margin: 0 auto;
+}
+
+
+[ui-view="message"] {
+
+  &.ng-enter {
+    border: 4px solid red;
+    transition: all 1s linear;
+
+    &.ng-enter-active {
+      border: 4px solid green;
+      transition: all 1s linear;
+    }
+  }
+
+  &.ng-leave {
+    border: 4px solid blue;
+    transition: all 1s linear;
+
+    &.ng-leave-active {
+      border: 4px solid blue;
+      transition: all 1s linear;
+      filter: opacity(0);
+    }
+  }
 }