From 4f15cc3f0853af0e410722dddcd7793ba793d34d Mon Sep 17 00:00:00 2001
From: pfftdammitchris <pfftdammitchris@gmail.com>
Date: Tue, 20 Feb 2018 21:09:43 -0800
Subject: [PATCH] Fixed ToggleMode button overlapping CSS issue

The absolute positioning of the toggle mode button was creating a static overlapping position issue with the top bar. This fix solves that problem by removing the static positioning and coupling the button component with the buttons to the right
---
 browser/main/Detail/MarkdownNoteDetail.js   | 4 +---
 browser/main/Detail/MarkdownNoteDetail.styl | 3 ++-
 browser/main/Detail/ToggleModeButton.styl   | 6 +++---
 3 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/browser/main/Detail/MarkdownNoteDetail.js b/browser/main/Detail/MarkdownNoteDetail.js
index bb76b8f3..1c1cfcc5 100755
--- a/browser/main/Detail/MarkdownNoteDetail.js
+++ b/browser/main/Detail/MarkdownNoteDetail.js
@@ -362,12 +362,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}
diff --git a/browser/main/Detail/MarkdownNoteDetail.styl b/browser/main/Detail/MarkdownNoteDetail.styl
index 652532c7..ad20f0f2 100644
--- a/browser/main/Detail/MarkdownNoteDetail.styl
+++ b/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
diff --git a/browser/main/Detail/ToggleModeButton.styl b/browser/main/Detail/ToggleModeButton.styl
index c69401f8..185a780c 100644
--- a/browser/main/Detail/ToggleModeButton.styl
+++ b/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
\ No newline at end of file
+      box-shadow 2px 0px 7px #222222