refactor(ui): sort classes

README.md

@@ -105,7 +105,7 @@
 
 - Choose theme: System (default), Light, Dark and Black
 - Choose accent color: Green (default), Teal, Blue, Indigo, Purple, Yellow, Orange, Red and Pink
-- Toggle auto-scroll to response
+- Distraction free Zen mode
 
 <p>
   <a href="https://hoppscotch.io"><img src="https://raw.githubusercontent.com/hoppscotch/hoppscotch/main/static/images/screenshots/banner_light.png" alt="Screenshot" width="100%"></a>

components/app/Shortcuts.vue

@@ -15,7 +15,7 @@
         "
       >
         <h3 class="ml-4 heading">{{ $t("shortcuts") }}</h3>
-        <div>
+        <div class="flex">
           <ButtonSecondary to="/settings" icon="tune" />
           <ButtonSecondary icon="close" @click.native="close()" />
         </div>
@@ -24,7 +24,7 @@
         <input
           v-model="filterText"
           type="search"
-          class="bg-primaryLight border-b border-dividerLight flex font-semibold font-mono w-full py-2 pr-2 pl-8 focus:outline-none truncate"
+          class="bg-primaryLight border-b border-dividerLight flex font-semibold font-mono w-full py-2 pr-2 pl-8 truncate focus:outline-none"
           :placeholder="$t('search')"
         />
       </div> -->

components/app/SlideOver.vue

@@ -3,7 +3,7 @@
     <transition v-if="show" name="fade" appear>
       <div class="inset-0 transition-opacity z-20 fixed" @keydown.esc="close()">
         <div
-          class="bg-primaryDark opacity-75 inset-0 absolute"
+          class="bg-primaryDark opacity-90 inset-0 absolute"
           tabindex="0"
           @click="close()"
         ></div>

components/collections/AddFolder.vue

@@ -1,10 +1,8 @@
 <template>
   <SmartModal v-if="show" @close="$emit('hide-modal')">
     <template #header>
-      <h3 class="heading">{{ $t("new_folder") }}</h3>
+      <h3 class="heading">{{ $t("folder.new") }}</h3>
-      <div>
+      <ButtonSecondary icon="close" @click.native="hideModal" />
-        <ButtonSecondary icon="close" @click.native="hideModal" />
-      </div>
     </template>
     <template #body>
       <div class="flex flex-col px-2">

components/collections/Edit.vue

@@ -2,9 +2,7 @@
   <SmartModal v-if="show" @close="hideModal">
     <template #header>
       <h3 class="heading">{{ $t("collection.edit") }}</h3>
-      <div>
+      <ButtonSecondary icon="close" @click.native="hideModal" />
-        <ButtonSecondary icon="close" @click.native="hideModal" />
-      </div>
     </template>
     <template #body>
       <div class="flex flex-col px-2">

components/collections/EditFolder.vue

@@ -2,9 +2,7 @@
   <SmartModal v-if="show" @close="$emit('hide-modal')">
     <template #header>
       <h3 class="heading">{{ $t("folder.edit") }}</h3>
-      <div>
+      <ButtonSecondary icon="close" @click.native="hideModal" />
-        <ButtonSecondary icon="close" @click.native="hideModal" />
-      </div>
     </template>
     <template #body>
       <div class="flex flex-col px-2">

components/collections/EditRequest.vue

@@ -2,9 +2,7 @@
   <SmartModal v-if="show" @close="hideModal">
     <template #header>
       <h3 class="heading">{{ $t("edit_request") }}</h3>
-      <div>
+      <ButtonSecondary icon="close" @click.native="hideModal" />
-        <ButtonSecondary icon="close" @click.native="hideModal" />
-      </div>
     </template>
     <template #body>
       <div class="flex flex-col px-2">

components/collections/graphql/AddFolder.vue

@@ -1,10 +1,8 @@
 <template>
   <SmartModal v-if="show" @close="$emit('hide-modal')">
     <template #header>
-      <h3 class="heading">{{ $t("new_folder") }}</h3>
+      <h3 class="heading">{{ $t("folder.new") }}</h3>
-      <div>
+      <ButtonSecondary icon="close" @click.native="hideModal" />
-        <ButtonSecondary icon="close" @click.native="hideModal" />
-      </div>
     </template>
     <template #body>
       <div class="flex flex-col px-2">

