From db05172d8b924a591ece4fae72d076eb59ee5f82 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Samuel=20Bart=C3=ADk?=
 <63553146+sambartik@users.noreply.github.com>
Date: Wed, 25 May 2022 18:42:17 +0200
Subject: [PATCH] fix(ui): rectangular avatars getting stretched (#2782)

---
 src/components/IssueDetails/IssueComment/index.tsx      | 2 +-
 src/components/IssueDetails/index.tsx                   | 2 +-
 src/components/IssueList/IssueItem/index.tsx            | 2 +-
 src/components/Layout/UserDropdown/index.tsx            | 2 +-
 src/components/ManageSlideOver/index.tsx                | 4 ++--
 src/components/RequestCard/index.tsx                    | 2 +-
 src/components/RequestList/RequestItem/index.tsx        | 4 ++--
 src/components/RequestModal/AdvancedRequester/index.tsx | 4 ++--
 src/components/UserList/index.tsx                       | 2 +-
 src/components/UserProfile/ProfileHeader/index.tsx      | 2 +-
 10 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/components/IssueDetails/IssueComment/index.tsx b/src/components/IssueDetails/IssueComment/index.tsx
index 99b26a44a..11623f53d 100644
--- a/src/components/IssueDetails/IssueComment/index.tsx
+++ b/src/components/IssueDetails/IssueComment/index.tsx
@@ -90,7 +90,7 @@ const IssueComment: React.FC<IssueCommentProps> = ({
           <img
             src={comment.user.avatar}
             alt=""
-            className="h-10 w-10 scale-100 transform-gpu rounded-full ring-1 ring-gray-500 transition duration-300 hover:scale-105"
+            className="h-10 w-10 scale-100 transform-gpu rounded-full object-cover ring-1 ring-gray-500 transition duration-300 hover:scale-105"
           />
         </a>
       </Link>
diff --git a/src/components/IssueDetails/index.tsx b/src/components/IssueDetails/index.tsx
index 8939f61d2..c8cd841b2 100644
--- a/src/components/IssueDetails/index.tsx
+++ b/src/components/IssueDetails/index.tsx
@@ -264,7 +264,7 @@ const IssueDetails: React.FC = () => {
                 >
                   <a className="group ml-1 inline-flex h-full items-center xl:ml-1.5">
                     <img
-                      className="mr-0.5 h-5 w-5 scale-100 transform-gpu rounded-full transition duration-300 group-hover:scale-105 xl:mr-1 xl:h-6 xl:w-6"
+                      className="mr-0.5 h-5 w-5 scale-100 transform-gpu rounded-full object-cover transition duration-300 group-hover:scale-105 xl:mr-1 xl:h-6 xl:w-6"
                       src={issueData.createdBy.avatar}
                       alt=""
                     />
diff --git a/src/components/IssueList/IssueItem/index.tsx b/src/components/IssueList/IssueItem/index.tsx
index 1695215a3..e5cd058a3 100644
--- a/src/components/IssueList/IssueItem/index.tsx
+++ b/src/components/IssueList/IssueItem/index.tsx
@@ -228,7 +228,7 @@ const IssueItem: React.FC<IssueItemProps> = ({ issue }) => {
                           <img
                             src={issue.createdBy.avatar}
                             alt=""
-                            className="avatar-sm ml-1.5"
+                            className="avatar-sm ml-1.5 object-cover"
                           />
                           <span className="truncate text-sm font-semibold group-hover:text-white group-hover:underline">
                             {issue.createdBy.displayName}
diff --git a/src/components/Layout/UserDropdown/index.tsx b/src/components/Layout/UserDropdown/index.tsx
index a99231177..e51fcabf5 100644
--- a/src/components/Layout/UserDropdown/index.tsx
+++ b/src/components/Layout/UserDropdown/index.tsx
@@ -40,7 +40,7 @@ const UserDropdown: React.FC = () => {
           onClick={() => setDropdownOpen(true)}
         >
           <img
-            className="h-8 w-8 rounded-full sm:h-10 sm:w-10"
+            className="h-8 w-8 rounded-full object-cover sm:h-10 sm:w-10"
             src={user?.avatar}
             alt=""
           />
diff --git a/src/components/ManageSlideOver/index.tsx b/src/components/ManageSlideOver/index.tsx
index 3e360d0a1..a1e9bab17 100644
--- a/src/components/ManageSlideOver/index.tsx
+++ b/src/components/ManageSlideOver/index.tsx
@@ -272,7 +272,7 @@ const ManageSlideOver: React.FC<
                                   <img
                                     src={user.avatar}
                                     alt={user.displayName}
-                                    className="h-8 w-8 scale-100 transform-gpu rounded-full ring-1 ring-gray-500 transition duration-300 hover:scale-105"
+                                    className="h-8 w-8 scale-100 transform-gpu rounded-full object-cover ring-1 ring-gray-500 transition duration-300 hover:scale-105"
                                   />
                                 </a>
                               </Link>
@@ -387,7 +387,7 @@ const ManageSlideOver: React.FC<
                                   <img
                                     src={user.avatar}
                                     alt={user.displayName}
-                                    className="h-8 w-8 scale-100 transform-gpu rounded-full ring-1 ring-gray-500 transition duration-300 hover:scale-105"
+                                    className="h-8 w-8 scale-100 transform-gpu rounded-full object-cover ring-1 ring-gray-500 transition duration-300 hover:scale-105"
                                   />
                                 </a>
                               </Link>
diff --git a/src/components/RequestCard/index.tsx b/src/components/RequestCard/index.tsx
index 38cf541fc..c95bbf3be 100644
--- a/src/components/RequestCard/index.tsx
+++ b/src/components/RequestCard/index.tsx
@@ -231,7 +231,7 @@ const RequestCard: React.FC<RequestCardProps> = ({ request, onTitleData }) => {
                   <img
                     src={requestData.requestedBy.avatar}
                     alt=""
-                    className="avatar-sm"
+                    className="avatar-sm object-cover"
                   />
                   <span className="truncate font-semibold group-hover:text-white group-hover:underline">
                     {requestData.requestedBy.displayName}
diff --git a/src/components/RequestList/RequestItem/index.tsx b/src/components/RequestList/RequestItem/index.tsx
index 54a5a59ce..27f661081 100644
--- a/src/components/RequestList/RequestItem/index.tsx
+++ b/src/components/RequestList/RequestItem/index.tsx
@@ -336,7 +336,7 @@ const RequestItem: React.FC<RequestItemProps> = ({
                             <img
                               src={requestData.requestedBy.avatar}
                               alt=""
-                              className="avatar-sm ml-1.5"
+                              className="avatar-sm ml-1.5 object-cover"
                             />
                             <span className="truncate text-sm font-semibold group-hover:text-white group-hover:underline">
                               {requestData.requestedBy.displayName}
@@ -390,7 +390,7 @@ const RequestItem: React.FC<RequestItemProps> = ({
                           <img
                             src={requestData.modifiedBy.avatar}
                             alt=""
-                            className="avatar-sm ml-1.5"
+                            className="avatar-sm ml-1.5 object-cover"
                           />
                           <span className="truncate text-sm font-semibold group-hover:text-white group-hover:underline">
                             {requestData.modifiedBy.displayName}
diff --git a/src/components/RequestModal/AdvancedRequester/index.tsx b/src/components/RequestModal/AdvancedRequester/index.tsx
index d4cead4ac..58bbe777a 100644
--- a/src/components/RequestModal/AdvancedRequester/index.tsx
+++ b/src/components/RequestModal/AdvancedRequester/index.tsx
@@ -534,7 +534,7 @@ const AdvancedRequester: React.FC<AdvancedRequesterProps> = ({
                           <img
                             src={selectedUser.avatar}
                             alt=""
-                            className="h-6 w-6 flex-shrink-0 rounded-full"
+                            className="h-6 w-6 flex-shrink-0 rounded-full object-cover"
                           />
                           <span className="ml-3 block">
                             {selectedUser.displayName}
@@ -584,7 +584,7 @@ const AdvancedRequester: React.FC<AdvancedRequesterProps> = ({
                                   <img
                                     src={user.avatar}
                                     alt=""
-                                    className="h-6 w-6 flex-shrink-0 rounded-full"
+                                    className="h-6 w-6 flex-shrink-0 rounded-full object-cover"
                                   />
                                   <span className="ml-3 block flex-shrink-0">
                                     {user.displayName}
diff --git a/src/components/UserList/index.tsx b/src/components/UserList/index.tsx
index d6243aa2c..58c51d663 100644
--- a/src/components/UserList/index.tsx
+++ b/src/components/UserList/index.tsx
@@ -575,7 +575,7 @@ const UserList: React.FC = () => {
                   <Link href={`/users/${user.id}`}>
                     <a className="h-10 w-10 flex-shrink-0">
                       <img
-                        className="h-10 w-10 rounded-full"
+                        className="h-10 w-10 rounded-full object-cover"
                         src={user.avatar}
                         alt=""
                       />
diff --git a/src/components/UserProfile/ProfileHeader/index.tsx b/src/components/UserProfile/ProfileHeader/index.tsx
index f677a0088..3485c7976 100644
--- a/src/components/UserProfile/ProfileHeader/index.tsx
+++ b/src/components/UserProfile/ProfileHeader/index.tsx
@@ -44,7 +44,7 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({
         <div className="flex-shrink-0">
           <div className="relative">
             <img
-              className="h-24 w-24 rounded-full bg-gray-600 ring-1 ring-gray-700"
+              className="h-24 w-24 rounded-full bg-gray-600 object-cover ring-1 ring-gray-700"
               src={user.avatar}
               alt=""
             />