Make notebook scroll in its parent and update example

example/index.css

@@ -1 +1,15 @@
+body {
+  margin: 0;
+  padding: 0;
+  background: #F5F6F7;
+}
 
+
+#main {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  right: 10px;
+  bottom: 10px;
+  padding: 8px;
+}

example/package.json

@@ -5,6 +5,7 @@
     "jupyter-js-notebook": "file:..",
     "jupyter-js-services": "^0.5.0",
     "jupyter-js-utils": "^0.3.1",
+    "phosphor-boxpanel": "^1.0.0-rc.0",
     "phosphor-keymap": "^0.7.0",
     "phosphor-widget": "^1.0.0-rc.1"
   },

example/src/index.ts

@@ -27,8 +27,8 @@ import {
 } from 'phosphor-keymap';
 
 import {
-  Widget
-} from 'phosphor-widget';
+  BoxPanel
+} from 'phosphor-boxpanel';
 
 import 'jupyter-js-notebook/lib/index.css';
 import 'jupyter-js-notebook/lib/theme.css';
@@ -67,8 +67,14 @@ function main(): void {
     let nbModel = new NotebookModel();
     populateNotebookModel(nbModel, data.content as NotebookContent);
     let nbWidget = new NotebookWidget(nbModel);
+    nbWidget.title.text = NOTEBOOK;
+
     keymap.add(bindings(nbModel));
-    nbWidget.attach(document.body);
+
+    let box = new BoxPanel();
+    box.id = 'main';
+    box.attach(document.body);
+    box.addChild(nbWidget);
 
     // start session
     startNewSession({

src/notebook/theme.css

@@ -2,6 +2,7 @@
 .p-Widget.jp-Notebook {  
   min-width: 50px;
   min-height: 50px;
+  overflow-y: auto;
 }