make the user popover look and work better

src/components/status/status.vue

@@ -131,7 +131,10 @@
                 >
                   {{ status.user.name }}
                 </h4>
-                <UserPopover :user-id="status.user.id">
+                <UserPopover
+                  :user-id="status.user.id"
+                  class="account-name"
+                >
                   <router-link
                     class="account-name"
                     :to="userProfileLink"
@@ -218,8 +221,13 @@
                 >
                   <span class="reply-to-text">{{ $t('status.reply_to') }}</span>
                 </span>
-                <UserPopover :user-id="status.in_reply_to_user_id">
+                <UserPopover
-                  <router-link :to="replyProfileLink">
+                  :user-id="status.in_reply_to_user_id"
+                >
+                  <router-link
+                    :to="replyProfileLink"
+                    class="reply-to-accountname"
+                  >
                     {{ replyToName }}
                   </router-link>
                 </UserPopover>
@@ -466,6 +474,7 @@ $status-margin: 0.75em;
         overflow: hidden;
         text-overflow: ellipsis;
         flex: 1 1 0;
+        display: block;
       }
     }
 
@@ -488,12 +497,13 @@ $status-margin: 0.75em;
       flex-wrap: wrap;
       align-items: stretch;
 
-      > .reply-to-and-accountname > a {
+      .reply-to-accountname {
         overflow: hidden;
         max-width: 100%;
         text-overflow: ellipsis;
         white-space: nowrap;
         word-break: break-all;
+        display: block;
       }
     }
 

src/components/user_card/user_card.vue

@@ -90,6 +90,41 @@
           </div>
         </div>
         <div class="user-meta">
+          <div
+            v-if="relationship.followed_by && loggedIn && isOtherUser"
+            class="following"
+          >
+            {{ $t('user_card.follows_you') }}
+          </div>
+        </div>
+        <div
+          v-if="loggedIn && isOtherUser"
+          class="user-interactions"
+        >
+          <div class="btn-group">
+            <FollowButton :relationship="relationship" />
+            <template v-if="relationship.following">
+              <ProgressButton
+                v-if="!relationship.subscribing"
+                class="btn btn-default"
+                :click="subscribeUser"
+                :title="$t('user_card.subscribe')"
+              >
+                <i class="icon-bell-alt" />
+              </ProgressButton>
+              <ProgressButton
+                v-else
+                class="btn btn-default toggled"
+                :click="unsubscribeUser"
+                :title="$t('user_card.unsubscribe')"
+              >
+                <i class="icon-bell-ringing-o" />
+              </ProgressButton>
+              <AccountActions
+                v-if="isOtherUser && loggedIn"
+                :user="user"
+                :relationship="relationship"
+              />
               <div
                 v-if="isOtherUser && (loggedIn || !switcher)"
                 class="highlighter"
@@ -126,43 +161,8 @@
                   <i class="icon-down-open" />
                 </label>
               </div>
-        </div>
-        <div
-          v-if="loggedIn && isOtherUser"
-          class="user-interactions"
-        >
-          <div class="btn-group">
-            <FollowButton :relationship="relationship" />
-            <template v-if="relationship.following">
-              <ProgressButton
-                v-if="!relationship.subscribing"
-                class="btn btn-default"
-                :click="subscribeUser"
-                :title="$t('user_card.subscribe')"
-              >
-                <i class="icon-bell-alt" />
-              </ProgressButton>
-              <ProgressButton
-                v-else
-                class="btn btn-default toggled"
-                :click="unsubscribeUser"
-                :title="$t('user_card.unsubscribe')"
-              >
-                <i class="icon-bell-ringing-o" />
-              </ProgressButton>
-              <AccountActions
-                v-if="isOtherUser && loggedIn"
-                :user="user"
-                :relationship="relationship"
-              />
             </template>
           </div>
-          <div
-            v-if="relationship.followed_by && loggedIn && isOtherUser"
-            class="following"
-          >
-            {{ $t('user_card.follows_you') }}
-          </div>
         </div>
         <div
           v-if="!loggedIn && user.is_local"
@@ -327,7 +327,7 @@
     align-items: flex-start;
     max-height: 56px;
 
-    .avatar {
+    .avatar.still-image {
       flex: 1 0 100%;
       width: 56px;
       height: 56px;

src/components/user_popover/user_popover.vue

@@ -1,5 +1,6 @@
 <template>
   <Popover
+    class="user-popover-container"
     trigger="hover"
     popover-class="user-popover"
     :bound-to="{ x: 'container' }"
@@ -40,18 +41,19 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
+.user-popover-container {
+  max-width: 100%;
+  min-width: 0;
+  &:first-child {
+    max-width: 100%;
+  }
+}
+
 .user-popover {
   font-size: 1rem;
-  min-width: 15em;
+  width: 30em;
   max-width: 95%;
   cursor: default;
-
-  border-color: $fallback--border;
-  border-color: var(--border, $fallback--border);
-  border-style: solid;
-  border-width: 1px;
-  border-radius: $fallback--tooltipRadius;
-  border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
   box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
   box-shadow: var(--popupShadow);