🐛 Fixed broken scrolling/scroll bars in Code Injection inputs

closes TryGhost/Ghost#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

@@ -36,6 +36,7 @@
 @import "components/popovers.css";
 @import "components/tour.css";
 @import "components/unsplash.css";
+@import "components/codemirror.css";
 
 
 /* Layouts: Groups of Components

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

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;
+}

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,

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;
 }