From 9765d9dbcdda4dbaca7db91be4ab2cc8287ef6cd Mon Sep 17 00:00:00 2001
From: Nathan Sobo <nathan@github.com>
Date: Thu, 23 Feb 2017 13:24:59 -0700
Subject: [PATCH] Translate gutter so it remains visible when scrolling to the
 right

Signed-off-by: Max Brunsfeld <maxbrunsfeld@gmail.com>
---
 src/text-editor-component.js | 15 ++++++++++++---
 static/text-editor.less      |  1 +
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/text-editor-component.js b/src/text-editor-component.js
index aa9ad992e..b9b08b8a8 100644
--- a/src/text-editor-component.js
+++ b/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 () {
diff --git a/static/text-editor.less b/static/text-editor.less
index a95443449..71482f5f5 100644
--- a/static/text-editor.less
+++ b/static/text-editor.less
@@ -3,6 +3,7 @@ atom-text-editor {
 
   .scroll-view {
     position: absolute;
+    contain: strict;
     top: 0;
     right: 0;
     bottom: 0;