From 7652dab9c49b18a40df6598776a0ab8d9936899b Mon Sep 17 00:00:00 2001
From: Nivedin <53208152+nivedin@users.noreply.github.com>
Date: Mon, 22 Jul 2024 17:04:53 +0530
Subject: [PATCH] fix: codemirror search bar misaligned (#4203)

Co-authored-by: jamesgeorge007 <25279263+jamesgeorge007@users.noreply.github.com>
---
 .../hoppscotch-common/src/components.d.ts     |  1 +
 .../src/components/graphql/Response.vue       | 10 ++------
 .../lenses/renderers/JSONLensRenderer.vue     | 14 +----------
 .../lenses/renderers/RawLensRenderer.vue      |  6 -----
 .../src/components/realtime/Communication.vue | 24 +++----------------
 .../src/pages/realtime/socketio.vue           |  1 -
 .../src/pages/realtime/websocket.vue          |  1 -
 7 files changed, 7 insertions(+), 50 deletions(-)

diff --git a/packages/hoppscotch-common/src/components.d.ts b/packages/hoppscotch-common/src/components.d.ts
index b153ddd5e..8ff1054de 100644
--- a/packages/hoppscotch-common/src/components.d.ts
+++ b/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']
diff --git a/packages/hoppscotch-common/src/components/graphql/Response.vue b/packages/hoppscotch-common/src/components/graphql/Response.vue
index 9a84d8f6f..b0357f5ea 100644
--- a/packages/hoppscotch-common/src/components/graphql/Response.vue
+++ b/packages/hoppscotch-common/src/components/graphql/Response.vue
@@ -72,8 +72,8 @@
           </tippy>
         </div>
       </div>
-      <div class="h-full">
-        <div ref="schemaEditor"></div>
+      <div class="h-full relative overflow-auto flex flex-col flex-1">
+        <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>
diff --git a/packages/hoppscotch-common/src/components/lenses/renderers/JSONLensRenderer.vue b/packages/hoppscotch-common/src/components/lenses/renderers/JSONLensRenderer.vue
index c4882e5b9..075306380 100644
--- a/packages/hoppscotch-common/src/components/lenses/renderers/JSONLensRenderer.vue
+++ b/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
-        ref="jsonResponse"
-        :class="toggleFilter ? 'responseToggleOn' : 'responseToggleOff'"
-        class="absolute inset-0 h-full"
-      ></div>
+      <div ref="jsonResponse" 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>
diff --git a/packages/hoppscotch-common/src/components/lenses/renderers/RawLensRenderer.vue b/packages/hoppscotch-common/src/components/lenses/renderers/RawLensRenderer.vue
index 922128b1d..fc24434d2 100644
--- a/packages/hoppscotch-common/src/components/lenses/renderers/RawLensRenderer.vue
+++ b/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>
diff --git a/packages/hoppscotch-common/src/components/realtime/Communication.vue b/packages/hoppscotch-common/src/components/realtime/Communication.vue
index 6f2b01c37..1b73104b5 100644
--- a/packages/hoppscotch-common/src/components/realtime/Communication.vue
+++ b/packages/hoppscotch-common/src/components/realtime/Communication.vue
@@ -1,8 +1,5 @@
 <template>
-  <div
-    class="flex flex-1 flex-col"
-    :class="{ eventFeildShown: showEventField }"
-  >
+  <div class="flex flex-1 flex-col">
     <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 ref="wsCommunicationBody" class="flex flex-1 flex-col"></div>
+    <div class="h-full relative overflow-auto flex flex-col flex-1">
+      <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>
diff --git a/packages/hoppscotch-common/src/pages/realtime/socketio.vue b/packages/hoppscotch-common/src/pages/realtime/socketio.vue
index 1c758248d..98a79b0a9 100644
--- a/packages/hoppscotch-common/src/pages/realtime/socketio.vue
+++ b/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)"
diff --git a/packages/hoppscotch-common/src/pages/realtime/websocket.vue b/packages/hoppscotch-common/src/pages/realtime/websocket.vue
index 21fd6956d..f377dcc1e 100644
--- a/packages/hoppscotch-common/src/pages/realtime/websocket.vue
+++ b/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)"
           />