1 files changed, 21 insertions, 0 deletions
diff --git a/app/assets/stylesheets/components/avatar.scss b/app/assets/stylesheets/components/avatar.scss
index 6a6febbf7b4..23a7beb527b 100644
--- a/app/assets/stylesheets/components/avatar.scss
+++ b/app/assets/stylesheets/components/avatar.scss
@@ -189,3 +189,24 @@ $avatar-sizes: (
 .avatar-counter {
   @include avatar-counter();
 }
+
+.user-popover {
+  // GlAvatarLabeled doesn't expose any prop to override internal classes
+
+  // Max width of popover container is set by gl-max-w-48
+  // so we need to ensure that name/username/status container doesn't overflow
+  .gl-avatar-labeled-labels {
+    max-width: px-to-rem(290px);
+  }
+
+  .gl-avatar-labeled-label,
+  .gl-avatar-labeled-sublabel {
+    @include gl-text-truncate;
+  }
+
+  &.user-popover-cannot-merge {
+    .popover-header {
+      @include gl-bg-orange-50;
+    }
+  }
+}