From 7ab1eb4f6433d1d5564db38e20c7f1650323ebc5 Mon Sep 17 00:00:00 2001
From: Toby Zerner <toby.zerner@gmail.com>
Date: Wed, 16 Sep 2015 14:43:48 +0930
Subject: [PATCH] Move post previews outside of .Post-body so they don't get
 clipped

---
 .../mentions/js/forum/src/addPostMentionPreviews.js   | 11 +++++++----
 extensions/mentions/less/forum/extension.less         |  1 +
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/extensions/mentions/js/forum/src/addPostMentionPreviews.js b/extensions/mentions/js/forum/src/addPostMentionPreviews.js
index 96e483c83..63c4a109e 100644
--- a/extensions/mentions/js/forum/src/addPostMentionPreviews.js
+++ b/extensions/mentions/js/forum/src/addPostMentionPreviews.js
@@ -12,6 +12,7 @@ export default function addPostMentionPreviews() {
     this.oldPostContentHtml = contentHtml;
 
     const parentPost = this.props.post;
+    const $parentPost = this.$();
 
     this.$('.UserMention, .PostMention').each(function() {
       m.route.call(this, this, false, {}, {attrs: {href: this.getAttribute('href')}});
@@ -25,8 +26,7 @@ export default function addPostMentionPreviews() {
       // Wrap the mention link in a wrapper element so that we can insert a
       // preview popup as its sibling and relatively position it.
       const $preview = $('<ul class="Dropdown-menu PostMention-preview fade"/>');
-      const $wrapper = $('<span class="PostMention-wrapper"/>');
-      $this.wrap($wrapper).after($preview);
+      $parentPost.append($preview);
 
       const getPostElement = () => {
         return $(`.PostStream-item[data-id="${id}"]`);
@@ -53,7 +53,10 @@ export default function addPostMentionPreviews() {
           // Position the preview so that it appears above the mention.
           // (The offsetParent should be .Post-body.)
           const positionPreview = () => {
-            $preview.show().css('top', $this.offset().top - $this.offsetParent().offset().top - $preview.outerHeight(true));
+            $preview.show()
+              .css('top', $this.offset().top - $parentPost.offset().top - $preview.outerHeight(true))
+              .css('left', $this.offsetParent().offset().left - $parentPost.offset().left)
+              .css('max-width', $this.offsetParent().width());
           };
 
           const showPost = post => {
@@ -90,7 +93,7 @@ export default function addPostMentionPreviews() {
 
       $this.on('touchstart', e => e.preventDefault());
 
-      $this.parent().hover(
+      $this.add($preview).hover(
         () => {
           clearTimeout(timeout);
           timeout = setTimeout(showPreview, 250);
diff --git a/extensions/mentions/less/forum/extension.less b/extensions/mentions/less/forum/extension.less
index 9e9e743e7..abd39ef91 100644
--- a/extensions/mentions/less/forum/extension.less
+++ b/extensions/mentions/less/forum/extension.less
@@ -84,4 +84,5 @@
 .PostMention-preview-discussion {
   padding-top: 0 !important;
   font-weight: bold !important;
+  white-space: normal !important;
 }