Move context menus for monitors outside of the document flow.

Fixes integration test which was failing trying to use the context menu

src/components/monitor/monitor.jsx

 import React from 'react';
+import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import Draggable from 'react-draggable';
 import {FormattedMessage} from 'react-intl';
@@ -52,7 +53,11 @@ const MonitorComponent = props => (
                 })}
             </Box>
         </Draggable>
-        {props.mode === 'list' ? null : (
+        {props.mode === 'list' ? null : ReactDOM.createPortal((
+            // Use a portal to render the context menu outside the flow to avoid
+            // positioning conflicts between the monitors `transform: scale` and
+            // the context menus `position: fixed`. For more details, see
+            // http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/
             <ContextMenu id={`monitor-${props.label}`}>
                 <MenuItem onClick={props.onSetModeToDefault}>
                     <FormattedMessage
@@ -78,7 +83,7 @@ const MonitorComponent = props => (
                     </MenuItem>
                 ) : null}
             </ContextMenu>
-        )}
+        ), document.body)}
     </ContextMenuTrigger>
 
 );

test/integration/blocks.test.js

@@ -56,8 +56,7 @@ describe('Working with the blocks', () => {
         await expect(logs).toEqual([]);
     });
 
-    // TODO: why is this test failing?
-    test.skip('Creating variables', async () => {
+    test('Creating variables', async () => {
         await loadUri(uri);
         await clickXpath('//button[@title="tryit"]');
         await clickText('Code');