Start designing the card details pane

Implement a dynamic overflow to focus sight on the pane.

client/components/users/userAvatar.jade

@@ -1,6 +1,5 @@
 template(name="userAvatar")
-  .member(class="{{class}} {{# if draggable }}js-member{{else}}js-member-on-card-menu{{/if}}"
-    title="{{userData.profile.name}} ({{userData.username}})")
+  .member.js-member(class="{{class}}" title="{{userData.profile.name}} ({{userData.username}})")
     +avatar(user=userData size=size)
     if showStatus
       span.member-presence-status(class=presenceStatusClassName)

client/components/users/userAvatar.styl

@@ -96,6 +96,13 @@ avatar-radius = 50%
         line-height: 85px
         width: 85px
 
+  &.add-member
+    display: flex
+    align-items: center
+    justify-content: center
+    box-shadow: 0 0 0 2px darken(white, 25%) inset
+    background: darken(white, 5%)
+
 .atMention
   background: #dbdbdb
   border-radius: 3px