diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index bdae3cd6..fdedafa7 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -120,6 +120,7 @@ export default {
compactUserInfo () {
return this.$store.getters.mergedConfig.compactUserInfo
&& (this.$store.state.interface.layoutType !== 'mobile')
+ && this.switcher
},
...mapGetters(['mergedConfig'])
},
diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index dcbc4678..912e50c6 100644
--- a/src/components/user_card/user_card.scss
+++ b/src/components/user_card/user_card.scss
@@ -109,7 +109,8 @@
padding: 16px 0 6px;
display: grid;
grid-template-areas:
- "pfp summary edit"
+ "pfp name edit"
+ "pfp summary summary"
"stats stats stats";
grid-template-columns: auto 1fr auto;
align-items: start;
@@ -251,13 +252,15 @@
}
.user-name {
+ text-align: start;
text-overflow: ellipsis;
overflow: hidden;
- margin-right: 1em;
+ margin-left: 0.6em;
font-size: 1.1em;
grid-area: name;
white-space: nowrap;
max-width: 100%;
+ z-index: 1; // so shadow from user avatar doesn't overlap it
}
.user-meta {
@@ -325,7 +328,9 @@
&.-compact {
.container {
- grid-template-areas: "pfp summary stats edit";
+ grid-template-areas:
+ "pfp name stats edit"
+ "pfp summary stats edit";
grid-template-columns: auto auto 1fr auto;
}
.user-counts {
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 39d2c63d..9b1b85e8 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -32,6 +32,7 @@