chore: make search panel visible on 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,8 @@ defineActionHandler("request.send-cancel", runQuery)
 defineActionHandler("request.save", saveRequest)
 defineActionHandler("request.reset", clearGQLQuery)
 </script>
+<style lang="scss" scoped>
+::v-deep .cm-panels {
+  top: var(--upper-tertiary-sticky-fold) !important;
+}
+</style>

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

@@ -120,3 +120,8 @@ const downloadResponse = () => {
 defineActionHandler("response.file.download", () => downloadResponse())
 defineActionHandler("response.copy", () => copyResponse())
 </script>
+<style lang="scss" scoped>
+::v-deep .cm-panels {
+  top: var(--sidebar-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>
+::v-deep .cm-panels {
+  top: var(--request-body-sticky-fold) !important;
+}
+</style>

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

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

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

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

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

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

packages/hoppscotch-common/src/components/lenses/renderers/JSONLensRenderer.vue

@@ -381,7 +381,4 @@ defineActionHandler("response.copy", () => copyResponse())
   @apply transition;
   @apply hover: text-secondary;
 }
-::v-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,16 @@ const prettifyRequestBody = () => {
 
 defineActionHandler("request.send-cancel", sendMessage)
 </script>
+<style lang="scss" scoped>
+::v-deep {
+  .cm-panels {
+    top: var(--upper-tertiary-sticky-fold) !important;
+  }
+
+  &.showing-event-field {
+    .cm-panels {
+      top: var(--request-body-sticky-fold) !important;
+    }
+  }
+}
+</style>