chore: updated remaining codemirror instances

Co-authored-by: collinewait <21334508+collinewait@users.noreply.github.com>

packages/hoppscotch-common/assets/scss/themes.scss

@@ -269,6 +269,7 @@
   --lower-secondary-sticky-fold: 5.063rem;
   --lower-tertiary-sticky-fold: 7.125rem;
   --sidebar-primary-sticky-fold: 2rem;
+  --request-body-sticky-fold: 10rem;
 }
 
 @mixin font-medium {
@@ -285,6 +286,7 @@
   --lower-secondary-sticky-fold: 5.563rem;
   --lower-tertiary-sticky-fold: 7.875rem;
   --sidebar-primary-sticky-fold: 2.25rem;
+  --request-body-sticky-fold: 11rem;
 }
 
 @mixin font-large {
@@ -301,6 +303,7 @@
   --lower-secondary-sticky-fold: 6.063rem;
   --lower-tertiary-sticky-fold: 8.625rem;
   --sidebar-primary-sticky-fold: 2.5rem;
+  --request-body-sticky-fold: 12rem;
 }
 
 :root[data-font-size="small"] {

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

@@ -802,3 +802,9 @@ 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;
+}
+</style>

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

@@ -120,3 +120,9 @@ 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;
+}
+</style>

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/Body.vue

@@ -191,3 +191,9 @@ const isContentTypeAlreadyExist = () => {
 // Template refs
 const tippyActions = ref<any | null>(null)
 </script>
+
+<style lang="scss" scoped>
+:deep(.cm-panels) {
+  top: var(--request-body-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,3 +110,9 @@ const clearContent = () => {
   preRequestScript.value = ""
 }
 </script>
+
+<style lang="scss" scoped>
+:deep(.cm-panels) {
+  top: var(--upper-tertiary-sticky-fold) !important;
+}
+</style>

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

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

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

@@ -1,5 +1,8 @@
 <template>
-  <div class="flex flex-col flex-1">
+  <div
+    class="flex flex-col flex-1"
+    :class="{ 'showing-event-field': showEventField }"
+  >
     <div
       v-if="showEventField"
       class="sticky z-10 flex items-center justify-center flex-shrink-0 overflow-x-auto border-b bg-primary border-dividerLight"
@@ -271,3 +274,13 @@ 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;
+}
+</style>

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

@@ -63,6 +63,7 @@ export const baseTheme = 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)",
@@ -198,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)",