From 5b24224ccdf26f6d17d813a952266255fb5f97d2 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Wed, 9 Feb 2022 15:53:48 +0530
Subject: [PATCH] fix: envinput styles

---
 .../components/http/Request.vue               |  4 +-
 .../components/smart/EnvInput.vue             | 38 ++-----------------
 2 files changed, 6 insertions(+), 36 deletions(-)

diff --git a/packages/hoppscotch-app/components/http/Request.vue b/packages/hoppscotch-app/components/http/Request.vue
index e6fd3686e..bc855ef04 100644
--- a/packages/hoppscotch-app/components/http/Request.vue
+++ b/packages/hoppscotch-app/components/http/Request.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="sticky top-0 z-10 flex flex-shrink-0 p-4 overflow-x-auto space-x-2 bg-primary hide-scrollbar"
+    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">
       <div class="relative flex">
@@ -33,7 +33,7 @@
           </tippy>
         </label>
       </div>
-      <div class="flex flex-1">
+      <div class="flex flex-1 border rounded-r border-divider">
         <SmartEnvInput
           v-model="newEndpoint"
           :placeholder="`${t('request.url')}`"
diff --git a/packages/hoppscotch-app/components/smart/EnvInput.vue b/packages/hoppscotch-app/components/smart/EnvInput.vue
index 5b997f784..cbfd28c64 100644
--- a/packages/hoppscotch-app/components/smart/EnvInput.vue
+++ b/packages/hoppscotch-app/components/smart/EnvInput.vue
@@ -150,44 +150,14 @@ watch(editor, () => {
 <style lang="scss" scoped>
 .env-input-container {
   @apply relative;
-  @apply inline-flex;
+  @apply flex;
   @apply flex-1;
-  @apply bg-red-100;
-  @apply border border-red-400;
-}
-
-[contenteditable] {
-  @apply select-text;
-  @apply text-secondaryDark;
-
-  &:empty {
-    @apply leading-loose;
-
-    &::before {
-      @apply text-secondary;
-      @apply opacity-35;
-      @apply pointer-events-none;
-
-      content: attr(placeholder);
-    }
-  }
+  @apply items-center;
 }
 
 .env-input {
   @apply flex;
-  @apply items-center;
-  @apply justify-items-start;
-  @apply whitespace-nowrap;
-  @apply overflow-x-auto;
-  @apply overflow-y-hidden;
-  @apply resize-none;
-  @apply focus:outline-none;
-  @apply bg-green-100;
-  @apply border border-green-400;
-  @apply w-full;
-}
-
-.env-input::-webkit-scrollbar {
-  @apply hidden;
+  @apply flex-1;
+  @apply px-2;
 }
 </style>