Updating style.

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

@@ -200,8 +200,11 @@ hr {
 
 /* Flag Styles */
 
-.coral-plugin-flags-popup {
+.coral-plugin-flags-popup span {
   min-width: 100px;
+  bottom: 36px;
+  right: 75px;
+  position: absolute;
 }
 
 .coral-plugin-flags-popup-form {

client/coral-plugin-flags/FlagButton.js

@@ -108,41 +108,43 @@ export default class FlagButton extends Component {
       </button>
       {
         this.state.showMenu &&
-        <PopupMenu className={`${name}-popup`}>
-          <div className={`${name}-popup-header`}>{popupMenu.header}</div>
-          {
-            popupMenu.text &&
-            <div className={`${name}-popup-text`}>{popupMenu.text}</div>
-          }
-          {
-            popupMenu.options && <form className={`${name}-popup-form`}>
-              {
-                popupMenu.options.map((option) =>
-                  <div key={option.val}>
-                    <input
-                      className={`${name}-popup-radio`}
-                      type="radio"
-                      id={option.val}
-                      checked={this.state[popupMenu.sets] === option.val}
-                      onClick={this.onPopupOptionClick(popupMenu.sets)}
-                      value={option.val}/>
-                    <label htmlFor={option.val} className={`${name}-popup-radio-label`}>{option.text}</label><br/>
-                  </div>
-                )
-              }
-            </form>
-          }
-          <div className={`${name}-popup-counter`}>
-            {this.state.step} of 3
-          </div>
-          {
-            popupMenu.button && <Button
-            className={`${name}-popup-button`}
-            onClick={this.onPopupContinue}>
-              {popupMenu.button}
-            </Button>
-          }
-        </PopupMenu>
+        <div className={`${name}-popup`}>
+          <PopupMenu>
+            <div className={`${name}-popup-header`}>{popupMenu.header}</div>
+            {
+              popupMenu.text &&
+              <div className={`${name}-popup-text`}>{popupMenu.text}</div>
+            }
+            {
+              popupMenu.options && <form className={`${name}-popup-form`}>
+                {
+                  popupMenu.options.map((option) =>
+                    <div key={option.val}>
+                      <input
+                        className={`${name}-popup-radio`}
+                        type="radio"
+                        id={option.val}
+                        checked={this.state[popupMenu.sets] === option.val}
+                        onClick={this.onPopupOptionClick(popupMenu.sets)}
+                        value={option.val}/>
+                      <label htmlFor={option.val} className={`${name}-popup-radio-label`}>{option.text}</label><br/>
+                    </div>
+                  )
+                }
+              </form>
+            }
+            <div className={`${name}-popup-counter`}>
+              {this.state.step} of 3
+            </div>
+            {
+              popupMenu.button && <Button
+              className={`${name}-popup-button`}
+              onClick={this.onPopupContinue}>
+                {popupMenu.button}
+              </Button>
+            }
+          </PopupMenu>
+        </div>
       }
     </div>;
   }

client/coral-ui/components/PopupMenu.css

@@ -1,10 +1,8 @@
 .popupMenu {
   display: inline-block;
-  position: absolute;
   width: inherit;
-  border: solid 1px #2376D8;
-  bottom: 36px;
-  right: 25px;
+  border: solid 1px #999;
+  box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.3);
   box-sizing: border-box;
   background: white;
   border-radius: 3px;
@@ -17,7 +15,7 @@
   border: 10px solid transparent;
   border-top-color: white;
   position: absolute;
-  left: 1em;
+  right: 3em;
   bottom: -20px;
   z-index: 2;
 }
@@ -25,9 +23,9 @@
 .popupMenu:after{
   content: '';
   border: 10px solid transparent;
-  border-top-color: #2376D8;
+  border-top-color: #999;
   position: absolute;
-  left: 1em;
+  right: 3em;
   bottom: -21px;
   z-index: 1;
 }