From 12645111133fc4b22d21fa6aa112c2d131cd3b5b Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Fri, 11 Feb 2022 11:18:43 +0530
Subject: [PATCH] fix: width, auto grow and horizontal scroll on envinput

---
 .../components/http/Request.vue               |  6 ++++--
 .../components/smart/EnvInput.vue             | 20 ++++---------------
 2 files changed, 8 insertions(+), 18 deletions(-)

diff --git a/packages/hoppscotch-app/components/http/Request.vue b/packages/hoppscotch-app/components/http/Request.vue
index 444e40f7..ccc10908 100644
--- a/packages/hoppscotch-app/components/http/Request.vue
+++ b/packages/hoppscotch-app/components/http/Request.vue
@@ -2,7 +2,9 @@
   <div
     class="sticky top-0 z-10 flex flex-shrink-0 p-4 space-x-2 overflow-x-auto bg-primary hide-scrollbar"
   >
-    <div class="flex flex-1 border border-divider rounded">
+    <div
+      class="flex flex-1 min-w-52 border border-divider rounded whitespace-nowrap overflow-auto hide-scrollbar"
+    >
       <div class="relative flex">
         <label for="method">
           <tippy
@@ -34,7 +36,7 @@
         </label>
       </div>
       <div
-        class="flex flex-1 border-l border-divider transition rounded-r bg-primaryLight"
+        class="flex flex-1 border-l border-divider transition rounded-r bg-primaryLight whitespace-nowrap overflow-auto hide-scrollbar"
       >
         <SmartEnvInput
           v-model="newEndpoint"
diff --git a/packages/hoppscotch-app/components/smart/EnvInput.vue b/packages/hoppscotch-app/components/smart/EnvInput.vue
index 9b4de1d5..79386bbf 100644
--- a/packages/hoppscotch-app/components/smart/EnvInput.vue
+++ b/packages/hoppscotch-app/components/smart/EnvInput.vue
@@ -4,11 +4,13 @@
 -->
 
 <template>
-  <div class="env-input-container">
+  <div
+    class="flex flex-1 items-center flex-shrink-0 whitespace-nowrap overflow-auto hide-scrollbar"
+  >
     <div
       ref="editor"
       :placeholder="placeholder"
-      class="env-input"
+      class="flex flex-1"
       :class="styles"
       @keydown.enter.prevent="emit('enter', $event)"
       @keyup="emit('keyup', $event)"
@@ -146,17 +148,3 @@ watch(editor, () => {
   }
 })
 </script>
-
-<style lang="scss" scoped>
-.env-input-container {
-  @apply relative;
-  @apply flex;
-  @apply flex-1;
-  @apply items-center;
-}
-
-.env-input {
-  @apply flex;
-  @apply flex-1;
-}
-</style>