refactor: composables for breakpoints

packages/hoppscotch-app/components/http/Request.vue

@@ -125,11 +125,7 @@
       </span>
       <ButtonSecondary
         class="ml-2 rounded rounded-r-none"
-        :label="
-          windowInnerWidth.x.value >= 768 && COLUMN_LAYOUT
-            ? `${t('request.save')}`
-            : ''
-        "
+        :label="mdAndLarger && COLUMN_LAYOUT ? `${t('request.save')}` : ''"
         filled
         svg="save"
         @click.native="saveRequest()"
@@ -217,6 +213,7 @@
 import { computed, ref, watch } from "@nuxtjs/composition-api"
 import { isLeft, isRight } from "fp-ts/lib/Either"
 import * as E from "fp-ts/Either"
+import { breakpointsTailwind, useBreakpoints } from "@vueuse/core"
 import {
   updateRESTResponse,
   restEndpoint$,
@@ -245,7 +242,6 @@ import { copyToClipboard } from "~/helpers/utils/clipboard"
 import { useSetting } from "~/newstore/settings"
 import { overwriteRequestTeams } from "~/helpers/teams/utils"
 import { apolloClient } from "~/helpers/apollo"
-import useWindowSize from "~/helpers/utils/useWindowSize"
 import { createShortcode } from "~/helpers/backend/mutations/Shortcode"
 
 const t = useI18n()
@@ -555,6 +551,8 @@ const isCustomMethod = computed(() => {
 
 const requestName = useRESTRequestName()
 
-const windowInnerWidth = useWindowSize()
 const COLUMN_LAYOUT = useSetting("COLUMN_LAYOUT")
+
+const breakpoints = useBreakpoints(breakpointsTailwind)
+const mdAndLarger = breakpoints.greater("md")
 </script>