chore: use :deep()

Co-authored-by: collinewait <21334508+collinewait@users.noreply.github.com>

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

@@ -803,7 +803,7 @@ defineActionHandler("request.save", saveRequest)
 defineActionHandler("request.reset", clearGQLQuery)
 </script>
 <style lang="scss" scoped>
-::v-deep .cm-panels {
+:deep(.cm-panels) {
   top: var(--upper-tertiary-sticky-fold) !important;
 }
 </style>

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

@@ -121,7 +121,7 @@ defineActionHandler("response.file.download", () => downloadResponse())
 defineActionHandler("response.copy", () => copyResponse())
 </script>
 <style lang="scss" scoped>
-::v-deep .cm-panels {
+:deep(.cm-panels) {
   top: var(--sidebar-primary-sticky-fold) !important;
 }
 </style>

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

@@ -193,7 +193,7 @@ const tippyActions = ref<any | null>(null)
 </script>
 
 <style lang="scss" scoped>
-::v-deep .cm-panels {
+:deep(.cm-panels) {
   top: var(--request-body-sticky-fold) !important;
 }
 </style>

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

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

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

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

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

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

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

@@ -275,15 +275,10 @@ 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;
-    }
-  }
+:deep(.cm-panels) {
+  top: var(--upper-tertiary-sticky-fold) !important;
+}
+.showing-event-field :deep(.cm-panels) {
+  top: var(--request-body-sticky-fold) !important;
 }
 </style>