From d06d26cdac00e0a2e14e3555d70e13b1f8f3c82a 2013-05-24 23:54:56
From: MinRK <benjaminrk@gmail.com>
Date: 2013-05-24 23:54:56
Subject: [PATCH] workaround spurious CodeMirror scrollbars

always draw scrollbar margin, so that inappropriate scrollbars never overlap the last line.
To compensate for the extra space, the margin between the scrollbar and the last line is shrunk significantly.

---

diff --git a/IPython/frontend/html/notebook/static/notebook/less/codemirror.less b/IPython/frontend/html/notebook/static/notebook/less/codemirror.less
index 52fe51a..1a02710 100644
--- a/IPython/frontend/html/notebook/static/notebook/less/codemirror.less
+++ b/IPython/frontend/html/notebook/static/notebook/less/codemirror.less
@@ -18,14 +18,28 @@
 .CodeMirror-scroll {
     /*  The CodeMirror docs are a bit fuzzy on if overflow-y should be hidden or visible.*/
     /*  We have found that if it is visible, vertical scrollbars appear with font size changes.*/
-    overflow-y: hidden;
-    overflow-x: auto; /* Changed from auto to remove scrollbar */
+    /*  overflow: scroll prevents scrollbars being drawn on top of the last line of the cell, */
+    /*  but at the expense of extra gutter at the bottom. To compensate, we shrink the margin */
+    /*  between the last line and the scrollbar when it's drawn. */
+    overflow: scroll;
+    margin-bottom: -38px; /* default margin is -30px */
+}
+
+/* this one is needed for Text Cells to match code cells for some reason */
+.CodeMirror-wrap .CodeMirror-scroll {
+  overflow: scroll;
+}
+
+/* CM sometimes draws a vertical scrollbar under zoom, but it never should in the Notebook. */
+/* this hides them - display: none would be preferable, but it gets clobbered by CodeMirror */
+.CodeMirror-vscrollbar, .CodeMirror-scrollbar-filler {
+    visibility: hidden;
 }
 
 .CodeMirror-lines {
-	/* In CM2, this used to be 0.4em, but in CM3 it went to 4px. We need the em value because */
-	/* we have set a different line-height and want this to scale with that. */
-	padding: 0.4em;
+  /* In CM2, this used to be 0.4em, but in CM3 it went to 4px. We need the em value because */
+  /* we have set a different line-height and want this to scale with that. */
+  padding: 0.4em;
 }
 
 .CodeMirror-linenumber {
diff --git a/IPython/frontend/html/notebook/static/style/style.min.css b/IPython/frontend/html/notebook/static/style/style.min.css
index b03e775..f2ba5af 100644
--- a/IPython/frontend/html/notebook/static/style/style.min.css
+++ b/IPython/frontend/html/notebook/static/style/style.min.css
@@ -940,7 +940,9 @@ div.out_prompt_overlay{height:100%;padding:0px;position:absolute;border-radius:4
 div.out_prompt_overlay:hover{-webkit-box-shadow:inset 0 0 1px #000000;-moz-box-shadow:inset 0 0 1px #000000;box-shadow:inset 0 0 1px #000000;background:rgba(240, 240, 240, 0.5);}
 div.output_prompt{color:darkred;margin:0 5px 0 -5px;}
 .CodeMirror{line-height:1.231;height:auto;background:none;}
-.CodeMirror-scroll{overflow-y:hidden;overflow-x:auto;}
+.CodeMirror-scroll{overflow:scroll;margin-bottom:-38px;}
+.CodeMirror-wrap .CodeMirror-scroll{overflow:scroll;}
+.CodeMirror-vscrollbar,.CodeMirror-scrollbar-filler{visibility:hidden;}
 .CodeMirror-lines{padding:0.4em;}
 .CodeMirror-linenumber{padding:0 8px 0 4px;}
 .CodeMirror-gutters{border-bottom-left-radius:4px;border-top-left-radius:4px;}