changes to the splitter for a responsive design version of the debugger.html

responsive.patch

diff --git a/public/js/components/App.css b/public/js/components/App.css
index 7dc9896..86e507a 100644
--- a/public/js/components/App.css
+++ b/public/js/components/App.css
@@ -25,6 +25,7 @@ body {
 .debugger {
   display: flex;
   flex: 1;
+  flex-flow: row wrap;
 }
 
 .center-pane {
@@ -32,6 +33,7 @@ body {
   position: relative;
   flex: 1;
   background-color: #fcfcfc;
+  min-width: 300px;
 }
 
 .editor-container {
diff --git a/public/js/components/App.js b/public/js/components/App.js
index 17d92a0..6c3ba5f 100644
--- a/public/js/components/App.js
+++ b/public/js/components/App.js
@@ -104,17 +104,22 @@ const App = React.createClass({
   },
 
   render: function() {
+    let sources = Sources({ sources: this.props.sources });
+    let editor = this.renderCenterPane(this.props);
+    let sidebar = RightSidebar();
     return dom.div({ className: "theme-light debugger" },
+      // sources,
       SplitBox({
         initialWidth: 300,
-        left: Sources({ sources: this.props.sources }),
-        right: SplitBox({
-          initialWidth: 300,
-          rightFlex: true,
-          left: this.renderCenterPane(this.props),
-          right: RightSidebar()
-        })
+        left: sources
+      }),
+      editor,
+      SplitBox({
+        initialWidth: 300,
+        rightFlex: true,
+        right: sidebar
       })
+      // sidebar
     );
   }
 });
diff --git a/public/js/components/SplitBox.css b/public/js/components/SplitBox.css
index c80c530..3a2783c 100644
--- a/public/js/components/SplitBox.css
+++ b/public/js/components/SplitBox.css
@@ -1,6 +1,5 @@
 .split-box {
   display: flex;
-  flex: 1;
   min-width: 0;
 }
 
diff --git a/public/js/components/SplitBox.js b/public/js/components/SplitBox.js
index 7bde769..cc30fdc 100644
--- a/public/js/components/SplitBox.js
+++ b/public/js/components/SplitBox.js
@@ -40,19 +40,19 @@ const SplitBox = React.createClass({
 
     return dom.div(
       { className: "split-box",
-        style: this.props.style },
-      dom.div(
+        style: { width: width }},
+        left ? dom.div(
         { className: rightFlex ? "uncontrolled" : "controlled",
           style: { width: rightFlex ? null : width }},
         left
-      ),
+      ) : null,
       Draggable({ className: "splitter",
                   onMove: x => this.onMove(x) }),
-      dom.div(
+      right ? dom.div(
         { className: rightFlex ? "controlled" : "uncontrolled",
           style: { width: rightFlex ? width : null }},
         right
-      )
+      ) : null
     );
   }
 });