From bf61592b567f949ea65c0454e42a884dd065ab6e Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shpuld@gmail.com>
Date: Wed, 23 Aug 2017 20:33:20 +0300
Subject: [PATCH] Round the edge of the user profile user card, make sure
 'follows you' stays in the right, fix avatar class conflict.

---
 src/components/timeline/timeline.vue         |  8 ------
 src/components/user_card/user_card.vue       | 30 ++++++++++++--------
 src/components/user_profile/user_profile.vue |  2 ++
 3 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index bf64b935..f36770d6 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -89,14 +89,6 @@
     }
   }
 
-  .avatar {
-  padding-top: 0.3em;
-  width:32px;
-  height: 32px;
-  border-radius: 50%;
-  }
-
-
   .new-status-notification {
     position:relative;
     margin-top: -1px;
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 5e886eb8..cc2f3978 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -7,14 +7,14 @@
       <user-card-content :user="user" :switcher="false"></user-card-content>
     </div>
     <div class="name-and-screen-name" v-else>
-      <div class="user-name">{{ user.name }}</div>
-      <a href="user.statusnet_profile_url"><div class="user-screen-name">@{{ user.screen_name }}</div></a>
-    </div>
-    <span class="follows-you" v-if="!userExpanded && showFollows">
-      <div class="follows" v-if="user.follows_you">
-        Follows you!
+      <div class="user-name">
+        {{ user.name }}
+        <span class="follows-you" v-if="!userExpanded && showFollows && user.follows_you">
+            Follows you!
+        </span>
       </div>
-    </span>
+      <a :href="user.statusnet_profile_url" target="blank"><div class="user-screen-name">@{{ user.screen_name }}</div></a>
+    </div>
   </div>
 </template>
 
@@ -23,21 +23,19 @@
 <style lang="scss">
   .name-and-screen-name {
     margin-left: 0.7em;
-    min-width: 16em;
-    display:block;
     margin-top:0.0em;
     margin-right: 2em;
     text-align: left;
+    width: 100%;
   }
 
   .follows-you {
     margin-left: 2em;
-    width:-webkit-fill-available;
-    width: -moz-webkit-fill-available;
+    float: right;
   }
 
   .follows {
-    float: right;
+
   }
 
   .card {
@@ -50,6 +48,14 @@
     border-bottom: 1px solid;
     margin: 0;
     border-bottom-color: inherit;
+
+
+    .avatar {
+      margin-top: 0.2em;
+      width:32px;
+      height: 32px;
+      border-radius: 50%;
+    }
   }
 
   .usercard {
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index 9a357efc..ec90b8b0 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -14,6 +14,8 @@
 .user-profile {
   flex: 2;
   flex-basis: 500px;
+  padding-bottom: 10px;
+  border-radius: 10px;
 }
 
 </style>