fix sticky toolbar width

src/components/EntryEditor/EntryEditor.js

@@ -68,7 +68,10 @@ class EntryEditor extends Component {
     );
 
     const editor = (
-      <StickyContext className={classnames(styles.controlPane, { [styles.blocker]: showEventBlocker })}>
+      <StickyContext
+        className={classnames(styles.controlPane, { [styles.blocker]: showEventBlocker })}
+        registerListener={fn => this.updateStickyContext = fn}
+      >
         { collectionPreviewEnabled ? togglePreviewButton : null }
         <ControlPane
           collection={collection}
@@ -93,6 +96,7 @@ class EntryEditor extends Component {
             defaultSize="50%"
             onDragStarted={this.handleSplitPaneDragStart}
             onDragFinished={this.handleSplitPaneDragFinished}
+            onChange={this.updateStickyContext}
           >
             <ScrollSyncPane>{editor}</ScrollSyncPane>
             <div className={classnames(styles.previewPane, { [styles.blocker]: showEventBlocker })}>

src/components/UI/Sticky/Sticky.css

@@ -3,7 +3,7 @@
 }
 
 .sticky {
-  position: relative !important;
+  width: 100%;
 }
 
 .stickyActive:not(.stickyAtBottom) {

src/components/UI/Sticky/Sticky.js

@@ -34,6 +34,7 @@ export class StickyContext extends Component {
 
   componentDidMount() {
     this.updateStickies(this.ref);
+    this.props.registerListener(this.updateStickies.bind(this, this.ref));
   }
 
   handleScroll = (event) => {
@@ -144,7 +145,11 @@ export class Sticky extends Component {
               [styles.stickyAtBottom]: state.shouldStickAtBottom,
             },
           )}
-          style={props.fillContainerWidth && state.containerWidth ? { width: state.containerWidth } : null}
+          style={
+            props.fillContainerWidth && state.containerWidth && state.shouldStick ?
+            { width: state.containerWidth } :
+            null
+          }
           ref={(ref) => {this.ref = ref}}
         >
           {props.children}