fix: codemirror search bar misaligned (#4203)

Co-authored-by: jamesgeorge007 <25279263+jamesgeorge007@users.noreply.github.com>

packages/hoppscotch-common/src/components.d.ts

@@ -159,6 +159,7 @@ declare module 'vue' {
     IconLucideAlertTriangle: typeof import('~icons/lucide/alert-triangle')['default']
     IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default']
     IconLucideArrowUpRight: typeof import('~icons/lucide/arrow-up-right')['default']
+    IconLucideBrush: typeof import('~icons/lucide/brush')['default']
     IconLucideCheckCircle: typeof import('~icons/lucide/check-circle')['default']
     IconLucideChevronRight: typeof import('~icons/lucide/chevron-right')['default']
     IconLucideGlobe: typeof import('~icons/lucide/globe')['default']

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

@@ -72,8 +72,8 @@
           </tippy>
         </div>
       </div>
-      <div class="h-full">
+      <div class="h-full relative overflow-auto flex flex-col flex-1">
-        <div ref="schemaEditor"></div>
+        <div ref="schemaEditor" class="absolute inset-0 h-full"></div>
       </div>
     </div>
     <component
@@ -183,9 +183,3 @@ defineActionHandler(
   computed(() => !!props.response && props.response.length > 0)
 )
 </script>
-
-<style lang="scss" scoped>
-:deep(.cm-panels) {
-  @apply top-sidebarPrimaryStickyFold #{!important};
-}
-</style>

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

@@ -120,11 +120,7 @@
       </div>
     </div>
     <div class="h-full relative overflow-auto flex flex-col flex-1">
-      <div
+      <div ref="jsonResponse" class="absolute inset-0 h-full"></div>
-        ref="jsonResponse"
-        :class="toggleFilter ? 'responseToggleOn' : 'responseToggleOff'"
-        class="absolute inset-0 h-full"
-      ></div>
     </div>
     <div
       v-if="outlinePath"
@@ -434,12 +430,4 @@ 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

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

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

@@ -1,8 +1,5 @@
 <template>
-  <div
+  <div class="flex flex-1 flex-col">
-    class="flex flex-1 flex-col"
-    :class="{ eventFeildShown: showEventField }"
-  >
     <div
       v-if="showEventField"
       class="sticky z-10 flex flex-shrink-0 items-center justify-center overflow-x-auto border-b border-dividerLight bg-primary"
@@ -130,8 +127,8 @@
         />
       </div>
     </div>
-    <div class="h-full">
+    <div class="h-full relative overflow-auto flex flex-col flex-1">
-      <div ref="wsCommunicationBody" class="flex flex-1 flex-col"></div>
+      <div ref="wsCommunicationBody" class="absolute inset-0"></div>
     </div>
   </div>
 </template>
@@ -276,18 +273,3 @@ const prettifyRequestBody = () => {
 
 defineActionHandler("request.send-cancel", sendMessage)
 </script>
-
-<style lang="scss" scoped>
-:deep(.cm-panels) {
-  @apply top-upperSecondaryStickyFold #{!important};
-}
-
-.eventFeildShown :deep(.cm-panels),
-.cmResponsePrimaryStickyFold :deep(.cm-panels) {
-  @apply top-upperTertiaryStickyFold #{!important};
-}
-
-.cmResponseSecondaryStickyFold :deep(.cm-panels) {
-  @apply top-upperFourthStickyFold #{!important};
-}
-</style>

packages/hoppscotch-common/src/pages/realtime/socketio.vue

@@ -106,7 +106,6 @@
           <RealtimeCommunication
             :show-event-field="true"
             :is-connected="connectionState === 'CONNECTED'"
-            class="cmResponseSecondaryStickyFold"
             event-field-styles="top-upperSecondaryStickyFold"
             sticky-header-styles="top-upperTertiaryStickyFold"
             @send-message="sendMessage($event)"

packages/hoppscotch-common/src/pages/realtime/websocket.vue

@@ -46,7 +46,6 @@
         >
           <RealtimeCommunication
             :is-connected="connectionState === 'CONNECTED'"
-            class="cmResponsePrimaryStickyFold"
             sticky-header-styles="top-upperSecondaryStickyFold"
             @send-message="sendMessage($event)"
           />