components/collections/graphql/Collection.vue

@@ -37,7 +37,7 @@
         v-tippy="{ theme: 'tooltip' }"
         icon="create_new_folder"
         :title="$t('folder.new')"
-        class="group-hover:inline-flex hidden"
+        class="hidden group-hover:inline-flex"
         @click.native="
           $emit('add-folder', {
             path: `${collectionIndex}`,

components/collections/graphql/Edit.vue

@@ -2,9 +2,7 @@
   <SmartModal v-if="show" @close="hideModal">
     <template #header>
       <h3 class="heading">{{ $t("collection.edit") }}</h3>
-      <div>
+      <ButtonSecondary icon="close" @click.native="hideModal" />
-        <ButtonSecondary icon="close" @click.native="hideModal" />
-      </div>
     </template>
     <template #body>
       <div class="flex flex-col px-2">

components/collections/graphql/EditFolder.vue

@@ -2,9 +2,7 @@
   <SmartModal v-if="show" @close="$emit('hide-modal')">
     <template #header>
       <h3 class="heading">{{ $t("folder.edit") }}</h3>
-      <div>
+      <ButtonSecondary icon="close" @click.native="hideModal" />
-        <ButtonSecondary icon="close" @click.native="hideModal" />
-      </div>
     </template>
     <template #body>
       <div class="flex flex-col px-2">

components/collections/graphql/EditRequest.vue

@@ -2,9 +2,7 @@
   <SmartModal v-if="show" @close="hideModal">
     <template #header>
       <h3 class="heading">{{ $t("edit_request") }}</h3>
-      <div>
+      <ButtonSecondary icon="close" @click.native="hideModal" />
-        <ButtonSecondary icon="close" @click.native="hideModal" />
-      </div>
     </template>
     <template #body>
       <div class="flex flex-col px-2">

components/collections/graphql/Folder.vue

@@ -39,7 +39,7 @@
         v-tippy="{ theme: 'tooltip' }"
         icon="create_new_folder"
         :title="$t('folder.new')"
-        class="group-hover:inline-flex hidden"
+        class="hidden group-hover:inline-flex"
         @click.native="$emit('add-folder', { folder, path: folderPath })"
       />
       <tippy ref="options" interactive trigger="click" theme="popover" arrow>

components/collections/graphql/Request.vue

@@ -46,7 +46,7 @@
         v-tippy="{ theme: 'tooltip' }"
         icon="replay"
         :title="$t('restore')"
-        class="group-hover:inline-flex hidden"
+        class="hidden group-hover:inline-flex"
         @click.native="!doc ? selectRequest() : {}"
       />
       <tippy ref="options" interactive trigger="click" theme="popover" arrow>

components/collections/graphql/index.vue

@@ -21,8 +21,8 @@
             py-2
             pr-2
             pl-9
-            focus:outline-none
             truncate
+            focus:outline-none
           "
         />
       </div>

components/collections/my/Collection.vue

@@ -54,7 +54,7 @@
         v-tippy="{ theme: 'tooltip' }"
         icon="create_new_folder"
         :title="$t('folder.new')"
-        class="group-hover:inline-flex hidden"
+        class="hidden group-hover:inline-flex"
         @click.native="
           $emit('add-folder', {
             folder: collection,

components/collections/my/Folder.vue

@@ -39,7 +39,7 @@
         v-tippy="{ theme: 'tooltip' }"
         icon="create_new_folder"
         :title="$t('folder.new')"
-        class="group-hover:inline-flex hidden"
+        class="hidden group-hover:inline-flex"
         @click.native="$emit('add-folder', { folder, path: folderPath })"
       />
       <tippy ref="options" interactive trigger="click" theme="popover" arrow>

components/collections/my/Request.vue

@@ -54,7 +54,7 @@
         v-tippy="{ theme: 'tooltip' }"
         icon="replay"
         :title="$t('restore')"
-        class="group-hover:inline-flex hidden"
+        class="hidden group-hover:inline-flex"
         @click.native="!doc ? selectRequest() : {}"
       />
       <tippy ref="options" interactive trigger="click" theme="popover" arrow>

components/environments/Add.vue

@@ -2,9 +2,7 @@
   <SmartModal v-if="show" @close="hideModal">
     <template #header>
       <h3 class="heading">{{ $t("new_environment") }}</h3>
-      <div>
+      <ButtonSecondary icon="close" @click.native="hideModal" />
-        <ButtonSecondary icon="close" @click.native="hideModal" />
-      </div>
     </template>
     <template #body>
       <div class="flex flex-col px-2">

components/environments/Edit.vue

@@ -2,9 +2,7 @@
   <SmartModal v-if="show" @close="hideModal">
     <template #header>
       <h3 class="heading">{{ $t("edit_environment") }}</h3>
-      <div>
+      <ButtonSecondary icon="close" @click.native="hideModal" />
-        <ButtonSecondary icon="close" @click.native="hideModal" />
-      </div>
     </template>
     <template #body>
       <div class="flex flex-col px-2">
@@ -23,7 +21,7 @@
           <label for="variableList" class="font-semibold px-4 pt-4 pb-4">
             {{ $t("env_variable_list") }}
           </label>
-          <div>
+          <div class="flex">
             <ButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('clear')"
@@ -77,7 +75,7 @@
               :placeholder="$t('count.value', { count: index + 1 })"
               :name="'value' + index"
             />
-            <div>
+            <div class="flex">
               <ButtonSecondary
                 id="variable"
                 v-tippy="{ theme: 'tooltip' }"

components/firebase/Login.vue

@@ -2,9 +2,7 @@
   <SmartModal v-if="show" dialog @close="hideModal">
     <template #header>
       <h3 class="heading">{{ $t("login_to_hoppscotch") }}</h3>
-      <div>
+      <ButtonSecondary icon="close" @click.native="hideModal" />
-        <ButtonSecondary icon="close" @click.native="hideModal" />
-      </div>
     </template>
     <template #body>
       <div v-if="mode === 'sign-in'" class="flex flex-col space-y-2">

components/history/graphql/Card.vue

@@ -26,7 +26,7 @@
         icon="delete"
         color="red"
         :title="$t('delete')"
-        class="group-hover:inline-flex hidden"
+        class="hidden group-hover:inline-flex"
         data-testid="delete_history_entry"
         @click.native="$emit('delete-entry')"
       />
@@ -34,7 +34,7 @@
         v-tippy="{ theme: 'tooltip' }"
         :title="expand ? $t('hide.more') : $t('show.more')"
         :icon="expand ? 'unfold_less' : 'unfold_more'"
-        class="group-hover:inline-flex hidden"
+        class="hidden group-hover:inline-flex"
         @click.native="expand = !expand"
       />
       <ButtonSecondary
@@ -51,12 +51,18 @@
       <span
         v-for="(line, index) in query"
         :key="`line-${index}`"
-        class="cursor-pointer font-mono text-secondaryLight px-4 truncate"
+        class="
+          cursor-pointer
+          font-mono
+          text-secondaryLight
+          px-4
+          whitespace-pre
+          truncate
+        "
         data-testid="restore_history_entry"
         @click="$emit('use-entry')"
+        >{{ line }}</span
       >
-        {{ line }}
-      </span>
     </div>
   </div>
 </template>

components/http/BodyParameters.vue

@@ -5,8 +5,8 @@
         bg-primary
         border-b border-dividerLight
         flex flex-1
-        pl-4
         top-upperSecondaryStickyFold
+        pl-4
         z-10
         sticky
         items-center

components/http/Headers.vue

@@ -5,8 +5,8 @@
         bg-primary
         border-b border-dividerLight
         flex flex-1
-        pl-4
         top-upperSecondaryStickyFold
+        pl-4
         z-10
         sticky
         items-center
@@ -103,42 +103,38 @@
           })
         "
       />
-      <div>
+      <ButtonSecondary
-        <ButtonSecondary
+        v-tippy="{ theme: 'tooltip' }"
-          v-tippy="{ theme: 'tooltip' }"
+        :title="
-          :title="
+          header.hasOwnProperty('active')
-            header.hasOwnProperty('active')
+            ? header.active
-              ? header.active
+              ? $t('action.turn_off')
-                ? $t('action.turn_off')
+              : $t('action.turn_on')
-                : $t('action.turn_on')
+            : $t('action.turn_off')
-              : $t('action.turn_off')
+        "
-          "
+        :icon="
-          :icon="
+          header.hasOwnProperty('active')
-            header.hasOwnProperty('active')
+            ? header.active
-              ? header.active
+              ? 'check_box'
-                ? 'check_box'
+              : 'check_box_outline_blank'
-                : 'check_box_outline_blank'
+            : 'check_box'
-              : 'check_box'
+        "
-          "
+        color="green"
-          color="green"
+        @click.native="
-          @click.native="
+          updateHeader(index, {
-            updateHeader(index, {
+            key: header.key,
-              key: header.key,
+            value: header.value,
-              value: header.value,
+            active: header.hasOwnProperty('active') ? !header.active : false,
-              active: header.hasOwnProperty('active') ? !header.active : false,
+          })
-            })
+        "
-          "
+      />
-        />
+      <ButtonSecondary
-      </div>
+        v-tippy="{ theme: 'tooltip' }"
-      <div>
+        :title="$t('delete')"
-        <ButtonSecondary
+        icon="delete"
-          v-tippy="{ theme: 'tooltip' }"
+        color="red"
-          :title="$t('delete')"
+        @click.native="deleteHeader(index)"
-          icon="delete"
+      />
-          color="red"
-          @click.native="deleteHeader(index)"
-        />
-      </div>
     </div>
     <div
       v-if="headers$.length === 0"

components/http/ImportCurl.vue

@@ -2,9 +2,7 @@
   <SmartModal v-if="show" @close="hideModal">
     <template #header>
       <h3 class="heading">{{ $t("import.curl") }}</h3>
-      <div>
+      <ButtonSecondary icon="close" @click.native="hideModal" />
-        <ButtonSecondary icon="close" @click.native="hideModal" />
-      </div>
     </template>
     <template #body>
       <div class="flex flex-col px-2">

components/http/Parameters.vue

@@ -124,42 +124,38 @@
           })
         "
       />
