chore: updated remaining codemirror instances

packages/hoppscotch-common/src/components/graphql/RequestOptions.vue

@@ -802,6 +802,7 @@ defineActionHandler("request.send-cancel", runQuery)
 defineActionHandler("request.save", saveRequest)
 defineActionHandler("request.reset", clearGQLQuery)
 </script>
+
 <style lang="scss" scoped>
 :deep(.cm-panels) {
   top: var(--upper-tertiary-sticky-fold) !important;

packages/hoppscotch-common/src/components/graphql/Response.vue

@@ -120,6 +120,7 @@ const downloadResponse = () => {
 defineActionHandler("response.file.download", () => downloadResponse())
 defineActionHandler("response.copy", () => copyResponse())
 </script>
+
 <style lang="scss" scoped>
 :deep(.cm-panels) {
   top: var(--sidebar-primary-sticky-fold) !important;

packages/hoppscotch-common/src/components/graphql/Sidebar.vue

@@ -470,3 +470,9 @@ const handleUseHistory = (entry: GQLHistoryEntry) => {
   props.conn.reset()
 }
 </script>
+
+<style lang="scss" scoped>
+:deep(.cm-panels) {
+  top: var(--lower-primary-sticky-fold) !important;
+}
+</style>

packages/hoppscotch-common/src/components/http/CodegenModal.vue

@@ -273,3 +273,9 @@ const filteredCodegenDefinitions = computed(() => {
 const { copyIcon, copyResponse } = useCopyResponse(requestCode)
 const { downloadIcon, downloadResponse } = useDownloadResponse("", requestCode)
 </script>
+
+<style lang="scss" scoped>
+:deep(.cm-panels) {
+  top: -1rem !important;
+}
+</style>

packages/hoppscotch-common/src/components/http/Headers.vue

@@ -508,3 +508,9 @@ const changeTab = (tab: ComputedHeader["source"]) => {
   else emit("change-tab", "bodyParams")
 }
 </script>
+
+<style lang="scss" scoped>
+:deep(.cm-panels) {
+  top: var(--upper-tertiary-sticky-fold) !important;
+}
+</style>

packages/hoppscotch-common/src/components/http/Parameters.vue

@@ -405,3 +405,9 @@ const clearContent = () => {
   bulkParams.value = ""
 }
 </script>
+
+<style lang="scss" scoped>
+:deep(.cm-panels) {
+  top: var(--upper-tertiary-sticky-fold) !important;
+}
+</style>

packages/hoppscotch-common/src/components/http/PreRequestScript.vue

@@ -110,6 +110,7 @@ const clearContent = () => {
   preRequestScript.value = ""
 }
 </script>
+
 <style lang="scss" scoped>
 :deep(.cm-panels) {
   top: var(--upper-tertiary-sticky-fold) !important;

packages/hoppscotch-common/src/components/http/RawBody.vue

@@ -220,3 +220,9 @@ const prettifyXML = (xml: string) => {
     .join("\r\n")
 }
 </script>
+
+<style lang="scss" scoped>
+:deep(.cm-panels) {
+  top: var(--request-body-sticky-fold) !important;
+}
+</style>

packages/hoppscotch-common/src/components/http/Tests.vue

@@ -106,6 +106,7 @@ const clearContent = () => {
   testScript.value = ""
 }
 </script>
+
 <style lang="scss" scoped>
 :deep(.cm-panels) {
   top: var(--upper-tertiary-sticky-fold) !important;

packages/hoppscotch-common/src/components/http/URLEncodedParams.vue

@@ -432,3 +432,9 @@ const clearContent = () => {
   bulkUrlEncodedParams.value = ""
 }
 </script>
+
+<style lang="scss" scoped>
+:deep(.cm-panels) {
+  top: var(--request-body-sticky-fold) !important;
+}
+</style>

packages/hoppscotch-common/src/components/lenses/ResponseBodyRenderer.vue

@@ -123,6 +123,7 @@ watch(selectedLensTab, (newLensID) => {
   selectedTabPreference.value = newLensID
 })
 </script>
+
 <style lang="scss" scoped>
 :deep(.cm-panels) {
   top: var(--lower-tertiary-sticky-fold) !important;

packages/hoppscotch-common/src/components/realtime/Communication.vue

@@ -274,10 +274,12 @@ const prettifyRequestBody = () => {
 
 defineActionHandler("request.send-cancel", sendMessage)
 </script>
+
 <style lang="scss" scoped>
 :deep(.cm-panels) {
   top: var(--upper-tertiary-sticky-fold) !important;
 }
+
 .showing-event-field :deep(.cm-panels) {
   top: var(--request-body-sticky-fold) !important;
 }

packages/hoppscotch-common/src/helpers/editor/themes/baseTheme.ts

@@ -199,6 +199,7 @@ export const inputTheme = EditorView.theme({
   ".cm-panels": {
     backgroundColor: "var(--primary-light-color)",
     color: "var(--secondary-light-color)",
+    zIndex: "1",
   },
   ".cm-panels.cm-panels-top": {
     borderBottom: "1px solid var(--divider-light-color)",