diff --git a/client/styles/components/_editor.scss b/client/styles/components/_editor.scss
index 111970e16a..f74faff4e9 100644
--- a/client/styles/components/_editor.scss
+++ b/client/styles/components/_editor.scss
@@ -79,6 +79,7 @@ pre.CodeMirror-line {
   }
   // left: 0 !important;
   width: #{48 / $base-font-size}rem;
+  z-index: 0;
 }
 
 /*
@@ -96,6 +97,7 @@ pre.CodeMirror-line {
     right: 0;
     width: 100%;
     margin-left: 0;
+    z-index: 5;
   }
 
   z-index: 1;
@@ -138,7 +140,11 @@ pre.CodeMirror-line {
 
 .CodeMirror-find-controls {
   display: flex;
-  align-items: center;
+  align-items: center;  
+
+  @media (max-width: 580px) {
+    padding: 0.6rem 0rem;
+  }
 }
 .CodeMirror-search-inputs {
   width: 30%;
@@ -150,12 +156,13 @@ pre.CodeMirror-line {
   align-items: center;
 }
 .CodeMirror-search-controls {
-  display: flex;
+  display: block;
   align-items: center;
   justify-content: end;
 }
 .CodeMirror-replace-controls {
   display: flex;
+  padding-top: 1.4rem;
   margin-left: #{10 / $base-font-size}rem;
 }
 
diff --git a/client/utils/codemirror-search.js b/client/utils/codemirror-search.js
index 6108e87086..e6f9b98be5 100644
--- a/client/utils/codemirror-search.js
+++ b/client/utils/codemirror-search.js
@@ -372,9 +372,8 @@ function startSearch(cm, state, query) {
   var num_match = cm.state.search.annotate.matches.length;
   //no matches found
   if (num_match == 0) {
-    cm.display.wrapper.querySelector(
-      '.CodeMirror-search-results'
-    ).innerText = i18n.t('CodemirrorFindAndReplace.NoResults');
+    cm.display.wrapper.querySelector('.CodeMirror-search-results').innerText =
+      i18n.t('CodemirrorFindAndReplace.NoResults');
     cm.removeOverlay(state.overlay, state.caseInsensitive);
   } else {
     var next =
@@ -384,9 +383,8 @@ function startSearch(cm, state, query) {
         );
       }) + 1;
     var text_match = next + '/' + num_match;
-    cm.display.wrapper.querySelector(
-      '.CodeMirror-search-results'
-    ).innerText = text_match;
+    cm.display.wrapper.querySelector('.CodeMirror-search-results').innerText =
+      text_match;
   }
 }
 
@@ -572,9 +570,8 @@ function findNext(cm, rev, callback) {
           s.from.ch === cursor.from().ch && s.from.line === cursor.from().line
       ) + 1;
     var text_match = next + '/' + num_match;
-    cm.display.wrapper.querySelector(
-      '.CodeMirror-search-results'
-    ).innerText = text_match;
+    cm.display.wrapper.querySelector('.CodeMirror-search-results').innerText =
+      text_match;
     if (callback) callback(cursor.from(), cursor.to());
   });
 }
@@ -637,26 +634,6 @@ var getQueryDialog = function () {
         </div>
       </div>
       <div class="CodeMirror-search-controls">
-        <div style="display: none;" id="Replace-controls-div" class="CodeMirror-replace-controls">
-          <button
-            title="${i18n.t('CodemirrorFindAndReplace.Replace')}"
-            aria-label="${i18n.t('CodemirrorFindAndReplace.Replace')}"
-            role="button"
-            id="Btn-replace"
-            class="CodeMirror-search-modifier-button CodeMirror-replace-button"
-          >
-            ${i18n.t('CodemirrorFindAndReplace.Replace')}
-          </button>
-          <button
-            title="${i18n.t('CodemirrorFindAndReplace.ReplaceAll')}"
-            aria-label="${i18n.t('CodemirrorFindAndReplace.ReplaceAll')}"
-            role="button"
-            id="Btn-replace-all"
-            class="CodeMirror-search-modifier-button CodeMirror-replace-button"
-          >
-            ${i18n.t('CodemirrorFindAndReplace.ReplaceAll')}
-          </button>
-        </div>
         <div class="CodeMirror-find-controls">
           <div class="CodeMirror-search-modifiers button-wrap">
             <button
@@ -719,6 +696,26 @@ var getQueryDialog = function () {
             </button>
           </div>
         </div>
+        <div style="display: none;" id="Replace-controls-div" class="CodeMirror-replace-controls">
+          <button
+            title="${i18n.t('CodemirrorFindAndReplace.Replace')}"
+            aria-label="${i18n.t('CodemirrorFindAndReplace.Replace')}"
+            role="button"
+            id="Btn-replace"
+            class="CodeMirror-search-modifier-button CodeMirror-replace-button"
+          >
+            ${i18n.t('CodemirrorFindAndReplace.Replace')}
+          </button>
+          <button
+            title="${i18n.t('CodemirrorFindAndReplace.ReplaceAll')}"
+            aria-label="${i18n.t('CodemirrorFindAndReplace.ReplaceAll')}"
+            role="button"
+            id="Btn-replace-all"
+            class="CodeMirror-search-modifier-button CodeMirror-replace-button"
+          >
+            ${i18n.t('CodemirrorFindAndReplace.ReplaceAll')}
+          </button>
+        </div>
       </div>
     </div>
   `;