           </div>
         </div>
 
-        <div className="column">
+        <div className="column" style={disabledIfLive}>
           {if @state.selectedTaskKey? and @props.workflow.tasks[@state.selectedTaskKey]?
             TaskEditorComponent = tasks[@props.workflow.tasks[@state.selectedTaskKey].type].Editor
             <div>


    stats_completeness_type = @props.workflow.configuration.stats_completeness_type ? 'retirement'

    disabledStyle =
      opacity: 0.4
      pointerEvents: 'none'

    <div className="edit-workflow-page">
      <h3>{@props.workflow.display_name} #{@props.workflow.id}{' '}

      <p className="form-help">If you have multiple workflows you can rearrange the order in which they are listed on your project's front page by clicking and dragging on the left gray tab next to each workflow title in the left menu bar.</p>
      {if @props.project.live and @props.workflow.active
        <p className="form-help warning"><strong>You cannot edit an active workflow if the project is live.</strong></p>}
      <div className="columns-container">
        <div className="column">
          <div>
            <AutoSave tag="label" resource={@props.workflow}>
