fix: width, auto grow and horizontal scroll on envinput

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"

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>