Merge pull request #1567 from pfftdammitchris/fix-toggle-view-css-positioning

Fixed ToggleMode button overlapping CSS issue

browser/main/Detail/MarkdownNoteDetail.js

@@ -357,12 +357,10 @@ class MarkdownNoteDetail extends React.Component {
           value={this.state.note.tags}
           onChange={this.handleUpdateTag.bind(this)}
         />
-
-        <ToggleModeButton onClick={(e) => this.handleSwitchMode(e)} editorType={editorType} />
-
         <TodoListPercentage percentageOfTodo={getTodoPercentageOfCompleted(note.content)} />
       </div>
       <div styleName='info-right'>
+        <ToggleModeButton onClick={(e) => this.handleSwitchMode(e)} editorType={editorType} />
         <StarButton
           onClick={(e) => this.handleStarButtonClick(e)}
           isActive={note.isStarred}

browser/main/Detail/MarkdownNoteDetail.styl

@@ -7,6 +7,7 @@
   background-color $ui-noteDetail-backgroundColor
   box-shadow none
   padding 20px 40px
+  overflow hidden
 
 .lock-button
   padding-bottom 3px
@@ -44,7 +45,7 @@
   margin 0 30px
 .body-noteEditor
   absolute top bottom left right
-  
+
 body[data-theme="white"]
   .root
     box-shadow $note-detail-box-shadow

browser/main/Detail/ToggleModeButton.styl

@@ -5,8 +5,8 @@
   width 52px
   display flex
   align-items center
-  position absolute
-  right 165px
+  position: relative
+  top 2px
   .active
     background-color #1EC38B
     width 33px
@@ -55,4 +55,4 @@ body[data-theme="solarized-dark"]
       background-color #002B36
     .active
       background-color #1EC38B
-      box-shadow 2px 0px 7px #222222
+      box-shadow 2px 0px 7px #222222