refactor(ui): sort classes

pages/graphql.vue

@@ -242,7 +242,7 @@
                         })
                       "
                     />
-                    <div>
+                    <span>
                       <ButtonSecondary
                         v-tippy="{ theme: 'tooltip' }"
                         :title="
@@ -269,8 +269,8 @@
                           })
                         "
                       />
-                    </div>
-                    <div>
+                    </span>
+                    <span>
                       <ButtonSecondary
                         v-tippy="{ theme: 'tooltip' }"
                         :title="$t('delete')"
@@ -278,7 +278,7 @@
                         color="red"
                         @click.native="removeRequestHeader(index)"
                       />
-                    </div>
+                    </span>
                   </div>
                   <div
                     v-if="headers.length === 0"
@@ -637,7 +637,7 @@ import * as gql from "graphql"
 import { commonHeaders } from "~/helpers/headers"
 import { getPlatformSpecialKey } from "~/helpers/platformutils"
 import { getCurrentStrategyID, sendNetworkRequest } from "~/helpers/network"
-import { getSettingSubject, useSetting } from "~/newstore/settings"
+import { useSetting } from "~/newstore/settings"
 import { addGraphqlHistoryEntry } from "~/newstore/history"
 import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
@@ -676,11 +676,6 @@ export default defineComponent({
       showSaveRequestModal: false,
     }
   },
-  subscriptions() {
-    return {
-      SCROLL_INTO_ENABLED: getSettingSubject("SCROLL_INTO_ENABLED"),
-    }
-  },
   head() {
     return {
       title: `GraphQL • Hoppscotch`,
@@ -898,7 +893,7 @@ export default defineComponent({
       const rootTypeName = this.resolveRootType(type).name
 
       const target = document.getElementById(`type_${rootTypeName}`)
-      if (target && this.SCROLL_INTO_ENABLED) {
+      if (target) {
         this.$refs.gqlTabs.$el
           .querySelector(".gqlTabs")
           .scrollTo({ top: target.offsetTop, behavior: "smooth" })
@@ -943,7 +938,6 @@ export default defineComponent({
       this.$nuxt.$loading.start()
 
       this.response = this.$t("loading")
-      if (this.SCROLL_INTO_ENABLED) this.scrollInto("response")
 
       try {
         const headers = {}
@@ -1176,7 +1170,6 @@ export default defineComponent({
       this.$nuxt.$loading.start()
 
       this.schema = this.$t("loading")
-      if (this.SCROLL_INTO_ENABLED) this.scrollInto("schema")
 
       try {
         const query = JSON.stringify({
@@ -1308,11 +1301,6 @@ export default defineComponent({
         },
       })
     },
-    scrollInto(view) {
-      this.$refs[view].$el.scrollIntoView({
-        behavior: "smooth",
-      })
-    },
     updateQuery(updatedQuery) {
       this.gqlQueryString = updatedQuery
     },

pages/index.vue

@@ -190,7 +190,6 @@ export default defineComponent({
         null
       ),
       RIGHT_SIDEBAR: useSetting("RIGHT_SIDEBAR"),
-      SCROLL_INTO_ENABLED: useSetting("SCROLL_INTO_ENABLED"),
       PROXY_ENABLED: useSetting("PROXY_ENABLED"),
       URL_EXCLUDES: useSetting("URL_EXCLUDES"),
       EXPERIMENTAL_URL_BAR_ENABLED: useSetting("EXPERIMENTAL_URL_BAR_ENABLED"),

pages/settings.vue

@@ -164,14 +164,6 @@
               >.
             </div>
             <div class="space-y-4 mt-4">
-              <div class="flex items-center">
-                <SmartToggle
-                  :on="SCROLL_INTO_ENABLED"
-                  @change="toggleSetting('SCROLL_INTO_ENABLED')"
-                >
-                  {{ $t("scrollInto_use_toggle") }}
-                </SmartToggle>
-              </div>
               <div class="flex items-center">
                 <SmartToggle
                   :on="EXPERIMENTAL_URL_BAR_ENABLED"
@@ -382,7 +374,6 @@ type SettingsType = typeof defaultSettings
 export default defineComponent({
   setup() {
     return {
-      SCROLL_INTO_ENABLED: useSetting("SCROLL_INTO_ENABLED"),
       PROXY_ENABLED: useSetting("PROXY_ENABLED"),
       PROXY_URL: useSetting("PROXY_URL"),
       PROXY_KEY: useSetting("PROXY_KEY"),