refactor: Move notes_view to React (#761)

app/assets/stylesheets/_focused.scss

@@ -36,7 +36,7 @@
   }
 
   .section.tags,
-  .section.notes {
+  notes-view {
     will-change: opacity;
     animation: fade-out 1.25s forwards;
     transition: width 1.25s;
@@ -50,7 +50,7 @@
     width: 0px !important;
   }
 
-  .section.notes:hover {
+  notes-view:hover {
     flex: initial;
     width: 0px !important;
   }
@@ -58,7 +58,7 @@
 
 .disable-focus-mode {
   .section.tags,
-  .section.notes {
+  notes-view {
     transition: width 1.25s;
     will-change: opacity;
     animation: fade-in 1.25s forwards;

app/assets/stylesheets/_main.scss

@@ -136,7 +136,7 @@ $footer-height: 2rem;
   overflow: hidden;
   position: relative;
 
-  panel-resizer {
+  panel-resizer, .panel-resizer {
     top: 0;
     right: 0;
     z-index: $z-index-panel-resizer;

app/assets/stylesheets/_notes.scss

@@ -1,11 +1,16 @@
+notes-view {
+  width: 350px;
+}
+
 #notes-column,
 .notes {
+  width: 100%;
+
   border-left: 1px solid var(--sn-stylekit-border-color);
   border-right: 1px solid var(--sn-stylekit-border-color);
 
   font-size: var(--sn-stylekit-font-size-h2);
 
-  width: 350px;
   flex-grow: 0;
   user-select: none;
 
@@ -71,6 +76,8 @@
     }
 
     #search-clear-button {
+      padding: 0;
+      border: none;
       border-radius: 50%;
       width: 17px;
       height: 17px;