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>

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>

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',

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 {