From cd7429dd2425e318164a93cfca167ae535900e4c Mon Sep 17 00:00:00 2001
From: nivedin <nivedinp@gmail.com>
Date: Wed, 21 Feb 2024 22:19:33 +0530
Subject: [PATCH] fix: add parent containers for codemirror instances

---
 packages/hoppscotch-common/src/components/graphql/Sidebar.vue | 4 ++--
 .../hoppscotch-common/src/components/graphql/Variable.vue     | 4 +++-
 packages/hoppscotch-common/src/components/http/Headers.vue    | 4 +++-
 packages/hoppscotch-common/src/components/http/Parameters.vue | 4 +++-
 .../src/components/http/PreRequestScript.vue                  | 4 ++--
 packages/hoppscotch-common/src/components/http/RawBody.vue    | 4 +++-
 packages/hoppscotch-common/src/components/http/Tests.vue      | 4 ++--
 .../src/components/http/URLEncodedParams.vue                  | 4 +++-
 8 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/packages/hoppscotch-common/src/components/graphql/Sidebar.vue b/packages/hoppscotch-common/src/components/graphql/Sidebar.vue
index 3eeaa9aa4..0bc34cd64 100644
--- a/packages/hoppscotch-common/src/components/graphql/Sidebar.vue
+++ b/packages/hoppscotch-common/src/components/graphql/Sidebar.vue
@@ -145,8 +145,8 @@
           />
         </div>
       </div>
-      <div v-if="schemaString" class="h-full">
-        <div ref="schemaEditor" class="flex flex-1 flex-col"></div>
+      <div v-if="schemaString" class="h-full relative w-full">
+        <div ref="schemaEditor" class="absolute inset-0"></div>
       </div>
       <HoppSmartPlaceholder
         v-else
diff --git a/packages/hoppscotch-common/src/components/graphql/Variable.vue b/packages/hoppscotch-common/src/components/graphql/Variable.vue
index bf5eee3a4..0547edcd2 100644
--- a/packages/hoppscotch-common/src/components/graphql/Variable.vue
+++ b/packages/hoppscotch-common/src/components/graphql/Variable.vue
@@ -67,7 +67,9 @@
       />
     </div>
   </div>
-  <div ref="variableEditor" class="flex flex-1 flex-col"></div>
+  <div class="h-full relative">
+    <div ref="variableEditor" class="flex flex-1 flex-col"></div>
+  </div>
 </template>
 
 <script setup lang="ts">
diff --git a/packages/hoppscotch-common/src/components/http/Headers.vue b/packages/hoppscotch-common/src/components/http/Headers.vue
index c9e3992d8..fb46c4aee 100644
--- a/packages/hoppscotch-common/src/components/http/Headers.vue
+++ b/packages/hoppscotch-common/src/components/http/Headers.vue
@@ -49,7 +49,9 @@
         />
       </div>
     </div>
-    <div v-if="bulkMode" ref="bulkEditor" class="flex flex-1 flex-col"></div>
+    <div v-if="bulkMode" class="h-full relative w-full">
+      <div ref="bulkEditor" class="absolute inset-0"></div>
+    </div>
     <div v-else>
       <draggable
         v-model="workingHeaders"
diff --git a/packages/hoppscotch-common/src/components/http/Parameters.vue b/packages/hoppscotch-common/src/components/http/Parameters.vue
index 5f0507d64..202cbf631 100644
--- a/packages/hoppscotch-common/src/components/http/Parameters.vue
+++ b/packages/hoppscotch-common/src/components/http/Parameters.vue
@@ -44,7 +44,9 @@
         />
       </div>
     </div>
-    <div v-if="bulkMode" ref="bulkEditor" class="flex flex-1 flex-col"></div>
+    <div v-if="bulkMode" class="h-full relative">
+      <div ref="bulkEditor" class="absolute inset-0"></div>
+    </div>
     <div v-else>
       <draggable
         v-model="workingParams"
diff --git a/packages/hoppscotch-common/src/components/http/PreRequestScript.vue b/packages/hoppscotch-common/src/components/http/PreRequestScript.vue
index 31c88bbf2..1646cfeca 100644
--- a/packages/hoppscotch-common/src/components/http/PreRequestScript.vue
+++ b/packages/hoppscotch-common/src/components/http/PreRequestScript.vue
@@ -30,8 +30,8 @@
       </div>
     </div>
     <div class="flex flex-1 border-b border-dividerLight">
-      <div class="w-2/3 border-r border-dividerLight">
-        <div ref="preRequestEditor" class="h-full"></div>
+      <div class="w-2/3 border-r border-dividerLight h-full relative">
+        <div ref="preRequestEditor" class="h-full absolute inset-0"></div>
       </div>
       <div
         class="z-[9] sticky top-upperTertiaryStickyFold h-full min-w-[12rem] max-w-1/3 flex-shrink-0 overflow-auto overflow-x-auto bg-primary p-4"
diff --git a/packages/hoppscotch-common/src/components/http/RawBody.vue b/packages/hoppscotch-common/src/components/http/RawBody.vue
index 72b420793..a3bffd95c 100644
--- a/packages/hoppscotch-common/src/components/http/RawBody.vue
+++ b/packages/hoppscotch-common/src/components/http/RawBody.vue
@@ -59,7 +59,9 @@
         />
       </div>
     </div>
-    <div ref="rawBodyParameters" class="flex flex-1 flex-col"></div>
+    <div class="h-full relative">
+      <div ref="rawBodyParameters" class="absolute inset-0"></div>
+    </div>
   </div>
 </template>
 
diff --git a/packages/hoppscotch-common/src/components/http/Tests.vue b/packages/hoppscotch-common/src/components/http/Tests.vue
index 28cb128ca..a195cc148 100644
--- a/packages/hoppscotch-common/src/components/http/Tests.vue
+++ b/packages/hoppscotch-common/src/components/http/Tests.vue
@@ -30,8 +30,8 @@
       </div>
     </div>
     <div class="flex flex-1 border-b border-dividerLight">
-      <div class="w-2/3 border-r border-dividerLight">
-        <div ref="testScriptEditor" class="h-full"></div>
+      <div class="w-2/3 border-r border-dividerLight h-full relative">
+        <div ref="testScriptEditor" class="h-full absolute inset-0"></div>
       </div>
       <div
         class="z-[9] sticky top-upperTertiaryStickyFold h-full min-w-[12rem] max-w-1/3 flex-shrink-0 overflow-auto overflow-x-auto bg-primary p-4"
diff --git a/packages/hoppscotch-common/src/components/http/URLEncodedParams.vue b/packages/hoppscotch-common/src/components/http/URLEncodedParams.vue
index b484ab82b..9f1418249 100644
--- a/packages/hoppscotch-common/src/components/http/URLEncodedParams.vue
+++ b/packages/hoppscotch-common/src/components/http/URLEncodedParams.vue
@@ -44,7 +44,9 @@
         />
       </div>
     </div>
-    <div v-if="bulkMode" ref="bulkEditor" class="flex flex-1 flex-col"></div>
+    <div v-if="bulkMode" class="h-full relative">
+      <div ref="bulkEditor" class="absolute inset-0"></div>
+    </div>
     <div v-else>
       <draggable
         v-model="workingUrlEncodedParams"