make the user popover look and work better

src/components/popover/popover.js

@@ -26,7 +26,7 @@ const Popover = {
   data () {
     return {
       hidden: true,
-      hovered: false, 
+      hovered: false,
       styles: { opacity: 0 },
       oldSize: { width: 0, height: 0 }
     }

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

@@ -91,40 +91,10 @@
         </div>
         <div class="user-meta">
           <div
-            v-if="isOtherUser && (loggedIn || !switcher)"
+            v-if="relationship.followed_by && loggedIn && isOtherUser"
-            class="highlighter"
+            class="following"
           >
-            <!-- id's need to be unique, otherwise vue confuses which user-card checkbox belongs to -->
+            {{ $t('user_card.follows_you') }}
-            <input
-              v-if="userHighlightType !== 'disabled'"
-              :id="'userHighlightColorTx'+user.id"
-              v-model="userHighlightColor"
-              class="userHighlightText"
-              type="text"
-            >
-            <input
-              v-if="userHighlightType !== 'disabled'"
-              :id="'userHighlightColor'+user.id"
-              v-model="userHighlightColor"
-              class="userHighlightCl"
-              type="color"
-            >
-            <label
-              for="theme_tab"
-              class="userHighlightSel select"
-            >
-              <select
-                :id="'userHighlightSel'+user.id"
-                v-model="userHighlightType"
-                class="userHighlightSel"
-              >
-                <option value="disabled">No highlight</option>
-                <option value="solid">Solid bg</option>
-                <option value="striped">Striped bg</option>
-                <option value="side">Side stripe</option>
-              </select>
-              <i class="icon-down-open" />
-            </label>
           </div>
         </div>
         <div
@@ -155,14 +125,44 @@
                 :user="user"
                 :relationship="relationship"
               />
+              <div
+                v-if="isOtherUser && (loggedIn || !switcher)"
+                class="highlighter"
+              >
+                <!-- id's need to be unique, otherwise vue confuses which user-card checkbox belongs to -->
+                <input
+                  v-if="userHighlightType !== 'disabled'"
+                  :id="'userHighlightColorTx'+user.id"
+                  v-model="userHighlightColor"
+                  class="userHighlightText"
+                  type="text"
+                >
+                <input
+                  v-if="userHighlightType !== 'disabled'"
+                  :id="'userHighlightColor'+user.id"
+                  v-model="userHighlightColor"
+                  class="userHighlightCl"
+                  type="color"
+                >
+                <label
+                  for="theme_tab"
+                  class="userHighlightSel select"
+                >
+                  <select
+                    :id="'userHighlightSel'+user.id"
+                    v-model="userHighlightType"
+                    class="userHighlightSel"
+                  >
+                    <option value="disabled">No highlight</option>
+                    <option value="solid">Solid bg</option>
+                    <option value="striped">Striped bg</option>
+                    <option value="side">Side stripe</option>
+                  </select>
+                  <i class="icon-down-open" />
+                </label>
+              </div>
             </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);