From 11d03569a4c01c35be07606b8fe38fb4a285c15d Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Mon, 7 Dec 2015 16:41:06 -0500
Subject: [PATCH] (css) Fix display of message in popup window

---
 UI/Templates/MailerUI/UIxMailPopupView.wox    |  5 +++--
 .../scss/views/MailerUI.scss                  | 22 ++++++++++++++-----
 UI/WebServerResources/scss/views/_view.scss   | 18 ++++++++++-----
 3 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/UI/Templates/MailerUI/UIxMailPopupView.wox b/UI/Templates/MailerUI/UIxMailPopupView.wox
index a2c10b94b..1be756ab4 100644
--- a/UI/Templates/MailerUI/UIxMailPopupView.wox
+++ b/UI/Templates/MailerUI/UIxMailPopupView.wox
@@ -9,10 +9,11 @@
     className="UIxPageFrame"
     title="title"
     const:popup="YES"
-    const:jsFiles="Common.js, Contacts.services.js, Preferences.services.js, Mailer.app.popup.js, Mailer.services.js, vendor/ckeditor/ckeditor.js, vendor/ckeditor/ck.js, vendor/angular-file-upload.min.js">
+    const:jsFiles="Common.js, Preferences.services.js, Contacts.services.js, Mailer.app.popup.js, Mailer.services.js, vendor/ckeditor/ckeditor.js, vendor/ckeditor/ck.js, vendor/angular-file-upload.min.js">
 
   <main class="layout-fill" ng-controller="navController">
-    <div id="detailView" class="view-detail" layout="column" layout-align="start center"
+    <div id="detailView" class="view-detail"
+         layout="column" layout-align="start center"
          ui-view="message">
       <div class="sg-progress-circular-floating">
         <md-progress-circular class="md-accent ng-cloak"
diff --git a/UI/WebServerResources/scss/views/MailerUI.scss b/UI/WebServerResources/scss/views/MailerUI.scss
index 1b9d9e6d4..96f3a64b0 100644
--- a/UI/WebServerResources/scss/views/MailerUI.scss
+++ b/UI/WebServerResources/scss/views/MailerUI.scss
@@ -84,20 +84,30 @@ md-sidenav {
 }
 .msg-attachment-image,
 .msg-attachment-link {
-  @media (min-width: $layout-breakpoint-xs) {
-    flex: 0 0 100%;
-  }
-  @media (min-width: $layout-breakpoint-sm) {
+  flex: 0 0 100%;
+  @include from(md) {
     flex: 0 0 50%;
   }
-  @media (min-width: $layout-breakpoint-md) {
-    flex: 0 0 33.33%;
+  @include from(lg) {
+    flex: 0 0 33%;
   }
   > div {
     max-width: 100%;
     width: 100%;
   }
 }
+.popup {
+  .msg-attachment-image,
+  .msg-attachment-link {
+    @include from(sm) {
+      flex: 0 0 50%;
+    }
+    @include from(md) {
+      flex: 0 0 33%;
+    }
+  }
+}
+
 
 // sgZoomableImage directive
 .msg-attachment-image {
diff --git a/UI/WebServerResources/scss/views/_view.scss b/UI/WebServerResources/scss/views/_view.scss
index d9e9b2f08..65162448c 100644
--- a/UI/WebServerResources/scss/views/_view.scss
+++ b/UI/WebServerResources/scss/views/_view.scss
@@ -18,10 +18,18 @@ body.popup {
   }
   .view-detail {
     max-width: 100%;
-  }
-  @include from(sm) {
-    [class|="view"] {
-      position: static;
+    @include from(sm) {
+      height: 100%;
+      position: absolute;
+      width: 100%;
+      .sg-face, .sg-back {
+        > md-card {
+          height: 100%;
+          md-card-content {
+            height: 100%;
+          }
+        }
+      }
     }
   }
 }
@@ -72,8 +80,8 @@ $detailView-width: grid-step(8) !global;
 
 .view-detail {
   z-index: $z-index-view;
-  //overflow-x: hidden;
   overflow: hidden;
+
   md-card {
     overflow: hidden;
   }