-      <div>
+      <ButtonSecondary
-        <ButtonSecondary
+        v-tippy="{ theme: 'tooltip' }"
-          v-tippy="{ theme: 'tooltip' }"
+        :title="
-          :title="
+          param.hasOwnProperty('active')
-            param.hasOwnProperty('active')
+            ? param.active
-              ? param.active
+              ? $t('action.turn_off')
-                ? $t('action.turn_off')
+              : $t('action.turn_on')
-                : $t('action.turn_on')
+            : $t('action.turn_off')
-              : $t('action.turn_off')
+        "
-          "
+        :icon="
-          :icon="
+          param.hasOwnProperty('active')
-            param.hasOwnProperty('active')
+            ? param.active
-              ? param.active
+              ? 'check_box'
-                ? 'check_box'
+              : 'check_box_outline_blank'
-                : 'check_box_outline_blank'
+            : 'check_box'
-              : 'check_box'
+        "
-          "
+        color="green"
-          color="green"
+        @click.native="
-          @click.native="
+          updateParam(index, {
-            updateParam(index, {
+            key: param.key,
-              key: param.key,
+            value: param.value,
-              value: param.value,
+            active: param.hasOwnProperty('active') ? !param.active : false,
-              active: param.hasOwnProperty('active') ? !param.active : false,
+          })
-            })
+        "
-          "
+      />
-        />
+      <ButtonSecondary
-      </div>
+        v-tippy="{ theme: 'tooltip' }"
-      <div>
+        :title="$t('delete')"
-        <ButtonSecondary
+        icon="delete"
-          v-tippy="{ theme: 'tooltip' }"
+        color="red"
-          :title="$t('delete')"
+        @click.native="deleteParam(index)"
-          icon="delete"
+      />
-          color="red"
-          @click.native="deleteParam(index)"
-        />
-      </div>
     </div>
     <div
       v-if="params$.length === 0"

