From dc02106492d94a78f5dfddf894c3b809d4c23261 Mon Sep 17 00:00:00 2001
From: Tankred Hase <tankred@whiteout.io>
Date: Tue, 29 Apr 2014 23:35:43 +0200
Subject: [PATCH] [WO-361] Fix flexbox styles by preventing shrink on the
 required dom nodes

---
 src/sass/views/_read.scss | 58 ++++++++++++++++++++-------------------
 src/tpl/read.html         | 11 +++++---
 src/tpl/write.html        | 18 +++++-------
 3 files changed, 44 insertions(+), 43 deletions(-)

diff --git a/src/sass/views/_read.scss b/src/sass/views/_read.scss
index 0a59444..d508f2a 100644
--- a/src/sass/views/_read.scss
+++ b/src/sass/views/_read.scss
@@ -44,45 +44,47 @@
         }
     }
 
-    .attachments {
+    .attachments-wrapper {
         flex-shrink: 0;
-        position: relative;
-        width: inherit;
-        border: 1px;
-        border-style: solid;
-        border-color: $color-grey-lighter;
-        min-height: em(44);
 
-        .attachment {
-            height: 32px;
-            border-radius: 16px;
-            vertical-align: middle;
-            margin: 5px 0 5px 5px;
-            padding: 5px 10px 5px 10px;
+        .attachments {
+            position: relative;
+            width: inherit;
             border: 1px;
             border-style: solid;
             border-color: $color-grey-lighter;
-            display: inline-block;
+            min-height: em(44);
 
-            span {
-                font-size: 14px;
-                color: $color-grey-input;
+            .attachment {
+                height: 32px;
+                border-radius: 16px;
                 vertical-align: middle;
-            }
+                margin: 5px 0 5px 5px;
+                padding: 5px 10px 5px 10px;
+                border: 1px;
+                border-style: solid;
+                border-color: $color-grey-lighter;
+                display: inline-block;
 
-            &:hover,
-            &:focus {
-                background-color: darken($color-white, 2%);
-                cursor: pointer;
+                span {
+                    font-size: 14px;
+                    color: $color-grey-input;
+                    vertical-align: middle;
+                }
+
+                &:hover,
+                &:focus {
+                    background-color: darken($color-white, 2%);
+                    cursor: pointer;
+                }
             }
         }
-    }
 
-    .seperator-line {
-        flex-shrink: 0;
-        height: 1px;
-        color: $color-grey-lighter;
-        background-color: $color-grey-lighter;
+        .seperator-line {
+            height: 1px;
+            color: $color-grey-lighter;
+            background-color: $color-grey-lighter;
+        }
     }
 
     .body {
diff --git a/src/tpl/read.html b/src/tpl/read.html
index c1bd3e2..ce0dcba 100644
--- a/src/tpl/read.html
+++ b/src/tpl/read.html
@@ -30,15 +30,18 @@
     </div><!--/.mail-addresses-->
   </div><!--/.headers-->
 
-  <div ng-switch="state.mailList.selected.attachments !== undefined && state.mailList.selected.attachments.length > 0">
-    <div ng-switch-when="true" class="attachments">
-      <span class="attachment" ng-repeat="attachment in state.mailList.selected.attachments" ng-click="download(attachment)">
+  <div class="attachments-wrapper"
+    ng-switch="state.mailList.selected.attachments !== undefined && state.mailList.selected.attachments.length > 0">
+    <div class="attachments" ng-switch-when="true">
+      <span class="attachment"
+        ng-repeat="attachment in state.mailList.selected.attachments"
+        ng-click="download(attachment)">
         <span data-icon="&#xe003;"></span>
         {{attachment.filename}}
       </span><!--/.attachment-->
     </div><!--/.attachments-->
     <div ng-switch-default class="seperator-line"></div>
-  </div><!--/.ng-switch-->
+  </div><!--/.attachments-wrapper-->
 
   <div class="body" ng-switch="state.mailList.selected === undefined || (state.mailList.selected.encrypted === false && state.mailList.selected.body !== undefined) || (state.mailList.selected.encrypted === true && state.mailList.selected.decrypted === true)">
     <div ng-switch-when="true">
diff --git a/src/tpl/write.html b/src/tpl/write.html
index 747000b..bbc5706 100644
--- a/src/tpl/write.html
+++ b/src/tpl/write.html
@@ -41,17 +41,13 @@
         </button><!--/.btn-attachment-->
       </div><!--/.subject-box-->
 
-      <div ng-switch="attachments.length > 0">
-        <div ng-switch-when="true">
-          <div class="attachments-box">
-            <span ng-repeat="attachment in attachments" class="attachment">
-              <span data-icon="&#xe003;"></span>
-              {{attachment.filename}}
-              <span class="close" data-icon="&#xe000;" ng-click="remove(attachment)"></span>
-            </span><!--/.attachment-->
-          </div><!--/.attachments-box-->
-        </div><!--/ng-switch-when-->
-      </div><!--/ng-switch-->
+      <div class="attachments-box" ng-show="attachments.length > 0">
+        <span ng-repeat="attachment in attachments" class="attachment">
+          <span data-icon="&#xe003;"></span>
+          {{attachment.filename}}
+          <span class="close" data-icon="&#xe000;" ng-click="remove(attachment)"></span>
+        </span><!--/.attachment-->
+      </div><!--/.attachments-box-->
 
       <div class="body" focus-child>
         <p ng-model="body" contentEditable="true" spellcheck="false" ng-change="updatePreview()" tabindex="3" focus-me="state.lightbox === 'write' && writerTitle === 'Reply'"></p>