diff --git a/client/app/scripts/components/details-card.js b/client/app/scripts/components/details-card.js
index 0660f7612..1179248c4 100644
--- a/client/app/scripts/components/details-card.js
+++ b/client/app/scripts/components/details-card.js
@@ -48,8 +48,8 @@ class DetailsCard extends React.Component {
     }
     const style = {
       transform,
-      left: showingTerminal ? 36 : null,
-      width: showingTerminal ? null : 420
+      left: showingTerminal ? MARGINS.right : null,
+      width: showingTerminal ? null : WIDTH
     };
     return (
       <div className="details-wrapper" style={style}>
diff --git a/client/app/scripts/components/embedded-terminal.js b/client/app/scripts/components/embedded-terminal.js
index 8626893a3..149d5998e 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 { connect } from 'react-redux';
 
 import { brightenColor, getNodeColorDark } from '../utils/color-utils';
+import { DETAILS_PANEL_WIDTH, DETAILS_PANEL_MARGINS } from '../constants/styles';
 import Terminal from './terminal';
 
 class EmeddedTerminal extends React.Component {
@@ -23,11 +24,8 @@ class EmeddedTerminal extends React.Component {
   }
 
   getTransform() {
-    //
-    // lazy but close enough for a quick transition
-    //
-    const dx = this.state.mounted ? 0 : window.innerWidth - 420;
-    console.log('dx', dx);
+    const dx = this.state.mounted ? 0 :
+      window.innerWidth - DETAILS_PANEL_WIDTH - DETAILS_PANEL_MARGINS.right;
     return `translateX(${dx}px)`;
   }