From 0895d651883621e8573882a0472f29f057624775 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Wed, 9 Feb 2022 15:36:00 +0530
Subject: [PATCH] feat: fix codemirror width

---
 .../components/environments/Edit.vue          |  7 -----
 .../components/graphql/RequestOptions.vue     |  9 -------
 .../components/http/Authorization.vue         | 26 +++----------------
 .../components/http/BodyParameters.vue        | 14 ----------
 .../components/http/Headers.vue               | 16 ------------
 .../components/http/Parameters.vue            | 14 ----------
 .../components/http/Request.vue               | 14 ----------
 .../components/http/URLEncodedParams.vue      | 14 ----------
 .../components/realtime/Socketio.vue          |  8 ++----
 .../components/smart/EnvInput.vue             |  7 ++++-
 .../helpers/editor/themes/baseTheme.ts        |  1 +
 11 files changed, 13 insertions(+), 117 deletions(-)

diff --git a/packages/hoppscotch-app/components/environments/Edit.vue b/packages/hoppscotch-app/components/environments/Edit.vue
index 0f7e70fa4..fdef5a59b 100644
--- a/packages/hoppscotch-app/components/environments/Edit.vue
+++ b/packages/hoppscotch-app/components/environments/Edit.vue
@@ -61,13 +61,6 @@
             />
             <SmartEnvInput
               v-model="variable.value"
-              styles="
-                bg-transparent
-                flex
-                flex-1
-                py-1
-                px-4
-              "
               :placeholder="`${$t('count.value', { count: index + 1 })}`"
               :name="'value' + index"
             />
diff --git a/packages/hoppscotch-app/components/graphql/RequestOptions.vue b/packages/hoppscotch-app/components/graphql/RequestOptions.vue
index f8de9fbc2..5567ba862 100644
--- a/packages/hoppscotch-app/components/graphql/RequestOptions.vue
+++ b/packages/hoppscotch-app/components/graphql/RequestOptions.vue
@@ -166,15 +166,6 @@
               :spellcheck="false"
               :value="header.key"
               autofocus
