fix: resize avatar images

Fallenbagel · Jun 23, 2024 · f3e180a · f3e180a
1 parent b5738b4
commit f3e180a
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 8 deletions.
diff --git a/src/components/IssueList/IssueItem/index.tsx b/src/components/IssueList/IssueItem/index.tsx
@@ -230,7 +230,8 @@ const IssueItem = ({ issue }: IssueItemProps) => {
                           src={issue.createdBy.avatar}
                           alt=""
                           className="avatar-sm ml-1.5 object-cover"
-                          fill
+                          width={20}
+                          height={20}
                         />
                         <span className="truncate text-sm font-semibold group-hover:text-white group-hover:underline">
                           {issue.createdBy.displayName}

diff --git a/src/components/RequestCard/index.tsx b/src/components/RequestCard/index.tsx
@@ -116,7 +116,8 @@ const RequestCardError = ({ requestData }: RequestCardErrorProps) => {
                         src={requestData.requestedBy.avatar}
                         alt=""
                         className="avatar-sm"
-                        fill
+                        width={20}
+                        height={20}
                       />
                       <span className="truncate group-hover:underline">
                         {requestData.requestedBy.displayName}
@@ -373,7 +374,8 @@ const RequestCard = ({ request, onTitleData }: RequestCardProps) => {
                   src={requestData.requestedBy.avatar}
                   alt=""
                   className="avatar-sm object-cover"
-                  fill
+                  width={20}
+                  height={20}
                 />
                 <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
@@ -189,7 +189,8 @@ const RequestItemError = ({
                               src={requestData.requestedBy.avatar}
                               alt=""
                               className="avatar-sm ml-1.5"
-                              fill
+                              width={20}
+                              height={20}
                             />
                             <span className="truncate text-sm group-hover:underline">
                               {requestData.requestedBy.displayName}
@@ -245,7 +246,8 @@ const RequestItemError = ({
                             src={requestData.modifiedBy.avatar}
                             alt=""
                             className="avatar-sm ml-1.5"
-                            fill
+                            width={20}
+                            height={20}
                           />
                           <span className="truncate text-sm group-hover:underline">
                             {requestData.modifiedBy.displayName}
@@ -539,7 +541,8 @@ const RequestItem = ({ request, revalidateList }: RequestItemProps) => {
                             src={requestData.requestedBy.avatar}
                             alt=""
                             className="avatar-sm ml-1.5 object-cover"
-                            fill
+                            width={20}
+                            height={20}
                           />
                           <span className="truncate text-sm font-semibold group-hover:text-white group-hover:underline">
                             {requestData.requestedBy.displayName}
@@ -595,7 +598,8 @@ const RequestItem = ({ request, revalidateList }: RequestItemProps) => {
                           src={requestData.modifiedBy.avatar}
                           alt=""
                           className="avatar-sm ml-1.5 object-cover"
-                          fill
+                          width={20}
+                          height={20}
                         />
                         <span className="truncate text-sm font-semibold group-hover:text-white group-hover:underline">
                           {requestData.modifiedBy.displayName}

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -215,7 +215,7 @@
   }
 
   img.avatar-sm {
-    @apply mr-1 h-5 w-5 scale-100 transform-gpu rounded-full transition duration-300 group-hover:scale-105;
+    @apply mr-1 scale-100 transform-gpu rounded-full transition duration-300 group-hover:scale-105;
   }
 
   .card-field {