Improve styling for mobile comments

app/assets/stylesheets/mobile/comments.scss

@@ -1,8 +1,5 @@
 .bottom-bar {
-  border-radius: 0 0 5px 5px;
   z-index: 3;
-  display: block;
-  position: relative;
   padding: 8px 10px 10px;
   background: $background-grey;
   margin-top: 10px;
@@ -10,6 +7,17 @@
   min-height: 22px;
   overflow: hidden;
 
+  &,
+  .comment-stats {
+    border-bottom-left-radius: $border-radius-small;
+    border-bottom-right-radius: $border-radius-small;
+  }
+
+  .post-actions-container {
+    display: flex;
+    justify-content: space-between;
+  }
+
   > a,
   .show-comments,
   .show-comments > [class^="entypo"] {
@@ -38,7 +46,6 @@
   }
 
   %stats {
-    float: right;
     position: relative;
     display: flex;
 
@@ -46,9 +53,9 @@
       color: $text-color;
       font-family: $font-family-base;
       font-size: $font-size-base;
-      line-height: 22px;
+      line-height: 24px;
       margin-left: 5px;
-      vertical-align: top;
+      vertical-align: text-bottom;
       z-index: 2;
     }
 
@@ -67,7 +74,6 @@
     }
 
     .entypo-reshare.active { color: $blue; }
-
     .entypo-heart.active { color: $red; }
   }
 
@@ -77,7 +83,10 @@
 
   .comment-stats {
     @extend %stats;
-    bottom: 25px;
+    background: $background-grey;
+    border-top: 1px solid $border-grey;
+    flex-direction: row-reverse;
+    padding: 3px;
   }
 
   %action {
@@ -108,16 +117,19 @@
 
 .stream-element .comments {
   margin: 0;
-  margin-top: 10px;
   padding: 0;
   width: 100%;
 
   .content { padding: 0; }
 
   .comment {
-    border-top: 1px solid $border-medium-grey;
-    padding: 10px 0 0;
+    background-color: $framed-background;
+    border: 1px solid $border-medium-grey;
+    border-radius: 5px;
+    margin-top: 10px;
 
-    &:first-child { padding-top: 20px; }
+    .media {
+      padding: 6px;
+    }
   }
 }

app/assets/stylesheets/mobile/markdown_editor.scss

@@ -1,5 +1,5 @@
 .md-editor {
-  border: 1px solid $light-grey;
+  border: 1px solid $border-medium-grey;
   border-radius: $btn-border-radius-base;
 
   &.active { border-color: $text-grey; }

app/assets/stylesheets/mobile/mobile.scss

@@ -516,9 +516,13 @@ h3.ltr {
   font-style: inherit;
   font-weight: inherit;
   margin: 0;
-  padding: 15px 15px;
+  padding: 12px;
   vertical-align: baseline;
   word-wrap: break-word;
+
+  p:last-child {
+    margin: 0;
+  }
 }
 
 form#new_conversation.new_conversation {

app/views/shared/_stream_element.mobile.haml

@@ -20,16 +20,12 @@
       = render "status_messages/status_message", post: post, photos: post.photos
 
   .bottom-bar.nsfw-hidden{class: ("inactive" unless defined?(expanded_info) && expanded_info)}
-    = render partial: "comments/post_stats", locals: {post: post}
-
-    - if defined?(expanded_info) && expanded_info
-      != show_comments_link(post, "active")
-      .comment-container
-        %ul.comments
-          = render partial: "comments/comment", collection: post.comments.for_a_stream, locals: {post: post}
-
-    - else
-      != show_comments_link(post)
+    .post-actions-container
+      != show_comments_link(post, defined?(expanded_info) && expanded_info ? "active" : "")
+      = render partial: "comments/post_stats", locals: {post: post}
+    .comment-container
+      %ul.comments
+        = render partial: "comments/comment", collection: post.comments.for_a_stream, locals: {post: post}
 
     .ajax-loader.hidden
       .loader