Tweak the layout for auto-save indicator

src/browser/components/SettingsPage.jsx

@@ -414,6 +414,15 @@ const SettingsPage = React.createClass({
           className='navbar-fixed-top'
           style={settingsPage.navbar}
         >
+          <div className='IndicatorContainer'>
+            <ReactCSSTransitionGroup
+              transitionName='AutoSaveIndicator'
+              transitionEnterTimeout={500}
+              transitionLeaveTimeout={1000}
+            >
+              { this.state.savingState === 'done' ? null : <AutoSaveIndicator savingState={this.state.savingState}/> }
+            </ReactCSSTransitionGroup>
+          </div>
           <div style={{position: 'relative'}}>
             <h1 style={settingsPage.heading}>{'Settings'}</h1>
             <Button
@@ -456,15 +465,6 @@ const SettingsPage = React.createClass({
           <hr/>
           { optionsRow }
         </Grid>
-        <div className='IndicatorContainer'>
-          <ReactCSSTransitionGroup
-            transitionName='AutoSaveIndicator'
-            transitionEnterTimeout={500}
-            transitionLeaveTimeout={1000}
-          >
-            { this.state.savingState === 'done' ? null : <AutoSaveIndicator savingState={this.state.savingState}/> }
-          </ReactCSSTransitionGroup>
-        </div>
       </div>
     );
   }

src/browser/css/settings.css

@@ -4,18 +4,16 @@
 }
 
 .IndicatorContainer {
-  pointer-events: none;
+  position: absolute;
-  position: fixed;
+  height: 100%;
-  top: 100px;
-  left: 0;
-  right: 0;
   display: flex;
   flex-flow: row;
-  justify-content: center;
+  justify-content: flex-start;
+  align-items: center;
 }
 
-.IndicatorContainer * {
+.AutoSaveIndicator {
-  pointer-events: auto;
+  margin: 0;
 }
 
 .AutoSaveIndicator-enter {