diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index f8b1b15a2..e3c825435 100644
--- a/src/components/user_card/user_card.scss
+++ b/src/components/user_card/user_card.scss
@@ -259,7 +259,10 @@
     }
 
     .lock-icon {
-      margin-left: 0.5em;
+      display: inline-block;
+      vertical-align: baseline;
+      overflow-x: hidden;
+      margin: 0 0.35em 0 0.5em;
     }
 
     .user-screen-name {
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 4b859c9d7..1904b9c40 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -102,18 +102,19 @@
               </router-link>
             </div>
             <div class="bottom-line">
-              <div class="user-screen-name">
-                <user-link
-                  :user="user"
+              <user-link
+                class="user-screen-name"
+                :user="user"
+              />
+              <span
+                v-if="user.locked"
+                class="lock-icon"
+              >
+                <FAIcon
+                  icon="lock"
+                  size="sm"
                 />
-                <span v-if="user.locked">
-                  <FAIcon
-                    class="lock-icon"
-                    icon="lock"
-                    size="sm"
-                  />
-                </span>
-              </div>
+              </span>
               <template v-if="!hideBio">
                 <span
                   v-if="user.deactivated"