make it a blue link instead of the whole thing

client/coral-admin/src/containers/ModerationQueue/components/Comment.js

@@ -57,11 +57,11 @@ const Comment = ({actions = [], comment, ...props}) => {
             <Link to={`/admin/moderate/${comment.asset.id}`}>Moderate →</Link>
           )}
         </div>
-        <a className={styles.itemBody} href={`${comment.asset.url}#${comment.id}`} target="_blank">
+        <div className={styles.itemBody}>
           <p className={styles.body}>
             <Highlighter
               searchWords={[...props.suspectWords, ...props.bannedWords, ...linkText]}
-              textToHighlight={comment.body} />
+              textToHighlight={comment.body} /> <a className={styles.external} href={`${comment.asset.url}#${comment.id}`} target="_blank"><Icon name='open_in_new' /> View context</a>
           </p>
           <div className={styles.sideActions}>
             {links ? <span className={styles.hasLinks}><Icon name='error_outline'/> Contains Link</span> : null}
@@ -79,7 +79,7 @@ const Comment = ({actions = [], comment, ...props}) => {
               })}
             </div>
           </div>
-        </a>
+        </div>
       </div>
       {
         flagActions && flagActions.length

client/coral-admin/src/containers/ModerationQueue/components/styles.css

@@ -431,3 +431,24 @@ span {
   position: relative;
   top: 7px;
 }
+
+.external {
+  font-size: .7em;
+  text-decoration: none;
+  color: #063b9a;
+  cursor: pointer;
+  font-weight: normal;
+  margin-left: 10px;
+  white-space: nowrap;
+
+  &:hover {
+    text-decoration: underline;
+    opacity: .9;
+  }
+
+  i {
+    font-size: 12px;
+    top: 2px;
+    position: relative;
+  }
+}