From c9abd56d317c05245fb98cdfcc8e40b1a852fa3c Mon Sep 17 00:00:00 2001
From: ppoffice <zrp1994@gmail.com>
Date: Sun, 24 May 2020 11:12:43 -0400
Subject: [PATCH] fix(widget): profile widget avatar image overflow

---
 include/style/helper.styl | 21 +++++++++++++--------
 layout/widget/profile.jsx |  2 +-
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/include/style/helper.styl b/include/style/helper.styl
index 2ba7ed5..95e0b17 100644
--- a/include/style/helper.styl
+++ b/include/style/helper.styl
@@ -150,12 +150,17 @@ for n in (0 .. 5)
 /* ---------------------------------
  *          Image helpers
  * --------------------------------- */
-.image.is-7by3
-    padding-top: 42.8%
+.image
+    &.is-7by3
+        padding-top: 42.8%
 
-    img
-        bottom: 0
-        left: 0
-        position: absolute
-        right: 0
-        top: 0
\ No newline at end of file
+        img
+            bottom: 0
+            left: 0
+            position: absolute
+            right: 0
+            top: 0
+
+    .avatar
+        height: 100%
+        object-fit: cover
diff --git a/layout/widget/profile.jsx b/layout/widget/profile.jsx
index ba4e44d..bd5002f 100644
--- a/layout/widget/profile.jsx
+++ b/layout/widget/profile.jsx
@@ -35,7 +35,7 @@ class Profile extends Component {
                     <div class="level-item has-text-centered flex-shrink-1">
                         <div>
                             <figure class="image is-128x128 mx-auto mb-2">
-                                <img class={avatarRounded ? 'is-rounded' : ''} src={avatar} alt={author} />
+                                <img class={'avatar' + (avatarRounded ? ' is-rounded' : '')} src={avatar} alt={author} />
                             </figure>
                             {author ? <p class="title is-size-4 is-block line-height-inherit">{author}</p> : null}
                             {authorTitle ? <p class="is-size-6 is-block">{authorTitle}</p> : null}