From: Jay Sitter <jay@jaysitter.com>
Date: Sun, 2 Jul 2023 21:23:48 +0000 (-0400)
Subject: fix: Fix avatar image overlay aspect ratio
X-Git-Url: http://these/git/%22https:/join-lemmy.org/%22?a=commitdiff_plain;h=0047c17eb319ac66d624472b5cc79cf4efcfb66e;p=lemmy-ui.git

fix: Fix avatar image overlay aspect ratio
---

diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index 648e76d..b92f086 100644
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -254,10 +254,6 @@ hr {
   -ms-filter: blur(10px);
 }
 
-.img-cover {
-  object-fit: cover;
-}
-
 .img-expanded {
   max-height: 90vh;
 }
@@ -350,10 +346,12 @@ br.big {
 }
 
 .avatar-overlay {
-  width: 20%;
-  height: 20%;
+  width: 20vw;
+  height: 20vw;
   max-width: 120px;
   max-height: 120px;
+  min-width: 80px;
+  min-height: 80px;
 }
 
 .avatar-pushup {
diff --git a/src/shared/components/common/pictrs-image.tsx b/src/shared/components/common/pictrs-image.tsx
index 9c14aef..5c3d823 100644
--- a/src/shared/components/common/pictrs-image.tsx
+++ b/src/shared/components/common/pictrs-image.tsx
@@ -34,13 +34,13 @@ export class PictrsImage extends Component<PictrsImageProps, any> {
           className={classNames("overflow-hidden pictrs-image", {
             "img-fluid": !this.props.icon && !this.props.iconOverlay,
             banner: this.props.banner,
-            "thumbnail rounded":
+            "thumbnail rounded object-fit-cover":
               this.props.thumbnail && !this.props.icon && !this.props.banner,
             "img-expanded slight-radius":
               !this.props.thumbnail && !this.props.icon,
             "img-blur": this.props.thumbnail && this.props.nsfw,
-            "img-cover img-icon me-1": this.props.icon,
-            "ms-2 mb-0 rounded-circle img-cover avatar-overlay":
+            "object-fit-cover img-icon me-1": this.props.icon,
+            "ms-2 mb-0 rounded-circle object-fit-cover avatar-overlay":
               this.props.iconOverlay,
             "avatar-pushup": this.props.pushup,
           })}