Fix output area rendering

src/notebook/output-area/widget.ts

@@ -442,6 +442,9 @@ namespace OutputAreaWidget {
     createOutput(): Widget {
       let widget = new Widget();
       widget.layout = new PanelLayout();
+      let prompt = new Widget();
+      prompt.addClass(PROMPT_CLASS);
+      (widget.layout as PanelLayout).addChild(prompt);
       return widget;
     }
 
@@ -466,9 +469,12 @@ namespace OutputAreaWidget {
 
       // Remove any existing content.
       let layout = widget.layout as PanelLayout;
-      for (let i = 0; i < layout.childCount(); i++) {
-        layout.childAt(0).dispose();
+      let child = layout.childAt(1);
+      if (child) {
+        child.dispose();
       }
+      let prompt = layout.childAt(0);
+      prompt.node.textContent = '';
 
       // Bail if no data to display.
       let msg = 'Did not find renderer for output mimebundle.';
@@ -478,7 +484,7 @@ namespace OutputAreaWidget {
       }
 
       // Create the output result area.
-      let child = rendermime.render(data);
+      child = rendermime.render(data);
       if (!child) {
         console.log(msg);
         console.log(data);
@@ -491,11 +497,8 @@ namespace OutputAreaWidget {
       switch (output.output_type) {
       case 'execute_result':
         child.addClass(EXECUTE_CLASS);
-        let prompt = new Widget();
-        prompt.addClass(PROMPT_CLASS);
         let count = (output as nbformat.IExecuteResult).execution_count;
         prompt.node.textContent = `Out[${count === null ? ' ' : count}]:`;
-        layout.addChild(prompt);
         break;
       case 'display_data':
         child.addClass(DISPLAY_CLASS);

src/notebook/theme.css

@@ -71,24 +71,23 @@
 }
 
 
-.jp-OutputArea > .jp-OutputArea-output {
-  margin-left: 90px;
+.jp-OutputArea-output {
   display: flex;
   flex-direction: row;
 }
 
 
-.jp-OutputArea > .jp-OutputArea-output.jp-OutputArea-executeResult {
+.jp-OutputArea-executeResult {
   margin-left: 0px;
   flex: 1 1 auto;
 }
 
 
-.jp-OutputArea-output.jp-OutputArea-executeResult > .jp-OutputArea-prompt {
+.jp-OutputArea-prompt {
   color: #D84315;
   font-family: monospace;
   text-align: right;
-  line-height: 20px;
+  vertical-align: middle;
   padding: 0.4em;
   font-size: 14px;
   flex: 0 0 90px;
@@ -96,17 +95,18 @@
 }
 
 
-.jp-OutputArea-output > .jp-OutputArea-result {
-  padding: 4px;
+.jp-OutputArea-result {
+  padding: 0.4em;
 }
 
 
 .jp-OutputArea pre {
   border: none;
+  margin: 0;
 }
 
 
-.jp-OutputArea > .jp-OutputArea-output.jp-OutputArea-stderr {
+.jp-OutputArea-stderr {
   background: #fdd;
 }