fix: add parent containers for codemirror instances

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

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">

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"

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"

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"

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>
 

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"

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"