From b1d83f98b0ee0e05b9291ec5fcae89a542d6b38f Mon Sep 17 00:00:00 2001
From: John Cowen <johncowen@users.noreply.github.com>
Date: Wed, 12 Sep 2018 20:18:12 +0100
Subject: [PATCH] UI: Bugfix. Remove split view code editor (#4615)

When adding an auto resizing (heightwise) code editor, the
ivy-codemirror plugin seems to do this using more nested divs. This div
had a horizontal scroller but couldn't be seen on some platforms (with
hidden scrollbars). This commit makes the code editor slightly more
usable and more visually correct by removing the scroll bar in this div
to stop producing the 'split view look', yet keeping the horizontal
scroller at the bottom of the code editor for when you enter code that
is wider than the area. A max-width has also been added here to prevent
the text area from growing off the side of the page.

Another improvement to the code editor here is the addition of a nicer
color for hightlighting text selection so its at least visible.

Lastly, there was a way you could get the bottom horizontal scrollbar to overlay
the code in the editor. This makes sure there is always some space at
the bottom of the editor to make sure the code won't be obscured
---
 ui-v2/app/styles/components/code-editor/index.scss | 10 ++++++++--
 ui-v2/app/templates/components/code-editor.hbs     |  2 +-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/ui-v2/app/styles/components/code-editor/index.scss b/ui-v2/app/styles/components/code-editor/index.scss
index 97e60dd40..e5d1c6395 100644
--- a/ui-v2/app/styles/components/code-editor/index.scss
+++ b/ui-v2/app/styles/components/code-editor/index.scss
@@ -20,8 +20,14 @@ $syntax-dark-gray: #535f73;
 $syntax-gutter-grey: #2a2f36;
 $syntax-yellow: $ui-yellow-500;
 .CodeMirror {
+  max-width: 1150px;
   min-height: 300px;
   height: auto;
+  /* adds some space at the bottom of the editor for when a horizonal-scroll has appeared */
+  padding-bottom: 20px;
+}
+.CodeMirror-scroll {
+  overflow-x: hidden !important;
 }
 .CodeMirror-lint-tooltip {
   background-color: #f9f9fa;
@@ -59,13 +65,13 @@ $syntax-yellow: $ui-yellow-500;
   }
 
   &.CodeMirror-focused div.CodeMirror-selected {
-    background: rgba(255, 255, 255, 0.1);
+    background: rgb(33, 66, 131);
   }
 
   .CodeMirror-line::selection,
   .CodeMirror-line > span::selection,
   .CodeMirror-line > span > span::selection {
-    background: rgba(255, 255, 255, 0.1);
+    background: rgb(33, 66, 131);
   }
 
   .CodeMirror-line::-moz-selection,
diff --git a/ui-v2/app/templates/components/code-editor.hbs b/ui-v2/app/templates/components/code-editor.hbs
index 57e0ea0dd..ab4dc7844 100644
--- a/ui-v2/app/templates/components/code-editor.hbs
+++ b/ui-v2/app/templates/components/code-editor.hbs
@@ -3,6 +3,6 @@
     readonly=readonly
     name=name
     class=class
-    options=(hash lineNumbers=true mode=mode theme='hashi')
+    options=(hash lineNumbers=true mode=mode theme='hashi' showCursorWhenSelecting=true)
     valueUpdated=(action onkeyup)
 }}