UX: Display user and group cards over the small PM header

app/assets/javascripts/discourse/mixins/card-contents-base.js.es6

@@ -16,6 +16,7 @@ export default Ember.Mixin.create({
   cardTarget: null,
   post: null,
   isFixed: false,
+  isDocked: false,
 
   _show(username, $target) {
     // No user card for anon
@@ -123,6 +124,8 @@ export default Ember.Mixin.create({
     });
 
     this.appEvents.on(`topic-header:trigger-${id}`, (username, $target) => {
+      this.set("isFixed", true);
+      this.set("isDocked", true);
       return this._show(username, $target);
     });
   },
@@ -135,6 +138,7 @@ export default Ember.Mixin.create({
     const width = this.$().width();
     const height = 175;
     const isFixed = this.get("isFixed");
+    const isDocked = this.get("isDocked");
 
     let verticalAdjustments = 0;
 
@@ -183,9 +187,16 @@ export default Ember.Mixin.create({
               position.top = "unset";
             }
           }
+
+          if (isDocked && position.top < 44) {
+            position.top = 44;
+          }
+
           this.$().css(position);
         }
 
+        this.$().toggleClass("docked-card", isDocked);
+
         // After the card is shown, focus on the first link
         //
         // note: we DO NOT use afterRender here cause _positionCard may
@@ -209,7 +220,8 @@ export default Ember.Mixin.create({
       loading: null,
       cardTarget: null,
       post: null,
-      isFixed: false
+      isFixed: false,
+      isDocked: false
     });
   },
 

app/assets/stylesheets/desktop/user-card.scss

@@ -33,6 +33,10 @@ $user_card_background: $secondary;
     z-index: z("composer", "content") + 1;
   }
 
+  &.docked-card {
+    z-index: z("header") + 1;
+  }
+
   .card-content {
     padding: 12px 12px 0 12px;
     background: rgba($user_card_background, 0.85);