diff --git a/app/assets/javascripts/discourse/app/templates/components/user-card-contents.hbs b/app/assets/javascripts/discourse/app/templates/components/user-card-contents.hbs
index ab4b80e27d..c08cfcd6a4 100644
--- a/app/assets/javascripts/discourse/app/templates/components/user-card-contents.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/user-card-contents.hbs
@@ -235,7 +235,13 @@
{{#if uf.value}}
{{uf.field.name}}:
- {{uf.value}}
+
+ {{#each uf.value as |v|}} {{! some values are arrays }}
+ {{v}}
+ {{else}}
+ {{uf.value}}
+ {{/each}}
+
{{/if}}
{{/each}}
diff --git a/app/assets/javascripts/discourse/app/templates/user.hbs b/app/assets/javascripts/discourse/app/templates/user.hbs
index 1635bde251..a714cc8c01 100644
--- a/app/assets/javascripts/discourse/app/templates/user.hbs
+++ b/app/assets/javascripts/discourse/app/templates/user.hbs
@@ -159,7 +159,13 @@
{{#if uf.value}}
{{uf.field.name}}:
- {{uf.value}}
+
+ {{#each uf.value as |v|}} {{! some values are arrays }}
+ {{v}}
+ {{else }}
+ {{uf.value}}
+ {{/each}}
+
{{/if}}
{{/each}}
diff --git a/app/assets/stylesheets/common/base/user.scss b/app/assets/stylesheets/common/base/user.scss
index 5c1e478ee5..75728b5b06 100644
--- a/app/assets/stylesheets/common/base/user.scss
+++ b/app/assets/stylesheets/common/base/user.scss
@@ -362,6 +362,13 @@
.collapsed-info & {
display: none;
}
+
+ .user-field-value-list-item:not(:last-of-type) {
+ &:after {
+ // create comma separated list
+ content: ",";
+ }
+ }
}
.avatar-selector {
diff --git a/app/assets/stylesheets/common/components/user-card.scss b/app/assets/stylesheets/common/components/user-card.scss
index d3c5ba832f..c2e5e1b811 100644
--- a/app/assets/stylesheets/common/components/user-card.scss
+++ b/app/assets/stylesheets/common/components/user-card.scss
@@ -221,6 +221,12 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards
// custom user fields
.public-user-fields {
margin: 0;
+ .user-field-value-list-item:not(:last-of-type) {
+ &:after {
+ // create comma separated list
+ content: ",";
+ }
+ }
}
// badges