diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index 372ce44c9..7357784a5 100644
--- a/src/components/user_card/user_card.scss
+++ b/src/components/user_card/user_card.scss
@@ -149,6 +149,7 @@
     display: flex;
     align-items: flex-end;
     margin-bottom: 1em;
+    container: user-card / inline-size;
 
     > * {
       min-width: 0;
@@ -165,7 +166,9 @@
       --_avatarShadowInset: var(--avatarShadowInset);
 
       width: 7em;
+      width: calc(min(7em, 20cqw));
       height: 7em;
+      height: calc(min(7em, 20cqw));
       object-fit: cover;
     }
   }
@@ -267,10 +270,14 @@
       --link: var(--text) !important;
     }
 
-    .top-line, {
+    .top-line {
       display: flex;
+      // these two normalize position and height when custom emoji are used
       line-height: 2;
+      margin-bottom: -0.2em;
       font-weight: 600;
+      font-size: 110%;
+      font-size: calc(max(110%, 4cqw));
     }
 
     .bottom-line {
diff --git a/src/components/user_panel/user_panel.vue b/src/components/user_panel/user_panel.vue
index a3c71b169..94d6a9286 100644
--- a/src/components/user_panel/user_panel.vue
+++ b/src/components/user_panel/user_panel.vue
@@ -49,7 +49,9 @@
 
     .Avatar {
       width: 5em;
+      width: calc(min(5em, 20cqw));
       height: 5em;
+      height: calc(min(5em, 20cqw));
     }
   }