From 06aff39548e1a7ddb8d9d988b915676a0cfaf355 Mon Sep 17 00:00:00 2001
From: Simon Howe <footless@gmail.com>
Date: Fri, 29 Jan 2016 13:17:58 +0100
Subject: [PATCH] Fixes details cards opening out over the terminal

---
 client/app/scripts/components/embedded-terminal.js | 10 ++++++++--
 client/app/scripts/components/terminal.js          |  8 ++++++++
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/client/app/scripts/components/embedded-terminal.js b/client/app/scripts/components/embedded-terminal.js
index bd7436bf1..e56094ba0 100644
--- a/client/app/scripts/components/embedded-terminal.js
+++ b/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>
   );
 }
diff --git a/client/app/scripts/components/terminal.js b/client/app/scripts/components/terminal.js
index d87ff6774..cff1419e9 100644
--- a/client/app/scripts/components/terminal.js
+++ b/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 ||