From b5b790e8a9d256eb63e02a58fa2b1cdf03cb88c6 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Sat, 12 Feb 2022 08:56:19 +0530
Subject: [PATCH] fix: environment value highlighting inside tooltip

---
 packages/hoppscotch-app/components/http/Request.vue       | 8 ++++----
 packages/hoppscotch-app/components/smart/EnvInput.vue     | 2 +-
 .../helpers/editor/extensions/HoppEnvironment.ts          | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/hoppscotch-app/components/http/Request.vue b/packages/hoppscotch-app/components/http/Request.vue
index ccc109085..657628176 100644
--- a/packages/hoppscotch-app/components/http/Request.vue
+++ b/packages/hoppscotch-app/components/http/Request.vue
@@ -1,9 +1,9 @@
 <template>
   <div
-    class="sticky top-0 z-10 flex flex-shrink-0 p-4 space-x-2 overflow-x-auto bg-primary hide-scrollbar"
+    class="sticky top-0 z-10 flex flex-shrink-0 p-4 overflow-x-auto space-x-2 bg-primary hide-scrollbar"
   >
     <div
-      class="flex flex-1 min-w-52 border border-divider rounded whitespace-nowrap overflow-auto hide-scrollbar"
+      class="flex flex-1 overflow-auto border rounded min-w-52 border-divider whitespace-nowrap hide-scrollbar"
     >
       <div class="relative flex">
         <label for="method">
@@ -18,7 +18,7 @@
               <span class="select-wrapper">
                 <input
                   id="method"
-                  class="flex px-4 py-2 transition font-semibold rounded-l cursor-pointer text-secondaryDark w-26 bg-primaryLight"
+                  class="flex px-4 py-2 font-semibold rounded-l cursor-pointer transition text-secondaryDark w-26 bg-primaryLight"
                   :value="newMethod"
                   :readonly="!isCustomMethod"
                   :placeholder="`${t('request.method')}`"
@@ -36,7 +36,7 @@
         </label>
       </div>
       <div
-        class="flex flex-1 border-l border-divider transition rounded-r bg-primaryLight whitespace-nowrap overflow-auto hide-scrollbar"
+        class="flex flex-1 overflow-auto border-l rounded-r border-divider transition bg-primaryLight whitespace-nowrap 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 939be8160..89794faca 100644
--- a/packages/hoppscotch-app/components/smart/EnvInput.vue
+++ b/packages/hoppscotch-app/components/smart/EnvInput.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex flex-1 items-center flex-shrink-0 whitespace-nowrap overflow-auto hide-scrollbar"
+    class="flex flex-1 flex-shrink-0 items-center whitespace-nowrap overflow-auto hide-scrollbar"
   >
     <div
       ref="editor"
diff --git a/packages/hoppscotch-app/helpers/editor/extensions/HoppEnvironment.ts b/packages/hoppscotch-app/helpers/editor/extensions/HoppEnvironment.ts
index 56eb46faa..6600f8853 100644
--- a/packages/hoppscotch-app/helpers/editor/extensions/HoppEnvironment.ts
+++ b/packages/hoppscotch-app/helpers/editor/extensions/HoppEnvironment.ts
@@ -66,7 +66,7 @@ const cursorTooltipField = (aggregateEnvs: AggregateEnvironment[]) =>
         )?.value ?? "not found"
       ).replace(/"/g, "&quot;")
 
-      const textContent = `${envName} <kbd>${envValue}</kbd>`
+      const textContent = `${envName} <xmp>${envValue}</xmp>`
 
       return {
         pos: start,