From 865238df81f1343a9bd7a13cce10b51581dc4950 Mon Sep 17 00:00:00 2001
From: Toby Zerner <toby.zerner@gmail.com>
Date: Mon, 28 Mar 2016 13:33:46 +1030
Subject: [PATCH] Add logic to make sure post mention preview isn't hidden by
 header. closes flarum/core#316

---
 extensions/mentions/js/forum/dist/extension.js      | 13 ++++++++++++-
 .../mentions/js/forum/src/addPostMentionPreviews.js | 13 ++++++++++++-
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/extensions/mentions/js/forum/dist/extension.js b/extensions/mentions/js/forum/dist/extension.js
index cbcb66b65..ddc62c41c 100644
--- a/extensions/mentions/js/forum/dist/extension.js
+++ b/extensions/mentions/js/forum/dist/extension.js
@@ -531,7 +531,18 @@ System.register('flarum/mentions/addPostMentionPreviews', ['flarum/extend', 'fla
               // Position the preview so that it appears above the mention.
               // (The offsetParent should be .Post-body.)
               var positionPreview = function positionPreview() {
-                $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());
+                var previewHeight = $preview.outerHeight(true);
+                var offset = 0;
+
+                // If the preview goes off the top of the viewport, reposition it to
+                // be below the mention.
+                if ($this.offset().top - previewHeight < $(window).scrollTop() + $('#header').outerHeight()) {
+                  offset += $this.outerHeight(true);
+                } else {
+                  offset -= previewHeight;
+                }
+
+                $preview.show().css('top', $this.offset().top - $parentPost.offset().top + offset).css('left', $this.offsetParent().offset().left - $parentPost.offset().left).css('max-width', $this.offsetParent().width());
               };
 
               var showPost = function showPost(post) {
diff --git a/extensions/mentions/js/forum/src/addPostMentionPreviews.js b/extensions/mentions/js/forum/src/addPostMentionPreviews.js
index 63c4a109e..6c1a58ebc 100644
--- a/extensions/mentions/js/forum/src/addPostMentionPreviews.js
+++ b/extensions/mentions/js/forum/src/addPostMentionPreviews.js
@@ -53,8 +53,19 @@ export default function addPostMentionPreviews() {
           // Position the preview so that it appears above the mention.
           // (The offsetParent should be .Post-body.)
           const positionPreview = () => {
+            const previewHeight = $preview.outerHeight(true);
+            let offset = 0;
+
+            // If the preview goes off the top of the viewport, reposition it to
+            // be below the mention.
+            if ($this.offset().top - previewHeight < $(window).scrollTop() + $('#header').outerHeight()) {
+              offset += $this.outerHeight(true);
+            } else {
+              offset -= previewHeight;
+            }
+
             $preview.show()
-              .css('top', $this.offset().top - $parentPost.offset().top - $preview.outerHeight(true))
+              .css('top', $this.offset().top - $parentPost.offset().top + offset)
               .css('left', $this.offsetParent().offset().left - $parentPost.offset().left)
               .css('max-width', $this.offsetParent().width());
           };