From 650ad0fe60d43bb07cc54162f53734131ac65483 Mon Sep 17 00:00:00 2001
From: statxc <tyleradams93226@gmail.com>
Date: Tue, 24 Mar 2026 14:35:59 +0200
Subject: [PATCH] fix: overlapping help text issue in Environment Variables
 (#7225)

* fix: overlaping help text

* fix: add tooltip-mod class to InfoTip in VarsTable to fix overlapping help text

* chore: fix width for request pane infotip

---------

Co-authored-by: statxc <statxc@users.noreply.github.com>
Co-authored-by: Ubuntu <ubuntu@vps-eae40731.vps.ovh.ca>
Co-authored-by: Sid <siddharth@usebruno.com>
---
 .../bruno-app/src/components/RequestPane/QueryParams/index.js   | 2 +-
 .../src/components/RequestPane/Vars/VarsTable/index.js          | 2 +-
 packages/bruno-app/src/globalStyles.js                          | 1 +
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/bruno-app/src/components/RequestPane/QueryParams/index.js b/packages/bruno-app/src/components/RequestPane/QueryParams/index.js
index a5fdf981a..a63e9eb83 100644
--- a/packages/bruno-app/src/components/RequestPane/QueryParams/index.js
+++ b/packages/bruno-app/src/components/RequestPane/QueryParams/index.js
@@ -153,7 +153,7 @@ const QueryParams = ({ item, collection }) => {
 
         <div className="mb-3 title text-xs flex items-stretch">
           <span>Path</span>
-          <InfoTip infotipId="path-param-InfoTip">
+          <InfoTip className="tooltip-mod" infotipId="path-param-InfoTip">
             <div>
               Path variables are automatically added whenever the
               <code className="font-mono mx-2">:name</code>
diff --git a/packages/bruno-app/src/components/RequestPane/Vars/VarsTable/index.js b/packages/bruno-app/src/components/RequestPane/Vars/VarsTable/index.js
index 747d3eab4..5530310c4 100644
--- a/packages/bruno-app/src/components/RequestPane/Vars/VarsTable/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Vars/VarsTable/index.js
@@ -57,7 +57,7 @@ const VarsTable = ({ item, collection, vars, varType }) => {
       name: varType === 'request' ? 'Value' : (
         <div className="flex items-center">
           <span>Expr</span>
-          <InfoTip content="You can write any valid JS expression here" infotipId={`request-${varType}-var`} />
+          <InfoTip className="tooltip-mod" content="You can write any valid JS expression here" infotipId={`request-${varType}-var`} />
         </div>
       ),
       placeholder: varType === 'request' ? 'Value' : 'Expr',
diff --git a/packages/bruno-app/src/globalStyles.js b/packages/bruno-app/src/globalStyles.js
index 64cc8dc6f..84e7e35b8 100644
--- a/packages/bruno-app/src/globalStyles.js
+++ b/packages/bruno-app/src/globalStyles.js
@@ -29,6 +29,7 @@ const GlobalStyle = createGlobalStyle`
     border-radius: 4px !important;
     opacity: 1 !important;
     z-index: 9999 !important;
+    max-width: 100%;
   }
 
   .btn {