Keeps the sticky toast x from overlapping with long messages

Author: discorick

app/assets/stylesheets/components/_flash-message.scss

@@ -16,9 +16,12 @@
     box-shadow: -1px 2px 2px rgba(0,0,0,0.5);
 
     .ui-icon-x-thin {
+      position: relative;
+      bottom: 5px;
       float: right;
       font-size: 8px;
       margin-left: -16px;
+      margin-right: -8px;
     }
   }
 

ember-app/app/templates/components/flash/hb-message.hbs

@@ -1,9 +1,9 @@
-{{truncate message 50}}
+{{#if flash.sticky}}
+  <i class='ui-icon ui-icon-x-thin'></i>
+{{/if}}
+
+<div class='message-copy'>{{truncate message 50}}</div>
 
 {{#if progress}}
   {{hb-spinner}}
 {{/if}}
-
-{{#if flash.sticky}}
-  <i class='ui-icon ui-icon-x-thin'></i>
-{{/if}}