fix: display nested environment value in tooltip

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;
   }
 }

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