Prevent block decorations from mistakenly wrapping during measurements

Before rendering block decorations, we read their heights by putting
them into a special div called `blockDecorationMeasurementsArea`.

Previously, this div was not explicitly sized, which was causing
decorations to wrap while being measured but not when actually rendering
them.

This commit fixes this inconsistency by explicitly styling the
measurement area so that it has the same width as the component scroll
width.

spec/text-editor-component-spec.js

@@ -2035,6 +2035,15 @@ describe('TextEditorComponent', () => {
       expect(item6.previousSibling).toBe(lineNodeForScreenRow(component, 12))
     })
 
+    it('bases the width of the block decoration measurement area on the editor scroll width', async () => {
+      const {component, element} = buildComponent({autoHeight: false, width: 150})
+      expect(component.refs.blockDecorationMeasurementArea.offsetWidth).toBe(component.getScrollWidth())
+
+      element.style.width = '800px'
+      await component.getNextUpdatePromise()
+      expect(component.refs.blockDecorationMeasurementArea.offsetWidth).toBe(component.getScrollWidth())
+    })
+
     function createBlockDecorationAtScreenRow(editor, screenRow, {height, margin, position}) {
       const marker = editor.markScreenPosition([screenRow, 0], {invalidate: 'never'})
       const item = document.createElement('div')

src/text-editor-component.js

@@ -678,7 +678,8 @@ class TextEditorComponent {
       style: {
         contain: 'strict',
         position: 'absolute',
-        visibility: 'hidden'
+        visibility: 'hidden',
+        width: this.getScrollWidth() + 'px'
       }
     })
   }