position permalink popup given different comment scenarios

client/coral-embed-stream/src/Comment.css

@@ -5,6 +5,7 @@
 
 .Comment {
   margin-bottom: 15px;
+  position: relative;
 }
 
 .pendingComment {

client/coral-embed-stream/style/default.css

@@ -306,10 +306,7 @@ button.comment__action-button[disabled],
   display: none;
   background-color: white;
   border: 1px solid black;
-  width: calc(100% - 15px);
   position: absolute;
-  top: 70px;
-  right: 0;
   padding: 5px;
 }
 

client/coral-plugin-permalinks/PermalinkButton.js

@@ -23,6 +23,10 @@ class PermalinkButton extends React.Component {
   }
 
   toggle () {
+
+    // I wish I could position this with a stylesheet, but top-level comments with
+    // nested replies throws everything off, as well as very long comments
+    this.popover.style.top = `${this.linkButton.offsetTop - 80}px`;
     this.setState({popoverOpen: !this.state.popoverOpen});
   }
 
@@ -48,11 +52,16 @@ class PermalinkButton extends React.Component {
     const {copySuccessful, copyFailure} = this.state;
     return (
       <div className={`${name}-container`}>
-        <button onClick={this.toggle} className={`${name}-button`}>
+        <button
+          ref={ref => this.linkButton = ref}
+          onClick={this.toggle}
+          className={`${name}-button`}>
           {lang.t('permalink.permalink')}
           <i className={`${name}-icon material-icons`} aria-hidden={true}>link</i>
         </button>
-        <div className={`${name}-popover ${styles.container} ${this.state.popoverOpen ? 'active' : ''}`}>
+        <div
+          ref={ref => this.popover = ref}
+          className={`${name}-popover ${styles.container} ${this.state.popoverOpen ? 'active' : ''}`}>
           <input
             className={`${name}-copy-field`}
             type='text'

client/coral-plugin-permalinks/styles.css

@@ -4,22 +4,15 @@
   box-sizing: border-box;
   /* box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.3); */
   border: solid 1px rgba(153, 153, 153, 0.33);
-  width: auto;
-  margin: 0 auto;
-  left: 0;
-  margin: 0 5px;
-  top: 0;
   left: 0;
   width: 100%;
-  margin: 0;
-  margin-top: -13px;
 
   &::before {
     content: '';
     border: 10px solid transparent;
     border-top-color: white;
     position: absolute;
-    right: 8.69em;
+    right: 7em;
     bottom: -20px;
     z-index: 2;
   }
@@ -29,7 +22,7 @@
     border: 10px solid transparent;
     border-top-color: rgba(153, 153, 153, 0.33);
     position: absolute;
-    right: 8.69em;
+    right: 7em;
     bottom: -21px;
     z-index: 1;
   }