Fixes details cards opening out over the terminal

client/app/scripts/components/embedded-terminal.js

@@ -2,6 +2,7 @@ import React from 'react';
 
 import { getNodeColor, getNodeColorDark } from '../utils/color-utils';
 import Terminal from './terminal';
+import { DETAILS_PANEL_WIDTH, DETAILS_PANEL_MARGINS, DETAILS_PANEL_OFFSET } from '../constants/styles';
 
 export default function EmeddedTerminal({pipe, nodeId, details}) {
   const node = details.get(nodeId);
@@ -10,12 +11,17 @@ export default function EmeddedTerminal({pipe, nodeId, details}) {
   const statusBarColor = d && getNodeColor(d.rank, d.label_major);
   const title = d && d.label_major;
 
+  const style = {
+    right: DETAILS_PANEL_MARGINS.right + DETAILS_PANEL_WIDTH + 10 +
+      (details.size * DETAILS_PANEL_OFFSET)
+  };
+
   // React unmount/remounts when key changes, this is important for cleaning up
   // the term.js and creating a new one for the new pipe.
   return (
-    <div className="terminal-embedded">
+    <div className="terminal-embedded" style={style}>
       <Terminal key={pipe.id} pipe={pipe} titleBarColor={titleBarColor}
-        statusBarColor={statusBarColor} title={title} />
+        statusBarColor={statusBarColor} containerMargin={style.right} title={title} />
     </div>
   );
 }

client/app/scripts/components/terminal.js

@@ -184,6 +184,14 @@ export default class Terminal extends React.Component {
     }
   }
 
+  componentWillReceiveProps(nextProps) {
+    const containerMarginChanged = nextProps.containerMargin !== this.props.containerMargin;
+    log(nextProps.containerMargin);
+    if (containerMarginChanged) {
+      this.handleResize();
+    }
+  }
+
   componentDidUpdate(prevProps, prevState) {
     const sizeChanged = (
       prevState.cols !== this.state.cols ||