components/http/TokenList.vue

@@ -2,9 +2,7 @@
   <SmartModal v-if="show" @close="hideModal">
     <template #header>
       <h3 class="heading">{{ $t("manage_token") }}</h3>
-      <div>
+      <ButtonSecondary icon="close" @click.native="hideModal" />
-        <ButtonSecondary icon="close" @click.native="hideModal" />
-      </div>
     </template>
     <template #body>
       <div class="flex flex-1">

components/lenses/renderers/HTMLLensRenderer.vue

@@ -15,7 +15,7 @@
       <label for="body" class="font-semibold px-4">
         {{ $t("response_body") }}
       </label>
-      <div>
+      <div class="flex">
         <ButtonSecondary
           v-if="response.body"
           v-tippy="{ theme: 'tooltip' }"

components/lenses/renderers/ImageLensRenderer.vue

@@ -15,7 +15,7 @@
       <label for="body" class="font-semibold px-4">
         {{ $t("response_body") }}
       </label>
-      <div>
+      <div class="flex">
         <ButtonSecondary
           v-if="response.body"
           ref="downloadResponse"

components/lenses/renderers/JSONLensRenderer.vue

@@ -15,7 +15,7 @@
       <label for="body" class="font-semibold px-4">
         {{ $t("response_body") }}
       </label>
