From f3822d09b28083b2ce33c364727e89f0fa5e6edf Mon Sep 17 00:00:00 2001
From: riley <riley.davis@gmail.com>
Date: Tue, 25 Apr 2017 15:54:18 -0600
Subject: [PATCH 1/4] position the reporting popup in a more reliable way

---
 client/coral-embed-stream/style/default.css | 12 +-----------
 client/coral-plugin-flags/FlagButton.js     | 13 +++++++++++--
 client/coral-ui/components/PopupMenu.css    |  6 ++++--
 client/coral-ui/components/PopupMenu.js     |  2 +-
 4 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css
index 087859e89..d1afed204 100644
--- a/client/coral-embed-stream/style/default.css
+++ b/client/coral-embed-stream/style/default.css
@@ -352,17 +352,6 @@ button.comment__action-button[disabled],
 
 /* Flag Styles */
 
-.coral-plugin-flags-container {
-  position: relative;
-}
-
-.coral-plugin-flags-popup span {
-  min-width: 280px;
-  bottom: 36px;
-  position: absolute;
-  right: 10px;
-}
-
 .coral-plugin-flags-popup-form {
   margin-bottom: 10px;
 }
@@ -399,6 +388,7 @@ button.comment__action-button[disabled],
   margin-top: 5px;
   width: 75%;
   font-size: 16px;
+  border: 1px solid #ccc;
 }
 
 /* Close comments */
diff --git a/client/coral-plugin-flags/FlagButton.js b/client/coral-plugin-flags/FlagButton.js
index 16e616379..e5daf72c9 100644
--- a/client/coral-plugin-flags/FlagButton.js
+++ b/client/coral-plugin-flags/FlagButton.js
@@ -19,6 +19,12 @@ class FlagButton extends Component {
     localDelete: false
   }
 
+  componentDidUpdate () {
+    if (this.popup) { // this will be defined when the reporting popup is opened
+      this.popup.firstChild.style.top = `${this.flagButton.offsetTop - this.popup.firstChild.clientHeight - 15}px`;
+    }
+  }
+
   // When the "report" button is clicked expand the menu
   onReportClick = () => {
     const {currentUser, deleteAction, flaggedByCurrentUser, flag} = this.props;
@@ -135,7 +141,10 @@ class FlagButton extends Component {
     const popupMenu = getPopupMenu[this.state.step](this.state.itemType);
 
     return <div className={`${name}-container`}>
-      <button onClick={!this.props.banned ? this.onReportClick : null} className={`${name}-button`}>
+      <button
+        ref={ref => this.flagButton = ref}
+        onClick={!this.props.banned ? this.onReportClick : null}
+        className={`${name}-button`}>
         {
           flagged
           ? <span className={`${name}-button-text`}>{lang.t('reported')}</span>
@@ -147,7 +156,7 @@ class FlagButton extends Component {
       </button>
       {
         this.state.showMenu &&
-        <div className={`${name}-popup`}>
+        <div className={`${name}-popup`} ref={ref => this.popup = ref}>
           <PopupMenu>
             <div className={`${name}-popup-header`}>{popupMenu.header}</div>
             {
diff --git a/client/coral-ui/components/PopupMenu.css b/client/coral-ui/components/PopupMenu.css
index fe57ba8b2..e7e6416e9 100644
--- a/client/coral-ui/components/PopupMenu.css
+++ b/client/coral-ui/components/PopupMenu.css
@@ -1,6 +1,7 @@
 .popupMenu {
-  display: inline-block;
-  width: inherit;
+  display: block;
+  position: absolute;
+  width: 100%;
   border: solid 1px #999;
   box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.3);
   box-sizing: border-box;
@@ -8,6 +9,7 @@
   border-radius: 3px;
   padding: 20px 10px;
   z-index: 3;
+  left: 0;
 }
 
 .popupMenu:before{
diff --git a/client/coral-ui/components/PopupMenu.js b/client/coral-ui/components/PopupMenu.js
index dfc81c3a1..6d4381ffe 100644
--- a/client/coral-ui/components/PopupMenu.js
+++ b/client/coral-ui/components/PopupMenu.js
@@ -2,5 +2,5 @@ import React from 'react';
 import styles from './PopupMenu.css';
 
 export default ({children}) => (
-  <span className={styles.popupMenu}>{children}</span>
+  <div className={styles.popupMenu}>{children}</div>
 );

From 080766396530b501e51973d51b2c19a60389bc87 Mon Sep 17 00:00:00 2001
From: riley <riley.davis@gmail.com>
Date: Tue, 25 Apr 2017 16:31:33 -0600
Subject: [PATCH 2/4] add z-index to popup

---
 client/coral-ui/components/PopupMenu.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/coral-ui/components/PopupMenu.css b/client/coral-ui/components/PopupMenu.css
index e7e6416e9..6e7c0f622 100644
--- a/client/coral-ui/components/PopupMenu.css
+++ b/client/coral-ui/components/PopupMenu.css
@@ -8,7 +8,7 @@
   background: white;
   border-radius: 3px;
   padding: 20px 10px;
-  z-index: 3;
+  z-index: 300;
   left: 0;
 }
 

From cea0b4942a6b8c9c51d108f81fc621323517bd80 Mon Sep 17 00:00:00 2001
From: Riley Davis <riley.davis@gmail.com>
Date: Wed, 26 Apr 2017 09:32:00 -0600
Subject: [PATCH 3/4] prevent text overflow

---
 client/coral-ui/components/PopupMenu.css | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/client/coral-ui/components/PopupMenu.css b/client/coral-ui/components/PopupMenu.css
index 6e7c0f622..e622f7b2e 100644
--- a/client/coral-ui/components/PopupMenu.css
+++ b/client/coral-ui/components/PopupMenu.css
@@ -1,7 +1,8 @@
 .popupMenu {
+  white-space: normal;
   display: block;
   position: absolute;
-  width: 100%;
+  width: 98%;
   border: solid 1px #999;
   box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.3);
   box-sizing: border-box;
@@ -9,7 +10,7 @@
   border-radius: 3px;
   padding: 20px 10px;
   z-index: 300;
-  left: 0;
+  left: 1%;
 }
 
 .popupMenu:before{

From 0df40c7e356962ef0d4fffdb94e96f2805e1783a Mon Sep 17 00:00:00 2001
From: Riley Davis <riley.davis@gmail.com>
Date: Wed, 26 Apr 2017 11:50:17 -0600
Subject: [PATCH 4/4] make the popup not full width like before

---
 client/coral-ui/components/PopupMenu.css | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/client/coral-ui/components/PopupMenu.css b/client/coral-ui/components/PopupMenu.css
index e622f7b2e..35544fbad 100644
--- a/client/coral-ui/components/PopupMenu.css
+++ b/client/coral-ui/components/PopupMenu.css
@@ -2,7 +2,8 @@
   white-space: normal;
   display: block;
   position: absolute;
-  width: 98%;
+  max-width: 98%;
+  min-width: 50%;
   border: solid 1px #999;
   box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.3);
   box-sizing: border-box;
@@ -10,7 +11,7 @@
   border-radius: 3px;
   padding: 20px 10px;
   z-index: 300;
-  left: 1%;
+  right: 1%;
 }
 
 .popupMenu:before{