fix(common): constrain variable tooltip to viewport for long values (hoppscotch#5878)

Co-authored-by: aviu16 <aviu16@users.noreply.github.com>
Co-authored-by: nivedin <nivedinp@gmail.com>
Co-authored-by: James George <25279263+jamesgeorge007@users.noreply.github.com>

Author: 3 people

packages/hoppscotch-common/assets/themes/tippy-themes.scss

@@ -16,6 +16,25 @@
       @apply flex-col;
     }
 
+    // Constrained tooltip styles to prevent overflow beyond the viewport
+    // when environment variable values are very long (fixes #5876)
+    .env-tooltip-constrained {
+      @apply flex-col;
+      @apply w-full;
+      @apply box-border;
+      @apply overflow-hidden;
+
+      .env-tooltip-value {
+        @apply break-words;
+        @apply break-all;
+        @apply whitespace-pre-wrap;
+        @apply overflow-hidden;
+        @apply inline-block;
+        @apply max-w-full;
+        @apply align-top;
+      }
+    }
+
     .tippy-content {
       @apply flex;
       @apply text-tiny;

packages/hoppscotch-common/src/helpers/editor/extensions/HoppEnvironment.ts

@@ -41,6 +41,10 @@ import {
   ENV_VAR_NAME_REGEX,
   HOPP_ENVIRONMENT_REGEX,
 } from "~/helpers/environment-regex"
+import {
+  constrainTooltipToViewport,
+  createTooltipValueRow,
+} from "~/helpers/utils/tooltip"
 
 const HOPP_ENV_HIGHLIGHT =
   "cursor-help transition rounded px-1 focus:outline-none mx-0.5 env-highlight"
@@ -49,6 +53,8 @@ const HOPP_COLLECTION_ENVIRONMENT_HIGHLIGHT = "collection-variable-highlight"
 const HOPP_ENVIRONMENT_HIGHLIGHT = "environment-variable-highlight"
 const HOPP_GLOBAL_ENVIRONMENT_HIGHLIGHT = "global-variable-highlight"
 const HOPP_ENV_HIGHLIGHT_NOT_FOUND = "environment-not-found-highlight"
+// Keep value rows above overlapping CodeMirror decoration layers inside tooltip content.
+const TOOLTIP_ENV_CONTAINER_Z_INDEX_CLASS = "!z-[1002]"
 
 const secretEnvironmentService = getService(SecretEnvironmentService)
 const currentEnvironmentValueService = getService(CurrentValueService)
@@ -282,36 +288,31 @@ const cursorTooltipField = (aggregateEnvs: AggregateEnvironment[]) =>
 
           const envContainer = document.createElement("div")
           tooltipContainer.appendChild(envContainer)
-          envContainer.className =
-            "flex flex-col items-start space-y-1 flex-1 w-full mt-2 !z-[1002]"
-
-          const initialValueBlock = document.createElement("div")
-          initialValueBlock.className = "flex items-center space-x-2"
-          const initialValueTitle = document.createElement("div")
-          initialValueTitle.textContent = "Initial"
-          initialValueTitle.className = "font-bold mr-4 "
-          const initialValue = document.createElement("span")
-          initialValue.textContent = envInitialValue || ""
-          initialValueBlock.appendChild(initialValueTitle)
-          initialValueBlock.appendChild(initialValue)
-
-          const currentValueBlock = document.createElement("div")
-          currentValueBlock.className = "flex items-center space-x-2"
-          const currentValueTitle = document.createElement("div")
-          currentValueTitle.textContent = "Current"
-          currentValueTitle.className = "font-bold mr-1.5"
-          const currentValue = document.createElement("span")
-          currentValue.textContent = envCurrentValue || ""
-          currentValueBlock.appendChild(currentValueTitle)
-          currentValueBlock.appendChild(currentValue)
-
-          envContainer.appendChild(initialValueBlock)
-          envContainer.appendChild(currentValueBlock)
-
-          tooltipContainer.className = "tippy-content env-tooltip-content"
+          envContainer.className = `flex flex-col items-start space-y-1 flex-1 w-full mt-2 ${TOOLTIP_ENV_CONTAINER_Z_INDEX_CLASS}`
+          envContainer.style.overflow = "hidden"
+
+          // Use createTooltipValueRow for overflow-safe value display
+          const initialValueRow = createTooltipValueRow(
+            "Initial",
+            envInitialValue
+          )
+          const currentValueRow = createTooltipValueRow(
+            "Current",
+            envCurrentValue
+          )
+
+          envContainer.appendChild(initialValueRow)
+          envContainer.appendChild(currentValueRow)
+
+          tooltipContainer.className =
+            "tippy-content env-tooltip-content env-tooltip-constrained"
           dom.className = "tippy-box"
           dom.dataset.theme = "tooltip"
           dom.appendChild(tooltipContainer)
+
+          // Apply viewport-aware overflow constraints to the tooltip
+          constrainTooltipToViewport(dom, tooltipContainer)
+
           return { dom }
         },
       }

packages/hoppscotch-common/src/helpers/editor/extensions/HoppPredefinedVariables.ts

@@ -9,6 +9,10 @@ import { HOPP_SUPPORTED_PREDEFINED_VARIABLES } from "@hoppscotch/data"
 
 import IconSquareAsterisk from "~icons/lucide/square-asterisk?raw"
 import { isComment } from "./helpers"
+import {
+  constrainTooltipToViewport,
+  truncateText,
+} from "~/helpers/utils/tooltip"
 
 const HOPP_PREDEFINED_VARIABLES_REGEX = /(<<\$[a-zA-Z0-9-_]+>>)/g
 
@@ -76,7 +80,7 @@ const cursorTooltipField = () =>
       const variableIcon = `<span class="inline-flex items-center justify-center my-1">${IconSquareAsterisk}</span>`
       const variableDescription =
         variable !== undefined
-          ? `${variableName} - ${variable.description}`
+          ? `${variableName} - ${truncateText(variable.description)}`
           : `${variableName} is not a valid predefined variable.`
 
       return {
@@ -114,14 +118,18 @@ const cursorTooltipField = () =>
           tooltipContainer.appendChild(envContainer)
           envContainer.className =
             "flex flex-col items-start space-y-1 flex-1 w-full mt-2"
+          envContainer.style.overflow = "hidden"
 
           const valueBlock = document.createElement("div")
-          valueBlock.className = "flex items-center space-x-2"
+          valueBlock.className = "flex items-start space-x-2"
+          valueBlock.style.width = "100%"
           const valueTitle = document.createElement("div")
           const value = document.createElement("span")
-          value.textContent = variableDescription || ""
+          value.className = "env-tooltip-value"
+          value.textContent = variableDescription
           valueTitle.textContent = "Value"
-          valueTitle.className = "font-bold mr-4 "
+          valueTitle.className = "font-bold mr-4"
+          valueTitle.style.flexShrink = "0"
           valueBlock.appendChild(valueTitle)
           valueBlock.appendChild(value)
 
@@ -130,9 +138,14 @@ const cursorTooltipField = () =>
           dom.className = "tippy-box"
           dom.dataset.theme = "tooltip"
 
-          tooltipContainer.className = "tippy-content env-tooltip-content"
+          tooltipContainer.className =
+            "tippy-content env-tooltip-content env-tooltip-constrained"
 
           dom.appendChild(tooltipContainer)
+
+          // Apply viewport-aware overflow constraints
+          constrainTooltipToViewport(dom, tooltipContainer)
+
           return { dom }
         },
       }