diff --git a/frappe/public/js/frappe/recorder/RequestDetail.vue b/frappe/public/js/frappe/recorder/RequestDetail.vue
index 60795076ec..58824d2f97 100644
--- a/frappe/public/js/frappe/recorder/RequestDetail.vue
+++ b/frappe/public/js/frappe/recorder/RequestDetail.vue
@@ -79,7 +79,7 @@
 														<span class="octicon octicon-triangle-down"></span></a>
 													</div>
 												</div>
-												<div class="form-in-grid" v-if="showing == call.index">
+												<div class="recorder-form-in-grid" v-if="showing == call.index">
 													<div class="grid-form-heading" @click="showing = null">
 														<div class="toolbar grid-header-toolbar">
 															<span class="panel-title">SQL Query #<span class="grid-form-row-index">{{ call.index }}</span></span>
diff --git a/frappe/public/less/form_grid.less b/frappe/public/less/form_grid.less
index 86482686d1..5cb04a252c 100644
--- a/frappe/public/less/form_grid.less
+++ b/frappe/public/less/form_grid.less
@@ -247,14 +247,23 @@
 	}
 }
 
-.form-in-grid {
+.base-grid() {
 	background-color: white;
-	z-index: 1021;
 	position: relative;
+	.transition(opacity .2s ease)
+}
+
+.form-in-grid {
 	overflow: hidden;
 	height: 0;
 	opacity: 0;
-	.transition(opacity .2s ease)
+	z-index: 1021;
+	.base-grid();
+}
+
+.recorder-form-in-grid {
+	z-index: 0;
+	.base-grid();
 }
 
 .grid-row-open .form-in-grid {