From 16af93f8a240228d339c8479cc16d86570c067e4 Mon Sep 17 00:00:00 2001
From: Steffen van Bergerem <svbergerem@online.de>
Date: Tue, 6 Sep 2016 12:33:23 +0200
Subject: [PATCH] Prevent overflow of interaction avatars in the single post
 view

closes #7070
---
 Changelog.md                                  |  1 +
 app/assets/stylesheets/single-post-view.scss  |  4 ++++
 .../single-post-interactions_tpl.jst.hbs      | 20 +++++++++----------
 3 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/Changelog.md b/Changelog.md
index 2c3321b2a..8baaa0c05 100644
--- a/Changelog.md
+++ b/Changelog.md
@@ -18,6 +18,7 @@
 * Fix tags URLs in hovercards [#7075](https://github.com/diaspora/diaspora/pull/7075)
 * Fix 500 in html requests for post interactions [#7085](https://github.com/diaspora/diaspora/pull/7085)
 * Remove whitespaces next to like link in stream [#7088](https://github.com/diaspora/diaspora/pull/7088)
+* Prevent overflow of interaction avatars in the single post view [#7070](https://github.com/diaspora/diaspora/pull/7070)
 
 ## Features
 * Deleted comments will be removed when loading more comments [#7045](https://github.com/diaspora/diaspora/pull/7045)
diff --git a/app/assets/stylesheets/single-post-view.scss b/app/assets/stylesheets/single-post-view.scss
index e0cb2894e..9aee28749 100644
--- a/app/assets/stylesheets/single-post-view.scss
+++ b/app/assets/stylesheets/single-post-view.scss
@@ -147,4 +147,8 @@
   .interaction-avatars {
     line-height: 25px;
   }
+
+  .interaction-avatars {
+    overflow: hidden;
+  }
 }
diff --git a/app/assets/templates/single-post-viewer/single-post-interactions_tpl.jst.hbs b/app/assets/templates/single-post-viewer/single-post-interactions_tpl.jst.hbs
index a8acd4b38..0e9fa60a8 100644
--- a/app/assets/templates/single-post-viewer/single-post-interactions_tpl.jst.hbs
+++ b/app/assets/templates/single-post-viewer/single-post-interactions_tpl.jst.hbs
@@ -1,39 +1,39 @@
 {{#if resharesCount}}
   <div id="reshares" class="clearfix">
-    <span class="count">
+    <div class="count">
       <i class="entypo-reshare middle gray"></i>
       <span>{{resharesCount}}</span>
-    </span>
-    <span class="interaction-avatars">
+    </div>
+    <div class="interaction-avatars">
       {{#each reshares}}
         {{#linkToAuthor author}}
           {{{personImage this 'small' 'micro'}}}
         {{/linkToAuthor}}
       {{/each}}
-    </span>
+    </div>
   </div>
 {{/if}}
 {{#if likesCount}}
   <div id="likes" class="clearfix">
-    <span class="count">
+    <div class="count">
       <i class="entypo-heart middle gray"></i>
       <span>{{likesCount}}</span>
-    </span>
-    <span class="interaction-avatars">
+    </div>
+    <div class="interaction-avatars">
       {{#each likes}}
         {{#linkToAuthor author}}
           {{{personImage this 'small' 'micro'}}}
         {{/linkToAuthor}}
       {{/each}}
-    </span>
+    </div>
   </div>
 {{/if}}
 {{#if commentsCount}}
   <div id="comments-meta" class="clearfix">
-    <span class="count">
+    <div class="count">
       <i class="entypo-comment middle gray"></i>
       <span>{{commentsCount}}</span>
-    </span>
+    </div>
   </div>
 {{else}}
   <div class="no-comments">