Fix iOS: tail, blue partial border, extra attachment space

Turns out that display: inline on the img tag resulted in a mysterious
3px of space added below it.

background.html

@@ -277,11 +277,13 @@
               <span class='profileName'>{{ profileName }} </span>
             {{ /profileName }}
           </div>
-          <div class='inner-bubble {{ innerBubbleClasses }}'>
-            <div class='quote-wrapper'></div>
-            <div class='attachments'></div>
-            <div class='content' dir='auto'>
-              {{ #message }}<div class='body'>{{ message }}</div>{{ /message }}
+          <div class='tail-wrapper {{ innerBubbleClasses }}'>
+            <div class='inner-bubble'>
+              <div class='quote-wrapper'></div>
+              <div class='attachments'></div>
+              <div class='content' dir='auto'>
+                {{ #message }}<div class='body'>{{ message }}</div>{{ /message }}
+              </div>
             </div>
           </div>
           <div class='meta'>

stylesheets/_conversation.scss

@@ -711,6 +711,7 @@ span.status {
     }
 
     img, audio, video {
+      display: block;
       max-width: 100%;
       max-height: 300px;
     }

stylesheets/_ios.scss

@@ -119,7 +119,7 @@ $ios-border-color: rgba(0,0,0,0.1);
       border: 1px solid $grey_l1_5 !important;
       border-bottom: none !important;
 
-      margin-top: 0px;
+      margin-top: 0px !important;
       margin-bottom: 0px;
       margin-left: 0px;
       margin-right: 0px;
@@ -228,12 +228,18 @@ $ios-border-color: rgba(0,0,0,0.1);
     padding-top: 0px;
     padding-bottom: 5px;
 
+    video, audio {
+      margin-bottom: 5px;
+    }
+
     position: relative;
   }
 
+  .tail-wrapper {
+    margin-bottom: 5px;
+  }
   .inner-bubble {
     border-radius: 15px;
-    margin-bottom: 5px;
     overflow: hidden;
 
     .body {
@@ -245,7 +251,7 @@ $ios-border-color: rgba(0,0,0,0.1);
     }
   }
 
-  .inner-bubble.with-tail {
+  .tail-wrapper.with-tail {
     position: relative;
 
     &:before, &:after {
@@ -268,31 +274,31 @@ $ios-border-color: rgba(0,0,0,0.1);
       bottom: -3px;
       background: #eee;
     }
-
-    .attachments img {
-      border-bottom-left-radius: 0px;
-      border-bottom-right-radius: 0px;
-    }
   }
 
   .meta {
     clear: both;
   }
 
-  .outgoing .inner-bubble.with-tail {
-    background-color: $blue;
-    max-width: 100%;
-    &, .body, a {
-      @include invert-text-color;
-    }
+  .outgoing .with-tail.tail-wrapper {
     float: right;
+
+    .inner-bubble {
+      .attachments {
+        background-color: $blue;
+      }
+      .content {
+        background-color: $blue;
+      }
+      max-width: 100%;
+      &, .body, a {
+        @include invert-text-color;
+      }
+    }
   }
 
-  .incoming .inner-bubble.with-tail {
-    background-color: white;
-    color: black;
+  .incoming .with-tail.tail-wrapper {
     float: left;
-    max-width: 100%;
 
     &:before {
       left: -1px;
@@ -301,6 +307,12 @@ $ios-border-color: rgba(0,0,0,0.1);
     &:after {
       left: -6px;
     }
+
+    .inner-bubble {
+      background-color: white;
+      color: black;
+      max-width: 100%;
+    }
   }
 
   .outgoing .attachments .fileView .icon {

test/index.html

@@ -212,11 +212,13 @@
               <span class='profileName'>{{ profileName }} </span>
             {{ /profileName }}
           </div>
-          <div class='inner-bubble {{ innerBubbleClasses }}'>
-            <div class='quote-wrapper'></div>
-            <div class='attachments'></div>
-            <div class='content' dir='auto'>
-              {{ #message }}<div class='body'>{{ message }}</div>{{ /message }}
+          <div class='tail-wrapper {{ innerBubbleClasses }}'>
+            <div class='inner-bubble'>
+              <div class='quote-wrapper'></div>
+              <div class='attachments'></div>
+              <div class='content' dir='auto'>
+                {{ #message }}<div class='body'>{{ message }}</div>{{ /message }}
+              </div>
             </div>
           </div>
           <div class='meta'>

test/styleguide/legacy_templates.js

@@ -32,11 +32,13 @@ window.Whisper.View.Templates = {
             <span class='profileName'>{{ profileName }} </span>
           {{ /profileName }}
         </div>
-        <div class='inner-bubble {{ innerBubbleClasses }}'>
-          <div class='quote-wrapper'></div>
-          <div class='attachments'></div>
-          <div class='content' dir='auto'>
-            {{ #message }}<div class='body'>{{ message }}</div>{{ /message }}
+        <div class='tail-wrapper {{ innerBubbleClasses }}'>
+          <div class='inner-bubble'>
+            <div class='quote-wrapper'></div>
+            <div class='attachments'></div>
+            <div class='content' dir='auto'>
+              {{ #message }}<div class='body'>{{ message }}</div>{{ /message }}
+            </div>
           </div>
         </div>
         <div class='meta'>

ts/components/conversation/Message.tsx

@@ -13,14 +13,16 @@ export class Message extends React.Component<{}, {}> {
         <span className="avatar" />
         <div className="bubble">
           <div className="sender" dir="auto" />
-          <div className="inner-bubble with-tail">
-            <div className="attachments" />
-            <p className="content" dir="auto">
-              <span className="body">
-                Hi there. How are you doing? Feeling pretty good? Awesome.
-              </span>
-            </p>
-           </div>
+          <div className="tail-wrapper with-tail">
+            <div className="inner-bubble">
+              <div className="attachments" />
+              <p className="content" dir="auto">
+                <span className="body">
+                  Hi there. How are you doing? Feeling pretty good? Awesome.
+                </span>
+              </p>
+            </div>
+          </div>
           <div className="meta">
             <span
               className="timestamp"