-              styles="
-                  bg-transparent
-                  flex
-                  flex-1
-                  py-1
-                  px-4
-                  truncate
-                "
-              class="flex-1 !flex"
               @input="
                 updateHeader(index, {
                   key: $event,
diff --git a/packages/hoppscotch-app/components/http/Authorization.vue b/packages/hoppscotch-app/components/http/Authorization.vue
index c528c949e..279f26bb4 100644
--- a/packages/hoppscotch-app/components/http/Authorization.vue
+++ b/packages/hoppscotch-app/components/http/Authorization.vue
@@ -158,50 +158,32 @@
             <SmartEnvInput
               v-model="basicUsername"
               :placeholder="$t('authorization.username')"
-              styles="bg-transparent flex flex-1 py-1 px-4"
             />
           </div>
           <div class="flex flex-1 border-b border-dividerLight">
             <SmartEnvInput
               v-model="basicPassword"
               :placeholder="$t('authorization.password')"
-              styles="bg-transparent flex flex-1 py-1 px-4"
             />
           </div>
         </div>
         <div v-if="authType === 'bearer'">
           <div class="flex flex-1 border-b border-dividerLight">
-            <SmartEnvInput
-              v-model="bearerToken"
-              placeholder="Token"
-              styles="bg-transparent flex flex-1 py-1 px-4"
-            />
+            <SmartEnvInput v-model="bearerToken" placeholder="Token" />
           </div>
         </div>
         <div v-if="authType === 'oauth-2'">
           <div class="flex flex-1 border-b border-dividerLight">
-            <SmartEnvInput
-              v-model="oauth2Token"
-              placeholder="Token"
-              styles="bg-transparent flex flex-1 py-1 px-4"
-            />
+            <SmartEnvInput v-model="oauth2Token" placeholder="Token" />
           </div>
           <HttpOAuth2Authorization />
         </div>
         <div v-if="authType === 'api-key'">
           <div class="flex flex-1 border-b border-dividerLight">
-            <SmartEnvInput
-              v-model="apiKey"
-              placeholder="Key"
-              styles="bg-transparent flex flex-1 py-1 px-4"
-            />
+            <SmartEnvInput v-model="apiKey" placeholder="Key" />
           </div>
           <div class="flex flex-1 border-b border-dividerLight">
-            <SmartEnvInput
-              v-model="apiValue"
-              placeholder="Value"
-              styles="bg-transparent flex flex-1 py-1 px-4"
-            />
+            <SmartEnvInput v-model="apiValue" placeholder="Value" />
           </div>
           <div class="flex items-center border-b border-dividerLight">
             <label class="ml-4 text-secondaryLight">
diff --git a/packages/hoppscotch-app/components/http/BodyParameters.vue b/packages/hoppscotch-app/components/http/BodyParameters.vue
index af7225e87..5d8cb6155 100644
--- a/packages/hoppscotch-app/components/http/BodyParameters.vue
+++ b/packages/hoppscotch-app/components/http/BodyParameters.vue
@@ -36,13 +36,6 @@
       <SmartEnvInput
         v-model="param.key"
         :placeholder="`${$t('count.parameter', { count: index + 1 })}`"
-        styles="
-          bg-transparent
-          flex
-          flex-1
-          py-1
-          px-4
-        "
         @change="
           updateBodyParam(index, {
             key: $event,
@@ -66,13 +59,6 @@
         <SmartEnvInput
           v-model="param.value"
           :placeholder="`${$t('count.value', { count: index + 1 })}`"
-          styles="
-            bg-transparent
-            flex
-            flex-1
-            py-1
-            px-4
-          "
           @change="
             updateBodyParam(index, {
               key: param.key,
diff --git a/packages/hoppscotch-app/components/http/Headers.vue b/packages/hoppscotch-app/components/http/Headers.vue
index a182133a2..d7a6df0d7 100644
--- a/packages/hoppscotch-app/components/http/Headers.vue
+++ b/packages/hoppscotch-app/components/http/Headers.vue
@@ -49,15 +49,6 @@
           :spellcheck="false"
           :value="header.key"
           autofocus
-          styles="
-            bg-transparent
-            flex
-            flex-1
-            py-1
-            px-4
-            truncate
-          "
-          class="flex-1 !flex"
           @input="
             updateHeader(index, {
               key: $event,
@@ -69,13 +60,6 @@
         <SmartEnvInput
           v-model="header.value"
           :placeholder="`${t('count.value', { count: index + 1 })}`"
-          styles="
-            bg-transparent
-            flex
-            flex-1
-            py-1
-            px-4
-          "
           @change="
             updateHeader(index, {
               key: header.key,
diff --git a/packages/hoppscotch-app/components/http/Parameters.vue b/packages/hoppscotch-app/components/http/Parameters.vue
index 3ef27fa0c..93d201d69 100644
--- a/packages/hoppscotch-app/components/http/Parameters.vue
+++ b/packages/hoppscotch-app/components/http/Parameters.vue
@@ -46,13 +46,6 @@
         <SmartEnvInput
           v-model="param.key"
           :placeholder="`${t('count.parameter', { count: index + 1 })}`"
-          styles="
-            bg-transparent
-            flex
-            flex-1
-            py-1
-            px-4
-          "
           @change="
             updateParam(index, {
               key: $event,
@@ -64,13 +57,6 @@
         <SmartEnvInput
           v-model="param.value"
           :placeholder="`${t('count.value', { count: index + 1 })}`"
-          styles="
-            bg-transparent
-            flex
-            flex-1
-            py-1
-            px-4
-          "
           @change="
             updateParam(index, {
               key: param.key,
diff --git a/packages/hoppscotch-app/components/http/Request.vue b/packages/hoppscotch-app/components/http/Request.vue
index 7afd0ed44..e6fd3686e 100644
--- a/packages/hoppscotch-app/components/http/Request.vue
+++ b/packages/hoppscotch-app/components/http/Request.vue
@@ -37,20 +37,6 @@
         <SmartEnvInput
           v-model="newEndpoint"
           :placeholder="`${t('request.url')}`"
-          styles="
-            bg-primaryLight
-            border border-divider
-            flex
-            flex-1
-            rounded-r
-            text-secondaryDark
-            min-w-32
-            py-1
-            px-4
-            hover:border-dividerDark
-            focus-visible:border-dividerDark
-            focus-visible:bg-transparent
-          "
           @enter="newSendRequest()"
           @paste="onPasteUrl($event)"
         />
diff --git a/packages/hoppscotch-app/components/http/URLEncodedParams.vue b/packages/hoppscotch-app/components/http/URLEncodedParams.vue
index e0219ba28..6e19680c3 100644
--- a/packages/hoppscotch-app/components/http/URLEncodedParams.vue
+++ b/packages/hoppscotch-app/components/http/URLEncodedParams.vue
@@ -46,13 +46,6 @@
         <SmartEnvInput
           v-model="param.key"
           :placeholder="`${t('count.parameter', { count: index + 1 })}`"
-          styles="
-            bg-transparent
-            flex
-            flex-1
-            py-1
-            px-4
-          "
           @change="
             updateUrlEncodedParam(index, {
               key: $event,
@@ -64,13 +57,6 @@
         <SmartEnvInput
           v-model="param.value"
           :placeholder="`${t('count.value', { count: index + 1 })}`"
-          styles="
-            bg-transparent
-            flex
-            flex-1
-            py-1
-            px-4
-          "
           @change="
             updateUrlEncodedParam(index, {
               key: param.key,
diff --git a/packages/hoppscotch-app/components/realtime/Socketio.vue b/packages/hoppscotch-app/components/realtime/Socketio.vue
index 147ef0968..b35375101 100644
--- a/packages/hoppscotch-app/components/realtime/Socketio.vue
+++ b/packages/hoppscotch-app/components/realtime/Socketio.vue
@@ -18,7 +18,7 @@
           class="hide-scrollbar !overflow-auto flex flex-col"
         >
           <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="inline-flex flex-1 space-x-2">
               <div class="flex flex-1">
@@ -193,11 +193,7 @@
           >
             <div class="w-2/3 border-r border-dividerLight">
               <div class="flex flex-1 border-b border-dividerLight">
-                <SmartEnvInput
-                  v-model="bearerToken"
-                  placeholder="Token"
-                  styles="bg-transparent flex flex-1 py-1 px-4"
-                />
+                <SmartEnvInput v-model="bearerToken" placeholder="Token" />
               </div>
             </div>
             <div
diff --git a/packages/hoppscotch-app/components/smart/EnvInput.vue b/packages/hoppscotch-app/components/smart/EnvInput.vue
index 30741f57e..5b997f784 100644
--- a/packages/hoppscotch-app/components/smart/EnvInput.vue
+++ b/packages/hoppscotch-app/components/smart/EnvInput.vue
@@ -150,8 +150,10 @@ watch(editor, () => {
 <style lang="scss" scoped>
 .env-input-container {
   @apply relative;
-  @apply inline-grid;
+  @apply inline-flex;
   @apply flex-1;
+  @apply bg-red-100;
+  @apply border border-red-400;
 }
 
 [contenteditable] {
@@ -180,6 +182,9 @@ watch(editor, () => {
   @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 {
diff --git a/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts b/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts
index 04862bc31..bb27c7c21 100644
--- a/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts
+++ b/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts
@@ -33,6 +33,7 @@ export const baseTheme = EditorView.theme({
     fontSize: "var(--font-size-body)",
     height: "100%",
     width: "100%",
+    flex: "1",
   },
   ".cm-content": {
     caretColor: "var(--secondary-light-color)",