fix: sticky searchbar hidden in codemirror (#3351)

* fix: sticky search bar in codemirror

* chore: use tailwind classes

* chore: improve consistency across editor instances

---------

Co-authored-by: Liyas Thomas <liyascthomas@gmail.com>

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

@@ -86,7 +86,11 @@
         />
       </div>
     </div>
-    <div ref="jsonResponse" class="flex flex-col flex-1 h-auto h-full"></div>
+    <div
+      ref="jsonResponse"
+      class="flex flex-col flex-1 h-auto h-full"
+      :class="toggleFilter ? 'responseToggleOn' : 'responseToggleOff'"
+    ></div>
     <div
       v-if="outlinePath"
       class="sticky bottom-0 z-10 flex flex-shrink-0 px-2 overflow-auto overflow-x-auto border-t bg-primaryLight border-dividerLight flex-nowrap"
@@ -381,4 +385,12 @@ defineActionHandler("response.copy", () => copyResponse())
   @apply transition;
   @apply hover: text-secondary;
 }
+
+:deep(.responseToggleOff .cm-panels) {
+  @apply top-lowerTertiaryStickyFold #{!important};
+}
+
+:deep(.responseToggleOn .cm-panels) {
+  @apply top-lowerFourthStickyFold #{!important};
+}
 </style>

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

@@ -117,3 +117,9 @@ useCodemirror(
 defineActionHandler("response.file.download", () => downloadResponse())
 defineActionHandler("response.copy", () => copyResponse())
 </script>
+
+<style lang="scss" scoped>
+:deep(.cm-panels) {
+  @apply top-lowerTertiaryStickyFold #{!important};
+}
+</style>