Make comment avatars compatible with RTL languages

app/assets/stylesheets/application.scss

@@ -49,6 +49,7 @@
 @import "account/**/*";
 @import "admin/**/*";
 @import "budgets/**/*";
+@import "comments/**/*";
 @import "debates/**/*";
 @import "documents/**/*";
 @import "layout/**/*";

app/assets/stylesheets/comments/avatar.scss

@@ -0,0 +1,6 @@
+.comment-avatar {
+  img,
+  svg {
+    float: $global-left;
+  }
+}

app/assets/stylesheets/layout.scss

@@ -1560,7 +1560,7 @@ table {
 
   img,
   svg {
-    margin-right: calc(#{$line-height} / 2);
+    margin-#{$global-right}: calc(#{$line-height} / 2);
   }
 
   .reply {

app/components/comments/avatar_component.html.erb

@@ -1,11 +1,13 @@
+<span class="comment-avatar">
   <% if comment.as_administrator? %>
-  <%= image_tag("avatar_admin.png", size: 32, class: "admin-avatar float-left", alt: "") %>
+    <%= image_tag("avatar_admin.png", size: 32, class: "admin-avatar", alt: "") %>
   <% elsif comment.as_moderator? %>
-  <%= image_tag("avatar_moderator.png", size: 32, class: "moderator-avatar float-left", alt: "") %>
+    <%= image_tag("avatar_moderator.png", size: 32, class: "moderator-avatar", alt: "") %>
   <% elsif comment.user.hidden? || comment.user.erased? %>
     <span class="icon-deleted user-deleted"></span>
   <% elsif comment.user.organization? %>
-  <%= image_tag("avatar_collective.png", size: 32, class: "avatar float-left", alt: "") %>
+    <%= image_tag("avatar_collective.png", size: 32, class: "avatar", alt: "") %>
   <% else %>
-  <%= render Shared::AvatarComponent.new(comment.user, size: 32, class: "float-left") %>
+    <%= render Shared::AvatarComponent.new(comment.user, size: 32) %>
   <% end %>
+</span>