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