div width and positions

app/components/SimpleEditor/SimpleEditor.scss

@@ -45,7 +45,7 @@ $white: #fff;
   top: 0;
 
   .sc-container-editor {
-    max-width: 950px;
+    max-width: 50%;
   }
 
   .se-scrollable {
@@ -59,7 +59,7 @@ $white: #fff;
     color: $transparent-black;
     font-family: 'Fira Sans';
     line-height: 38px;
-    margin: 0% 0% 0% 15%;
+    margin: 0% 0% 0% 20%;
     min-height: 100vh;
     padding: 1% 0%;
     transition: .3s;

app/components/SimpleEditor/css/sideNav.scss

@@ -6,18 +6,23 @@ $toolbar-bg: #fafafa;
 
 .sidenav {
   height: 60%;
-  left: 2%;
+  left: 3%;
   margin-top: 197px;
   overflow-x: hidden;
   position: fixed;
   top: 0;
   user-select: none;
-  width: 8%;
+  width: 9%;
   z-index: 100;
 
   .sc-toolbar {
     background-color: $toolbar-bg !important;
     border: 0;
+    width: 100%;
+
+    .sc-tool-group.sm-target-text.sm-layout-horizontal {
+      width: 100%;
+    }
 
     ul {
      margin: 0;
@@ -33,12 +38,12 @@ $toolbar-bg: #fafafa;
       font-size: 14px;
       margin: 0;
       padding: 0;
-      width: 140px;
+      width: 100%;
     }
 
     .sm-target-default {
       width: 85%;
-
+//
       &:before {
         border-bottom: 1px solid $heading;
         color: $heading;

app/components/SimpleEditor/elements/comment/CommentBubble.js

@@ -67,7 +67,7 @@ class CommentBubble extends Tool {
         overlayContainer = children[1]
       }
 
-      const documentElementWidth = documentElement.offsetWidth / 1.4
+      const documentElementWidth = documentElement.offsetWidth / 1.85
       const overlayContainerLeft = overlayContainer.offsetLeft
       const left = documentElementWidth - overlayContainerLeft - fix
 

app/components/SimpleEditor/elements/comment/comment.scss

@@ -4,19 +4,18 @@ $mid-gray: #b0b0b0;
 $dark-gray: #868686;
 
 // $light-green: #eafaf0;
-$light-red: #fcc;
-$red: #d0011b;
+$light-yellow: #fff5e6;
 $white: #fff;
 $yellow: #ffab20;
 
 
 .sc-comment {
-  border-bottom: 2px solid $red;
+  border-bottom: 2px solid $yellow;
   border-radius: 3px 3px 0 0;
 }
 
 .sc-comment-active {
-  background-color: $light-red;
+  background-color: $light-yellow;
 }
 
 
@@ -53,7 +52,7 @@ $yellow: #ffab20;
 
     .action-icon {
       bottom: 2px;
-      color: $red;
+      color: $yellow;
       font-size: 9px;
       position: relative;
       right: 10px;

app/components/SimpleEditor/notesEditor/notesEditor.scss

@@ -28,7 +28,7 @@ $background: #fff;
      box-shadow: none;
      margin: 0;
      min-height: 110px;
-     padding: 3% 0 0 2%;
+     padding: 3% 0 0 2.3%;
 
      .sc-entity::before {
       content: ''counter(note-footer)'. ';

app/components/SimpleEditor/panes/Comments/commentsPane.scss

@@ -11,7 +11,7 @@ $yellow: #ffab20;
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
-  margin-left: 4%;
+  margin-left: 7%;
   margin-top: 0;
   width: 100%;
 

app/components/SimpleEditor/panes/Notes/notes.scss

@@ -8,11 +8,11 @@ $bg-rgba: rgba(255, 255, 255, 0);
   bottom: 0;
   counter-reset: note-footer;
   height: 135px;
-  left: 15%;
+  left: 19.6%;
   max-height: 700px;
   min-height: 135px;
   position: fixed;
-  width: 80%;
+  width: 75.4%;
   z-index: 0;
 
   .resize-area {