-      <div>
+      <div class="flex">
         <ButtonSecondary
           v-if="response.body"
           ref="downloadResponse"

components/lenses/renderers/RawLensRenderer.vue

@@ -15,7 +15,7 @@
       <label for="body" class="font-semibold px-4">
         {{ $t("response_body") }}
       </label>
-      <div>
+      <div class="flex">
         <ButtonSecondary
           v-if="response.body"
           ref="downloadResponse"

components/lenses/renderers/XMLLensRenderer.vue

@@ -15,7 +15,7 @@
       <label for="body" class="font-semibold px-4">
         {{ $t("response_body") }}
       </label>
-      <div>
+      <div class="flex">
         <ButtonSecondary
           v-if="response.body"
           ref="downloadResponse"

components/realtime/Websocket.vue

@@ -96,7 +96,7 @@
                 name="message"
                 type="text"
               />
-              <div>
+              <div class="flex">
                 <ButtonSecondary
                   v-tippy="{ theme: 'tooltip' }"
                   :title="
@@ -121,7 +121,7 @@
                   "
                 />
               </div>
-              <div>
+              <div class="flex">
                 <ButtonSecondary
                   v-tippy="{ theme: 'tooltip' }"
                   :title="$t('delete')"

components/smart/ConfirmModal.vue

@@ -2,9 +2,7 @@
   <SmartModal v-if="show" @close="hideModal">
     <template #header>
       <h3 class="heading">{{ $t("modal.confirm") }}</h3>
-      <div>
+      <ButtonSecondary icon="close" @click.native="hideModal" />
-        <ButtonSecondary icon="close" @click.native="hideModal" />
-      </div>
     </template>
     <template #body>
       <div class="flex flex-col px-2">

components/smart/Modal.vue

@@ -9,7 +9,7 @@
       >
         <transition name="fade" appear>
           <div
-            class="bg-primaryDark opacity-100 inset-0 transition fixed"
+            class="bg-primaryDark opacity-90 inset-0 transition fixed"
             @touchstart="!dialog ? close() : null"
             @touchend="!dialog ? close() : null"
             @mouseup="!dialog ? close() : null"
@@ -17,7 +17,7 @@
           ></div>
         </transition>
         <span
-          class="hidden sm:inline-block sm:align-middle sm:h-screen"
+          class="hidden sm:h-screen sm:inline-block sm:align-middle"
           aria-hidden="true"
           >&#8203;</span
         >
@@ -44,7 +44,7 @@
               inline-block
               align-bottom
               overflow-hidden
-              sm:align-middle sm:max-w-md
+              sm:max-w-md sm:align-middle
             "
           >
             <div class="flex pl-2 items-center justify-between">

components/teams/Edit.vue

@@ -21,13 +21,11 @@
           <label for="memberList" class="font-semibold px-4 pt-4 pb-4">
             {{ $t("team.members") }}
           </label>
-          <div>
+          <ButtonSecondary
-            <ButtonSecondary
+            icon="add"
-              icon="add"
+            :label="$t('add.new')"
-              :label="$t('add.new')"
+            @click.native="addTeamMember"
-              @click.native="addTeamMember"
+          />
-            />
-          </div>
         </div>
         <div class="border-divider border rounded">
           <div
@@ -106,16 +104,14 @@
                 />
               </tippy>
             </span>
