fixed stuff overflowing in user popup e.g. in notifs

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'])
   },

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 {

src/components/user_card/user_card.vue

@@ -32,6 +32,7 @@
           </a>
           <router-link
             v-else
+            class="user-info-avatar-link"
             :to="userProfileLink(user)"
           >
             <UserAvatar
@@ -39,13 +40,13 @@
               :user="user"
             />
           </router-link>
-          <div class="user-summary">
           <RichContent
             :title="user.name"
             class="user-name"
             :html="user.name"
             :emoji="user.emoji"
           />
+          <div class="user-summary">
             <router-link
               class="user-screen-name"
               :title="user.screen_name_ui"