From abc7b4b6f3b6a684e08bf0426ed6ef3c21b43363 Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Fri, 2 Jun 2023 20:26:18 +0530
Subject: [PATCH] chore: improve mobile responsiveness on environment selector
 (#3100)

---
 .../src/components/environments/Selector.vue  | 22 +++++++++++++------
 .../src/components/smart/Windows.vue          |  9 +++++---
 2 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/packages/hoppscotch-common/src/components/environments/Selector.vue b/packages/hoppscotch-common/src/components/environments/Selector.vue
index 3674700a54..955e9af2fd 100644
--- a/packages/hoppscotch-common/src/components/environments/Selector.vue
+++ b/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()
 
diff --git a/packages/hoppscotch-ui/src/components/smart/Windows.vue b/packages/hoppscotch-ui/src/components/smart/Windows.vue
index 4daa85f8ba..a67f16fdae 100644
--- a/packages/hoppscotch-ui/src/components/smart/Windows.vue
+++ b/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(