diff --git a/app/assets/javascripts/discourse/app/widgets/liked-notification-item.js b/app/assets/javascripts/discourse/app/widgets/liked-notification-item.js
index b9602696272..46d5db1231a 100644
--- a/app/assets/javascripts/discourse/app/widgets/liked-notification-item.js
+++ b/app/assets/javascripts/discourse/app/widgets/liked-notification-item.js
@@ -15,14 +15,14 @@ createWidgetFrom(DefaultNotificationItem, "liked-notification-item", {
       if (count === 0) {
         return I18n.t("notifications.liked_2", {
           description,
-          username,
-          username2,
+          username: `<span class="multi-username">${username}</span>`,
+          username2: `<span class="multi-username">${username2}</span>`,
         });
       } else {
         return I18n.t("notifications.liked_many", {
           description,
-          username,
-          username2,
+          username: `<span class="multi-username">${username}</span>`,
+          username2: `<span class="multi-username">${username2}</span>`,
           count,
         });
       }
diff --git a/app/assets/stylesheets/common/base/menu-panel.scss b/app/assets/stylesheets/common/base/menu-panel.scss
index 267326fb4de..cbb63c9643d 100644
--- a/app/assets/stylesheets/common/base/menu-panel.scss
+++ b/app/assets/stylesheets/common/base/menu-panel.scss
@@ -236,6 +236,38 @@
         color: var(--primary);
       }
 
+      span.double-user, 
+      // e.g., "username, username2"
+      span.multi-user
+      // e.g., "username, username2, and n others"
+      {
+        display: inline-flex;
+        max-width: 100%;
+        align-items: baseline;
+        white-space: nowrap;
+      }
+
+      span.multi-user 
+      // e.g., "username, username2, and n others"
+      {
+        span.multi-username:nth-of-type(2) {
+          // margin between username2 and "and n others"
+          margin-right: 0.25em;
+        }
+      }
+
+      // truncate when usernames are very long
+      span.multi-username {
+        @include ellipsis;
+        flex: 0 1 auto;
+        min-width: 2em;
+        max-width: 10em;
+        &:nth-of-type(2) {
+          // margin for comma between username and username2
+          margin-left: 0.25em;
+        }
+      }
+
       &:hover,
       &:focus {
         background-color: var(--highlight-medium);
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index d4d939cc3ae..8b6c41e8cd5 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -1989,10 +1989,10 @@ en:
       posted: "<span>%{username}</span> %{description}"
       edited: "<span>%{username}</span> %{description}"
       liked: "<span>%{username}</span> %{description}"
-      liked_2: "<span>%{username}, %{username2}</span> %{description}"
+      liked_2: "<span class='double-user'>%{username}, %{username2}</span> %{description}"
       liked_many:
-        one: "<span>%{username}, %{username2} and %{count} other</span> %{description}"
-        other: "<span>%{username}, %{username2} and %{count} others</span> %{description}"
+        one: "<span class='multi-user'>%{username}, %{username2} and %{count} other</span> %{description}"
+        other: "<span class='multi-user'>%{username}, %{username2} and %{count} others</span> %{description}"
       liked_consolidated_description:
         one: "liked %{count} of your posts"
         other: "liked %{count} of your posts"