chore: improve mobile responsiveness on environment selector (#3100)

packages/hoppscotch-common/src/components/environments/Selector.vue

@@ -11,13 +11,14 @@
       class="bg-transparent border-b border-dividerLight select-wrapper"
     >
       <HoppButtonSecondary
-        v-if="selectedEnv.type !== 'NO_ENV_SELECTED'"
-        :label="selectedEnv.name"
-        class="flex-1 !justify-start pr-8 rounded-none"
-      />
-      <HoppButtonSecondary
-        v-else
-        :label="`${t('environment.select')}`"
+        :icon="IconLayers"
+        :label="
+          mdAndLarger
+            ? selectedEnv.type !== 'NO_ENV_SELECTED'
+              ? selectedEnv.name
+              : `${t('environment.select')}`
+            : ''
+        "
         class="flex-1 !justify-start pr-8 rounded-none"
       />
     </span>
@@ -58,6 +59,7 @@
             <HoppSmartItem
               v-for="(gen, index) in myEnvironments"
               :key="`gen-${index}`"
+              :icon="IconLayers"
               :label="gen.name"
               :info-icon="index === selectedEnv.index ? IconCheck : undefined"
               :active-info-icon="index === selectedEnv.index"
@@ -99,6 +101,7 @@
               <HoppSmartItem
                 v-for="(gen, index) in teamEnvironmentList"
                 :key="`gen-team-${index}`"
+                :icon="IconLayers"
                 :label="gen.environment.name"
                 :info-icon="
                   gen.id === selectedEnv.teamEnvID ? IconCheck : undefined
@@ -148,6 +151,7 @@
 <script lang="ts" setup>
 import { computed, ref, watch } from "vue"
 import IconCheck from "~icons/lucide/check"
+import IconLayers from "~icons/lucide/layers"
 import { TippyComponent } from "vue-tippy"
 import { useI18n } from "~/composables/i18n"
 import { GQLError } from "~/helpers/backend/GQLClient"
@@ -160,6 +164,10 @@ import {
 import { workspaceStatus$ } from "~/newstore/workspace"
 import TeamEnvironmentAdapter from "~/helpers/teams/TeamEnvironmentAdapter"
 import { useColorMode } from "@composables/theming"
+import { breakpointsTailwind, useBreakpoints } from "@vueuse/core"
+
+const breakpoints = useBreakpoints(breakpointsTailwind)
+const mdAndLarger = breakpoints.greater("md")
 
 const t = useI18n()
 

packages/hoppscotch-ui/src/components/smart/Windows.vue

@@ -100,7 +100,7 @@
         </div>
       </div>
 
-      <div v-if="hasActions" class="w-64">
+      <div v-if="hasActions" :class="mdAndLarger ? 'w-64' : 'w-16'">
         <slot name="actions" />
       </div>
 
@@ -115,7 +115,7 @@
         }"
         :style="[
           `--thumb-width: ${scrollThumb.width}px`,
-          `width: calc(100% - ${hasActions ? '19rem' : '3rem'})`,
+          `width: calc(100% - ${hasActions ? mdAndLarger ? '19rem' : '7rem' : '3rem'})`,
         ]"
         id="myRange"
       />
@@ -144,7 +144,7 @@ import {
   nextTick,
   useSlots,
 } from "vue"
-import { useElementSize } from "@vueuse/core"
+import { breakpointsTailwind, useBreakpoints, useElementSize } from "@vueuse/core"
 import type { Slot } from "vue"
 import draggable from "vuedraggable-es"
 import { HoppUIPluginOptions, HOPP_UI_OPTIONS } from "./../../index"
@@ -167,6 +167,9 @@ export type TabProvider = {
   removeTabEntry: (tabID: string) => void
 }
 
+const breakpoints = useBreakpoints(breakpointsTailwind)
+const mdAndLarger = breakpoints.greater("md")
+
 const { t } = inject<HoppUIPluginOptions>(HOPP_UI_OPTIONS) ?? {}
 
 const props = withDefaults(