From c8234f37d119895e3babcb0f1b311de90ec08c05 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Fri, 28 Jan 2022 22:40:15 +0530
Subject: [PATCH] fix: display nested environment value in tooltip

---
 packages/hoppscotch-app/assets/scss/styles.scss       | 3 ++-
 packages/hoppscotch-app/components/smart/EnvInput.vue | 4 ++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/hoppscotch-app/assets/scss/styles.scss b/packages/hoppscotch-app/assets/scss/styles.scss
index 959fe38d9..4fd4b1007 100644
--- a/packages/hoppscotch-app/assets/scss/styles.scss
+++ b/packages/hoppscotch-app/assets/scss/styles.scss
@@ -146,7 +146,7 @@ a {
 
   font-size: 86%;
 
-  kbd {
+  xmp {
     @apply hidden;
     @apply sm:inline-flex;
     @apply font-sans;
@@ -156,6 +156,7 @@ a {
     @apply rounded-sm;
     @apply px-1;
     @apply ml-1;
+    @apply my-0;
     @apply truncate;
   }
 }
diff --git a/packages/hoppscotch-app/components/smart/EnvInput.vue b/packages/hoppscotch-app/components/smart/EnvInput.vue
index 7f4a82e00..5de669b5f 100644
--- a/packages/hoppscotch-app/components/smart/EnvInput.vue
+++ b/packages/hoppscotch-app/components/smart/EnvInput.vue
@@ -216,9 +216,9 @@ export default defineComponent({
             : "bg-accentDark text-accentContrast hover:bg-accent"
         }" v-tippy data-tippy-content="${this.getEnvName(
           this.aggregateEnvs.find((k) => k.key === envVar)?.sourceEnv
-        )} <kbd>${this.getEnvValue(
+        )}<xmp>${this.getEnvValue(
           this.aggregateEnvs.find((k) => k.key === envVar)?.value
-        )}</kbd>">${this.safe_tags_replace(
+        )}</xmp>">${this.safe_tags_replace(
           this.internalValue.substring(position.start, position.end + 1)
         )}</span>`
         startingPosition = position.end + 1