diff --git a/packages/hoppscotch-common/assets/scss/themes.scss b/packages/hoppscotch-common/assets/scss/themes.scss
index 997d8b8ad..f4382e206 100644
--- a/packages/hoppscotch-common/assets/scss/themes.scss
+++ b/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"] {
diff --git a/packages/hoppscotch-common/src/components/graphql/RequestOptions.vue b/packages/hoppscotch-common/src/components/graphql/RequestOptions.vue
index 8751ef025..6174d9e42 100644
--- a/packages/hoppscotch-common/src/components/graphql/RequestOptions.vue
+++ b/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>
diff --git a/packages/hoppscotch-common/src/components/graphql/Response.vue b/packages/hoppscotch-common/src/components/graphql/Response.vue
index b0138d782..b7f23c0f2 100644
--- a/packages/hoppscotch-common/src/components/graphql/Response.vue
+++ b/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>
diff --git a/packages/hoppscotch-common/src/components/http/Body.vue b/packages/hoppscotch-common/src/components/http/Body.vue
index 8c1e91211..c2ad5f400 100644
--- a/packages/hoppscotch-common/src/components/http/Body.vue
+++ b/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>
diff --git a/packages/hoppscotch-common/src/components/http/PreRequestScript.vue b/packages/hoppscotch-common/src/components/http/PreRequestScript.vue
index af9b86776..021531f6a 100644
--- a/packages/hoppscotch-common/src/components/http/PreRequestScript.vue
+++ b/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>
diff --git a/packages/hoppscotch-common/src/components/http/Tests.vue b/packages/hoppscotch-common/src/components/http/Tests.vue
index 24e545ffa..95c07ad34 100644
--- a/packages/hoppscotch-common/src/components/http/Tests.vue
+++ b/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>
diff --git a/packages/hoppscotch-common/src/components/lenses/ResponseBodyRenderer.vue b/packages/hoppscotch-common/src/components/lenses/ResponseBodyRenderer.vue
index 6ad7ef987..3f8dedd29 100644
--- a/packages/hoppscotch-common/src/components/lenses/ResponseBodyRenderer.vue
+++ b/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>
diff --git a/packages/hoppscotch-common/src/components/lenses/renderers/JSONLensRenderer.vue b/packages/hoppscotch-common/src/components/lenses/renderers/JSONLensRenderer.vue
index ef3082a84..c1755e0cf 100644
--- a/packages/hoppscotch-common/src/components/lenses/renderers/JSONLensRenderer.vue
+++ b/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>
diff --git a/packages/hoppscotch-common/src/components/realtime/Communication.vue b/packages/hoppscotch-common/src/components/realtime/Communication.vue
index 257c3b6d5..2bf5d94b6 100644
--- a/packages/hoppscotch-common/src/components/realtime/Communication.vue
+++ b/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>