From a911366dae174fe67f567844719b9aa1f46211d1 Mon Sep 17 00:00:00 2001
From: Djordje Vlaisavljevic <dzvlais@gmail.com>
Date: Wed, 1 Mar 2023 23:14:57 +0000
Subject: [PATCH] Updated multiple mentions dropdown design

refs https://github.com/TryGhost/Team/issues/2606
---
 ghost/admin/app/styles/layouts/mentions.css | 16 +++++++++++++++-
 ghost/admin/app/templates/mentions.hbs      |  4 ++--
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/ghost/admin/app/styles/layouts/mentions.css b/ghost/admin/app/styles/layouts/mentions.css
index 01ae0ff5c5..6163bf980f 100644
--- a/ghost/admin/app/styles/layouts/mentions.css
+++ b/ghost/admin/app/styles/layouts/mentions.css
@@ -41,6 +41,7 @@
     line-height: 1.2;
     margin-bottom: 14px;
     white-space: nowrap;
+    position: relative;
 }
 
 .gh-mention-icon {
@@ -53,6 +54,9 @@
 .gh-mention-publisher {
     color: var(--middarkgrey);
     font-weight: 500;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
 }
 
 .gh-mention-link-icon {
@@ -89,6 +93,16 @@
     margin-bottom: 0;
 }
 
+.gh-mention-multiple-links-link {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+.gh-mention-header .popover-arrow  {
+    display: none;
+}
+
 .gh-mention-header .popover {
     border: none;
     /* border: 1px solid var(--whitegrey-l1); */
@@ -151,10 +165,10 @@
 }
 
 .gh-mention-author {
+    white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
     max-width: 240px;
-    white-space: nowrap;
     display: block;
     line-height: 1.65em;
     font-weight: 400;
diff --git a/ghost/admin/app/templates/mentions.hbs b/ghost/admin/app/templates/mentions.hbs
index 788ede0d70..05ef92c761 100644
--- a/ghost/admin/app/templates/mentions.hbs
+++ b/ghost/admin/app/templates/mentions.hbs
@@ -56,10 +56,10 @@
                                     </div>
                                     <div>
                                         <span class="gh-mention-your-link has-multiple-links">{{mention.mentions.length}} links</span>
-                                        <EmberPopover @tooltipClass="popover" @spacing={{15}} @arrowClass="popover-arrow" @side="top-start">
+                                        <EmberPopover @tooltipClass="popover" @spacing={{8}} @arrowClass="popover-arrow" @side="bottom-start">
                                             <ul class="gh-mention-multiple-links">
                                                 {{#each mention.mentions as |submention|}}
-                                                    <li>{{if submention.resource submention.resource.name submention.target}}</li>
+                                                    <li class="gh-mention-multiple-links-link">{{if submention.resource submention.resource.name submention.target}}</li>
                                                 {{/each}}
                                             </ul>
                                         </EmberPopover>