chore: minor ui improvements

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

@@ -50,6 +50,13 @@
               :icon="IconTrash2"
               @click="clearGQLQuery()"
             />
+            <ButtonSecondary
+              v-tippy="{ theme: 'tooltip' }"
+              :title="t('state.linewrap')"
+              :class="{ '!text-accent': linewrapEnabledQuery }"
+              :icon="IconWrapText"
+              @click.prevent="linewrapEnabledQuery = !linewrapEnabledQuery"
+            />
             <ButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="t('action.prettify')"
@@ -91,6 +98,15 @@
               :icon="IconTrash2"
               @click="clearGQLVariables()"
             />
+            <ButtonSecondary
+              v-tippy="{ theme: 'tooltip' }"
+              :title="t('state.linewrap')"
+              :class="{ '!text-accent': linewrapEnabledVariable }"
+              :icon="IconWrapText"
+              @click.prevent="
+                linewrapEnabledVariable = !linewrapEnabledVariable
+              "
+            />
             <ButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="t('action.prettify')"
@@ -132,6 +148,13 @@
               :icon="IconTrash2"
               @click="clearContent()"
             />
+            <ButtonSecondary
+              v-tippy="{ theme: 'tooltip' }"
+              :title="t('state.linewrap')"
+              :class="{ '!text-accent': linewrapEnabled }"
+              :icon="IconWrapText"
+              @click.prevent="linewrapEnabled = !linewrapEnabled"
+            />
             <ButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="t('state.bulk_mode')"
@@ -316,6 +339,7 @@ import IconCopy from "~icons/lucide/copy"
 import IconCheck from "~icons/lucide/check"
 import IconInfo from "~icons/lucide/info"
 import IconWand2 from "~icons/lucide/wand-2"
+import IconWrapText from "~icons/lucide/wrap-text"
 import { Ref, computed, reactive, ref, watch } from "vue"
 import * as gql from "graphql"
 import * as E from "fp-ts/Either"
@@ -388,18 +412,24 @@ const idTicker = ref(0)
 const bulkMode = ref(false)
 const bulkHeaders = ref("")
 const bulkEditor = ref<any | null>(null)
+const linewrapEnabled = ref(true)
 
 const deletionToast = ref<{ goAway: (delay: number) => void } | null>(null)
 
-useCodemirror(bulkEditor, bulkHeaders, {
-  extendedEditorConfig: {
-    mode: "text/x-yaml",
-    placeholder: `${t("state.bulk_mode_placeholder")}`,
-  },
-  linter: null,
-  completer: null,
-  environmentHighlights: false,
-})
+useCodemirror(
+  bulkEditor,
+  bulkHeaders,
+  reactive({
+    extendedEditorConfig: {
+      mode: "text/x-yaml",
+      placeholder: `${t("state.bulk_mode_placeholder")}`,
+      lineWrapping: linewrapEnabled,
+    },
+    linter: null,
+    completer: null,
+    environmentHighlights: false,
+  })
+)
 
 // The functional headers list (the headers actually in the system)
 const headers = useStream(gqlHeaders$, [], setGQLHeaders) as Ref<GQLHeader[]>
@@ -602,6 +632,7 @@ const activeGQLHeadersCount = computed(
 )
 
 const variableEditor = ref<any | null>(null)
+const linewrapEnabledVariable = ref(true)
 
 useCodemirror(
   variableEditor,
@@ -610,6 +641,7 @@ useCodemirror(
     extendedEditorConfig: {
       mode: "application/ld+json",
       placeholder: `${t("request.variables")}`,
+      lineWrapping: linewrapEnabledVariable,
     },
     linter: computed(() =>
       variableString.value.length > 0 ? jsonLinter : null
@@ -621,16 +653,22 @@ useCodemirror(
 
 const queryEditor = ref<any | null>(null)
 const schema = useReadonlyStream(props.conn.schema$, null, "noclone")
+const linewrapEnabledQuery = ref(true)
 
-useCodemirror(queryEditor, gqlQueryString, {
-  extendedEditorConfig: {
-    mode: "graphql",
-    placeholder: `${t("request.query")}`,
-  },
-  linter: createGQLQueryLinter(schema),
-  completer: queryCompleter(schema),
-  environmentHighlights: false,
-})
+useCodemirror(
+  queryEditor,
+  gqlQueryString,
+  reactive({
+    extendedEditorConfig: {
+      mode: "graphql",
+      placeholder: `${t("request.query")}`,
+      lineWrapping: linewrapEnabledQuery,
+    },
+    linter: createGQLQueryLinter(schema),
+    completer: queryCompleter(schema),
+    environmentHighlights: false,
+  })
+)
 
 const copyQueryIcon = refAutoReset<typeof IconCopy | typeof IconCheck>(
   IconCopy,

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

@@ -14,7 +14,7 @@
         <label class="font-semibold text-secondaryLight">
           {{ t("response.title") }}
         </label>
-        <div class="flex">
+        <div class="flex items-center">
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
             :title="t('state.linewrap')"
@@ -47,7 +47,7 @@
       class="flex flex-col items-center justify-center p-4 text-secondaryLight"
     >
       <div class="flex pb-4 my-4 space-x-2">
-        <div class="flex flex-col items-end text-right space-y-4">
+        <div class="flex flex-col items-end space-y-4 text-right">
           <span class="flex items-center flex-1">
             {{ t("shortcut.general.command_menu") }}
           </span>