From 67b1518858f75b6f0d217496f5845b34ae3ef5e7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Thu, 11 Apr 2024 17:01:12 +0200
Subject: [PATCH] Make comment avatars compatible with RTL languages

---
 app/assets/stylesheets/application.scss       |  1 +
 app/assets/stylesheets/comments/avatar.scss   |  6 +++++
 app/assets/stylesheets/layout.scss            |  2 +-
 .../comments/avatar_component.html.erb        | 24 ++++++++++---------
 4 files changed, 21 insertions(+), 12 deletions(-)
 create mode 100644 app/assets/stylesheets/comments/avatar.scss

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index abb94a533..766bfa909 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -49,6 +49,7 @@
 @import "account/**/*";
 @import "admin/**/*";
 @import "budgets/**/*";
+@import "comments/**/*";
 @import "debates/**/*";
 @import "documents/**/*";
 @import "layout/**/*";
diff --git a/app/assets/stylesheets/comments/avatar.scss b/app/assets/stylesheets/comments/avatar.scss
new file mode 100644
index 000000000..b47002a91
--- /dev/null
+++ b/app/assets/stylesheets/comments/avatar.scss
@@ -0,0 +1,6 @@
+.comment-avatar {
+  img,
+  svg {
+    float: $global-left;
+  }
+}
diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index 195cc2db8..febe1eb35 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/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 {
diff --git a/app/components/comments/avatar_component.html.erb b/app/components/comments/avatar_component.html.erb
index 0c95fa943..432e3a33e 100644
--- a/app/components/comments/avatar_component.html.erb
+++ b/app/components/comments/avatar_component.html.erb
@@ -1,11 +1,13 @@
-<% if comment.as_administrator? %>
-  <%= image_tag("avatar_admin.png", size: 32, class: "admin-avatar float-left", alt: "") %>
-<% elsif comment.as_moderator? %>
-  <%= image_tag("avatar_moderator.png", size: 32, class: "moderator-avatar float-left", 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: "") %>
-<% else %>
-  <%= render Shared::AvatarComponent.new(comment.user, size: 32, class: "float-left") %>
-<% end %>
+<span class="comment-avatar">
+  <% if comment.as_administrator? %>
+    <%= 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", 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", alt: "") %>
+  <% else %>
+    <%= render Shared::AvatarComponent.new(comment.user, size: 32) %>
+  <% end %>
+</span>