The horizontal scrollbar takes gutter width into account

src/editor-component.coffee

@@ -138,8 +138,9 @@ EditorComponent = React.createClass
         className: 'horizontal-scrollbar'
         orientation: 'horizontal'
         onScroll: @onHorizontalScroll
+        gutterWidth: @gutterWidth
         scrollLeft: scrollLeft
-        scrollWidth: scrollWidth + @gutterWidth
+        scrollWidth: scrollWidth
         visible: horizontallyScrollable and not @refreshingScrollbars and not @measuringScrollbars
         scrollableInOppositeDirection: verticallyScrollable
         verticalScrollbarWidth: verticalScrollbarWidth
@@ -668,6 +669,7 @@ EditorComponent = React.createClass
         editor.setSelectedScreenRange([tailPosition, [dragRow + 1, 0]])
 
   onStylesheetsChanged: (stylesheet) ->
+    @refs.gutter.measureWidth()
     @refreshScrollbars() if @containsScrollbarSelector(stylesheet)
     @remeasureCharacterWidthsIfVisibleAfterNextUpdate = true
     @requestUpdate() if @visible

src/gutter-component.coffee

@@ -63,12 +63,12 @@ GutterComponent = React.createClass
       @updateDummyLineNumber()
       @removeLineNumberNodes()
 
-    unless isEqualForProperties(oldProps, @props, 'maxLineNumberDigits', 'defaultCharWidth')
-      @measureWidth()
-
     @clearScreenRowCaches() unless oldProps.lineHeightInPixels is @props.lineHeightInPixels
     @updateLineNumbers()
 
+    unless isEqualForProperties(oldProps, @props, 'maxLineNumberDigits', 'defaultCharWidth')
+      @measureWidth()
+
   clearScreenRowCaches: ->
     @lineNumberIdsByScreenRow = {}
     @screenRowsByLineNumberId = {}

src/scrollbar-component.coffee

@@ -7,7 +7,7 @@ ScrollbarComponent = React.createClass
   displayName: 'ScrollbarComponent'
 
   render: ->
-    {orientation, className, scrollHeight, scrollWidth, visible} = @props
+    {orientation, className, scrollHeight, scrollWidth, gutterWidth, visible} = @props
     {scrollableInOppositeDirection, horizontalScrollbarHeight, verticalScrollbarWidth} = @props
 
     style = {}
@@ -19,6 +19,7 @@ ScrollbarComponent = React.createClass
       when 'horizontal'
         style.height = horizontalScrollbarHeight
         style.right = verticalScrollbarWidth if scrollableInOppositeDirection
+        style.left = gutterWidth
 
     div {className, style, @onScroll},
       switch orientation
@@ -40,7 +41,7 @@ ScrollbarComponent = React.createClass
       when 'vertical'
         not isEqualForProperties(newProps, @props, 'scrollHeight', 'scrollTop', 'scrollableInOppositeDirection')
       when 'horizontal'
-        not isEqualForProperties(newProps, @props, 'scrollWidth', 'scrollLeft', 'scrollableInOppositeDirection')
+        not isEqualForProperties(newProps, @props, 'scrollWidth', 'scrollLeft', 'gutterWidth', 'scrollableInOppositeDirection')
 
   componentDidUpdate: ->
     {orientation, scrollTop, scrollLeft} = @props