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> <%= changeset_details(changeset) %>
</div> &middot;
<div class="details"> #<%= changeset.id %>
<%= changeset_details(changeset) %> </div>
&middot; <div class="col-auto comments comments-<%= changeset.comments.length %>">
#<%= changeset.id %> <%= changeset.comments.length %>
<span class="icon note grey"></span>
</div>
</div> </div>
<% end %> <% end %>