Use flexbox instead of floating to position the comment icon

This ensures both components get appropriate padding. Fixes #3305
This commit is contained in:
Andy Allan 2021-10-13 17:36:48 +01:00
parent 3617974630
commit b0a9b39c8d
2 changed files with 10 additions and 9 deletions

View file

@ -791,7 +791,6 @@ tr.turn:hover {
} }
.comments { .comments {
float: right;
color: $darkgrey; color: $darkgrey;
} }

View file

@ -16,13 +16,15 @@
<%= changeset.tags["comment"].to_s.presence || t("browse.no_comment") %> <%= changeset.tags["comment"].to_s.presence || t("browse.no_comment") %>
</a> </a>
</p> </p>
<div class="comments comments-<%= changeset.comments.length %>"> <div class="row">
<%= changeset.comments.length %> <div class="col">
<span class="icon note grey"></span>
</div>
<div class="details">
<%= changeset_details(changeset) %> <%= changeset_details(changeset) %>
&middot; &middot;
#<%= changeset.id %> #<%= changeset.id %>
</div> </div>
<div class="col-auto comments comments-<%= changeset.comments.length %>">
<%= changeset.comments.length %>
<span class="icon note grey"></span>
</div>
</div>
<% end %> <% end %>