Improving the scrolling model.

IPython/frontend/html/notebook/static/css/notebook.css

@@ -61,7 +61,7 b' input, select { vertical-align: middle; }'
 body {
     background-color: white;
     /* This won't propagate to all children so we also set it below */
-    font-size: 12pt;
+    font-size: 10pt;
     /* This makes sure that the body covers the entire window and needs to
        be in a different element than the display: box in wrapper below */
     position: absolute;
@@ -82,10 +82,6 b' span#ipython_notebook h1 {'
 
 }
 
-div#tools {
-    font-size: 11pt;
-}
-
 span#kernel_status {
     position: absolute;
     top: 12%;
@@ -138,10 +134,10 b' div#notebook {'
     overflow-y: scroll;
     overflow-x: auto;
     width: 100%;
-    padding: 0px 15px 15px 15px;
+    padding: 0px 15px 0px 15px;
     margin: 0px
     background-color: white;
-    font-size: 12pt;
+    font-size: 10pt;
 }
 
 div#pager_splitter {
@@ -149,12 +145,13 b' div#pager_splitter {'
 }
 
 div#pager {
+    padding: 15px;
     overflow: auto;
 }
 
 .monospace-font {
     font-family: monospace;
-    font-size: 12pt;
+    font-size: 10pt;
 }
 
 div.cell {
@@ -194,7 +191,7 b' div.output_area {'
 
 div.output_latex {
     /* Slightly bigger than the rest of the notebook */
-    font-size: 13pt;
+    font-size: 11pt;
 }
 
 div.output_png {
@@ -206,7 +203,7 b' div.text_cell {'
 
 textarea.text_cell_input {
     /* Slightly bigger than the rest of the notebook */
-    font-size: 13pt;
+    font-size: 11pt;
     outline: none;
     resize: none;
     width:  inherit;
@@ -219,7 +216,7 b' textarea.text_cell_input {'
 div.text_cell_render {
     font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
     /* Slightly bigger than the rest of the notebook */
-    font-size: 13pt;
+    font-size: 11pt;
     outline: none;
     resize: none;
     width:  inherit;

IPython/frontend/html/notebook/static/js/notebook.js

@@ -19,6 +19,7 b' var IPython = (function (IPython) {'
         this.notebook_save_re = /%notebook save/
         this.notebook_filename_re = /(\w)+.ipynb/
         this.style();
+        this.create_elements();
         this.bind_events();
         this.start_kernel();
     };
@@ -29,6 +30,16 b' var IPython = (function (IPython) {'
     };
 
 
+    Notebook.prototype.create_elements = function () {
+        // We add this end_space div to the end of the notebook div to:
+        // i) provide a margin between the last cell and the end of the notebook
+        // ii) to prevent the div from scrolling up when the last cell is being
+        // edited, but is too low on the page, which browsers will do automatically.
+        this.element.append($('<div class="end_space"></div>').height(50));
+        $('div#notebook').addClass('border-box-sizing');
+    };
+
+
     Notebook.prototype.bind_events = function () {
         var that = this;
         $(document).keydown(function (event) {
@@ -77,6 +88,8 b' var IPython = (function (IPython) {'
                 }
                 if (cell_index === (that.ncells()-1)) {
                     that.insert_code_cell_after();
+                    // If we are adding a new cell at the end, scroll down to show it.
+                    that.scroll_to_bottom();
                 } else {
                     that.select(cell_index+1);
                 };
@@ -114,6 +127,10 b' var IPython = (function (IPython) {'
     };
 
 
+    Notebook.prototype.scroll_to_bottom = function () {
+        this.element.animate({scrollTop:this.element.get(0).scrollHeight}, 'slow');
+    };
+
     // Cell indexing, retrieval, etc.
 
 
@@ -158,6 +175,9 b' var IPython = (function (IPython) {'
                 this.selected_cell().unselect();
             };
             this.cells()[index].select();
+            if (index === (this.ncells()-1)) {
+                this.scroll_to_bottom();
+            };
         };
         return this;
     };
@@ -228,7 +248,7 b' var IPython = (function (IPython) {'
 
 
     Notebook.prototype.append_cell = function (cell) {
-        this.element.append(cell.element);
+        this.element.find('div.end_space').before(cell.element);
         return this;
     };