Translate gutter so it remains visible when scrolling to the right

Signed-off-by: Max Brunsfeld <maxbrunsfeld@gmail.com>

src/text-editor-component.js

@@ -51,9 +51,18 @@ class TextEditorComponent {
   }
 
   renderGutterContainer () {
-    return $.div({className: 'gutter-container'},
-      this.renderLineNumberGutter()
-    )
+    const props = {className: 'gutter-container'}
+
+    if (this.measurements) {
+      props.style = {
+        position: 'relative',
+        willChange: 'transform',
+        transform: `translateX(${this.measurements.scrollLeft}px)`,
+        zIndex: 1
+      }
+    }
+
+    return $.div(props, this.renderLineNumberGutter())
   }
 
   renderLineNumberGutter () {

static/text-editor.less

@@ -3,6 +3,7 @@ atom-text-editor {
 
   .scroll-view {
     position: absolute;
+    contain: strict;
     top: 0;
     right: 0;
     bottom: 0;