From 91d1d44aa933523f550ecd57738ce81b18965b4c Mon Sep 17 00:00:00 2001
From: amplitudes <62763456+amplitudesxd@users.noreply.github.com>
Date: Mon, 29 May 2023 10:30:14 +0100
Subject: [PATCH] fix: profile picture distortion (#7203)

By applying pr-1 on a container div instead of directly on the image (which distorts it), it creates the intended padding effect without any image distortion.
---
 app/views/public/api/v1/portals/articles/show.html.erb | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/views/public/api/v1/portals/articles/show.html.erb b/app/views/public/api/v1/portals/articles/show.html.erb
index 20f14e787..e3b560454 100644
--- a/app/views/public/api/v1/portals/articles/show.html.erb
+++ b/app/views/public/api/v1/portals/articles/show.html.erb
@@ -35,7 +35,9 @@
     <div class="flex flex-col items-start justify-between w-full md:flex-row md:items-center pt-2">
       <div class="flex items-center space-x-2">
         <% if @article.author&.avatar_url&.present? %>
-          <img src="<%= @article.author.avatar_url %>" alt="<%= @article.author.display_name %>" class="w-12 h-12 border rounded-full pr-1">
+          <div class="pr-1">
+            <img src="<%= @article.author.avatar_url %>" alt="<%= @article.author.display_name %>" class="w-12 h-12 border rounded-full">
+          </div>
         <% end %>
         <div>
           <h5 class="text-base font-medium text-slate-900 mb-2"><%= @article.author.available_name %></h5>