-            <div>
+            <ButtonSecondary
-              <ButtonSecondary
+              id="member"
-                id="member"
+              v-tippy="{ theme: 'tooltip' }"
-                v-tippy="{ theme: 'tooltip' }"
+              :title="$t('delete')"
-                :title="$t('delete')"
+              icon="delete"
-                icon="delete"
+              color="red"
-                color="red"
+              @click.native="removeExistingTeamMember(member.user.uid)"
-                @click.native="removeExistingTeamMember(member.user.uid)"
+            />
-              />
-            </div>
           </div>
           <div
             v-for="(member, index) in newMembers"
@@ -193,16 +189,14 @@
                 />
               </tippy>
             </span>
-            <div>
+            <ButtonSecondary
-              <ButtonSecondary
+              id="member"
-                id="member"
+              v-tippy="{ theme: 'tooltip' }"
-                v-tippy="{ theme: 'tooltip' }"
+              :title="$t('delete')"
-                :title="$t('delete')"
+              icon="delete"
-                icon="delete"
+              color="red"
-                color="red"
+              @click.native="removeTeamMember(index)"
-                @click.native="removeTeamMember(index)"
+            />
-              />
-            </div>
           </div>
         </div>
       </div>

components/teams/index.vue

@@ -17,9 +17,10 @@
       <p v-if="$apollo.queries.myTeams.loading">
         {{ $t("loading") }}
       </p>
-      <p v-if="myTeams.length === 0">
+      <div v-if="myTeams.length === 0" class="flex items-center">
-        <i class="material-icons">help_outline</i> {{ $t("team.create_new") }}
+        <i class="mr-4 material-icons">help_outline</i>
-      </p>
+        {{ $t("empty.teams") }}
+      </div>
       <div
         v-else
         class="

helpers/fb/analytics.ts

@@ -12,7 +12,6 @@ let analytics: firebase.analytics.Analytics | null
 type SettingsCustomDimensions = {
   usesProxy: boolean
   usesExtension: boolean
-  usesScrollInto: boolean
   syncCollections: boolean
   syncEnvironments: boolean
   syncHistory: boolean
@@ -61,7 +60,6 @@ function initSettingsListeners() {
     const conf: SettingsCustomDimensions = {
       usesProxy: settings.PROXY_ENABLED,
       usesExtension: settings.EXTENSIONS_ENABLED,
-      usesScrollInto: settings.SCROLL_INTO_ENABLED,
       syncCollections: settings.syncCollections,
       syncEnvironments: settings.syncEnvironments,
       syncHistory: settings.syncHistory,

lang/en-US.json

@@ -36,7 +36,8 @@
     "history": "History is empty",
     "headers": "Headers are empty",
     "tests": "Tests are empty",
-    "schema": "Connect to a GraphQL endpoint"
+    "schema": "Connect to a GraphQL endpoint",
+    "teams": "Teams are empty"
   },
   "count": {
     "message": "Message {count}",
@@ -393,7 +394,6 @@
   "login_success": "Successfully logged in",
   "logout": "Logout",
   "account": "Account",
-  "scrollInto_use_toggle": "Auto scroll",
   "sync": "Sync",
   "syncHistory": "History",
   "syncCollections": "Collections",

newstore/settings.ts

@@ -46,7 +46,6 @@ export type SettingsType = {
   syncHistory: boolean
   syncEnvironments: boolean
 
-  SCROLL_INTO_ENABLED: boolean
   PROXY_ENABLED: boolean
   PROXY_URL: string
   PROXY_KEY: string
@@ -73,7 +72,6 @@ export const defaultSettings: SettingsType = {
   syncHistory: true,
   syncEnvironments: true,
 
-  SCROLL_INTO_ENABLED: true,
   PROXY_ENABLED: false,
   PROXY_URL: "https://proxy.hoppscotch.io/",
   PROXY_KEY: "",

pages/graphql.vue

@@ -242,7 +242,7 @@
                         })
                       "
                     />
-                    <div>
+                    <span>
                       <ButtonSecondary
                         v-tippy="{ theme: 'tooltip' }"
                         :title="
@@ -269,8 +269,8 @@
                           })
                         "
                       />
-                    </div>
+                    </span>
-                    <div>
+                    <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"),