Improve mobile layout of user card

3 files changed, 28 insertions, 8 deletions

diff --git a/src/components/basic_user_card/basic_user_card.vue b/src/components/basic_user_card/basic_user_card.vue
index af4ffc08..0563360a 100644
--- a/src/components/basic_user_card/basic_user_card.vue
+++ b/src/components/basic_user_card/basic_user_card.vue
@@ -13,9 +13,12 @@
             <span v-if="user.name_html" v-html="user.name_html"></span>
             <span v-else>{{ user.name }}</span>
           </div>
-          <router-link :to="userProfileLink(user)">
-            @{{user.screen_name}}
-          </router-link>
+          <div>
+            <router-link :to="userProfileLink(user)">
+              @{{user.screen_name}}
+            </router-link>
+          </div>
+          <slot name="primary-area"></slot>
         </div>
         <div class="user-card-secondary-area">
           <slot name="secondary-area"></slot>
@@ -49,6 +52,7 @@
     margin-left: 0.7em;
     text-align: left;
     flex: 1;
+    min-width: 0;
   }
 
   &-primary-secondary-wrapper {
@@ -59,6 +63,8 @@
 
   &-primary-area {
     flex: 1;
+    margin-right: 1em;
+    min-width: 0;
   }
 
   &-user-name {
@@ -100,5 +106,15 @@
       margin-bottom: 0;
     }
   }
+
+  @media (min-width: 320px) and (max-width: 480px) {
+    &-primary-secondary-wrapper {
+      flex-direction: column;
+    }
+
+    &-primary-area {
+      margin-right: 0;
+    }
+  }
 }
 </style>
diff --git a/src/components/follow_card/follow_card.vue b/src/components/follow_card/follow_card.vue
index e6933e3c..8e6dd2fb 100644
--- a/src/components/follow_card/follow_card.vue
+++ b/src/components/follow_card/follow_card.vue
@@ -1,5 +1,10 @@
 <template>
   <basic-user-card :user="user">
+    <template slot="primary-area">
+      <span class="faint" v-if="!noFollowsYou && user.follows_you">
+        {{ isMe ? $t('user_card.its_you') : $t('user_card.follows_you') }}
+      </span>
+    </template>
     <template slot="secondary-area">
       <button
         v-if="showFollow"
@@ -27,11 +32,6 @@
         </template>
       </button>
     </template>
-    <template slot="tertiary-area">
-      <span class="faint" v-if="!noFollowsYou && user.follows_you">
-        {{ isMe ? $t('user_card.its_you') : $t('user_card.follows_you') }}
-      </span>
-    </template>
   </basic-user-card>
 </template>
 
diff --git a/src/components/follow_request_card/follow_request_card.vue b/src/components/follow_request_card/follow_request_card.vue
index 4e2f3bf8..522db35f 100644
--- a/src/components/follow_request_card/follow_request_card.vue
+++ b/src/components/follow_request_card/follow_request_card.vue
@@ -22,6 +22,10 @@
     flex: 1 1;
     max-width: 12em;
     min-width: 8em;
+
+    &:last-child {
+      margin-right: 0;
+    }
   }
 }
 </style>