Code Owners section avatars are blurry
The small avatars in the Approvals widget, Code Owners section are very blurry. This is because the image itself is displayed as a 24x24
image but we only serve the 1x
version of the image (/uploads/-/system/user/avatar/01012302103/avatar.png?width=24
), which make avatars look blurry on Retina displays.
We should change this to width=48
. Tested on Chrome, macOS. A fix should look something like this (not fully tested):
diff --git a/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_list.vue b/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_list.vue
index ecc05d9d60fe..7f5fe13f52f1 100644
--- a/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_list.vue
+++ b/ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_list.vue
@@ -228,7 +228,7 @@ export default {
v-if="!rule.fallback && rule.eligibleApprovers.length"
class="gl-my-3"
:items="rule.eligibleApprovers"
- :img-size="24"
+ :img-size="48"
empty-text=""
/>
<approvals-users-list
@@ -251,7 +251,7 @@ export default {
>
<user-avatar-list
:items="rule.eligibleApprovers"
- :img-size="24"
+ :img-size="48"
empty-text=""
class="gl-display-flex gl-flex-wrap"
/>
@@ -262,7 +262,7 @@ export default {
<td class="d-md-table-cell d-none js-commented-by">
<user-avatar-list
:items="rule.commentedBy.nodes"
- :img-size="24"
+ :img-size="48"
empty-text=""
class="gl-display-flex gl-flex-wrap"
/>
@@ -270,7 +270,7 @@ export default {
<td class="d-none d-md-table-cell js-approved-by">
<user-avatar-list
:items="rule.approvedBy.nodes"
- :img-size="24"
+ :img-size="48"
empty-text=""
class="gl-display-flex gl-flex-wrap"
/>