From 06209794c986164d0aa1c6f5ce73e6af73ad9582 Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Mon, 4 Jun 2018 13:29:28 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fixed=20broken=20scrolling/scrol?=
 =?UTF-8?q?l=20bars=20in=20Code=20Injection=20inputs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

closes https://github.com/TryGhost/Ghost/issues/9635
- CodeMirror expects default CSS box-sizing rather than `border-box` so it's scroll calculations were thrown off
- reset the `box-sizing` properties on CM elements
- remove now unnecessary  `.CodeMirror-scroll` patches that we'd put in place to cover broken scroll behaviour
- move all non-layout-specific CM styles into a `components/codemirror.css` file
---
 app/styles/app-dark.css                 |  1 +
 app/styles/app.css                      |  1 +
 app/styles/components/codemirror.css    | 18 ++++++++++++++++++
 app/styles/components/settings-menu.css |  2 --
 app/styles/layouts/settings.css         |  5 -----
 5 files changed, 20 insertions(+), 7 deletions(-)
 create mode 100644 app/styles/components/codemirror.css

diff --git a/app/styles/app-dark.css b/app/styles/app-dark.css
index 4360fc8e35..7151d44686 100644
--- a/app/styles/app-dark.css
+++ b/app/styles/app-dark.css
@@ -36,6 +36,7 @@
 @import "components/popovers.css";
 @import "components/tour.css";
 @import "components/unsplash.css";
+@import "components/codemirror.css";
 
 
 /* Layouts: Groups of Components
diff --git a/app/styles/app.css b/app/styles/app.css
index ef25a3b9f8..89073d2673 100644
--- a/app/styles/app.css
+++ b/app/styles/app.css
@@ -36,6 +36,7 @@
 @import "components/popovers.css";
 @import "components/tour.css";
 @import "components/unsplash.css";
+@import "components/codemirror.css";
 
 
 /* Layouts: Groups of Components
diff --git a/app/styles/components/codemirror.css b/app/styles/components/codemirror.css
new file mode 100644
index 0000000000..afbdf21005
--- /dev/null
+++ b/app/styles/components/codemirror.css
@@ -0,0 +1,18 @@
+/* Exclude CodeMirror from the border-box reset to avoid scrollbar problems */
+.CodeMirror,
+.CodeMirror * {
+    box-sizing: initial;
+}
+
+/* Re-apply CodeMirror's content-box styles overridden by above reset */
+.CodeMirror-scroll,
+.CodeMirror-sizer,
+.CodeMirror-gutter,
+.CodeMirror-gutters,
+.CodeMirror-linenumber {
+  box-sizing: content-box;
+}
+
+.CodeMirror-linenumber {
+    min-width: 13px;
+}
diff --git a/app/styles/components/settings-menu.css b/app/styles/components/settings-menu.css
index 811209dfe0..7decadb366 100644
--- a/app/styles/components/settings-menu.css
+++ b/app/styles/components/settings-menu.css
@@ -209,8 +209,6 @@
 
 .settings-menu-content .CodeMirror-scroll {
     min-height: 170px;
-    overflow: hidden !important;
-    margin-right: 0;
 }
 
 .settings-menu-content .for-radio .input-toggle-component,
diff --git a/app/styles/layouts/settings.css b/app/styles/layouts/settings.css
index 910cd620ce..05369030de 100644
--- a/app/styles/layouts/settings.css
+++ b/app/styles/layouts/settings.css
@@ -294,11 +294,6 @@
     border-radius: inherit;
 }
 
-.settings-code-editor .CodeMirror-scroll {
-   overflow: hidden !important;
-   margin-right: 0;
-}
-
 .settings-code-editor .cm-s-xq-light span.cm-meta {
     color: #000;
 }