fix: fixed env var issues

packages/bruno-app/src/components/VariablesView/VariablesTable/StyledWrapper.js

@@ -4,6 +4,16 @@ const StyledWrapper = styled.div`
   .variable-name {
     color: ${(props) => props.theme.variables.name.color};
   }
+
+  .variable-name{
+    width:100px;
+  }
+
+  .variable-value {
+    max-width: 500px;
+    inline-size: 500px;
+    overflow-wrap: break-word;
+  }
 `
 
 export default StyledWrapper;

packages/bruno-app/src/components/VariablesView/VariablesTable/index.js

@@ -4,16 +4,16 @@ import StyledWrapper from './StyledWrapper';
 const VariablesTable = ({ variables }) => {
   return (
     <StyledWrapper>
-      <table className="w-full">
-        <tbody>
-          {variables.map((variable) => (
-            <tr key={variable.uid}>
-              <td className='variable-name text-yellow-600'>{variable.name}</td>
-              <td className='pl-2'>{variable.value}</td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
+      <div className="flex flex-col w-full">
+        {(variables && variables.length) ? variables.map((variable) => {
+          return (
+            <div key={variable.uid} className="flex">
+              <div className='variable-name text-yellow-600 text-right pr-2'>{variable.name}</div>
+              <div className='variable-value pl-2 whitespace-normal text-left flex-grow'>{variable.value}</div>
+            </div>
+          );
+        }) : null}
+      </div>
     </StyledWrapper>
   );
 };

packages/bruno-electron/src/ipc/network/index.js

@@ -128,6 +128,9 @@ const registerNetworkIpc = (mainWindow, watcher, lastOpenedCollections) => {
         data: result.data
       };
     } catch (error) {
+      // todo: better error handling
+      // need to convey the error to the UI
+      // and need not be always a network error
       deleteCancelToken(cancelTokenUid);
 
       if(error.response) {

packages/bruno-electron/src/ipc/network/interpolate-vars.js

@@ -1,5 +1,5 @@
 const Mustache = require('mustache');
-const { each, get } = require('lodash');
+const { each, get, forOwn } = require('lodash');
 
 // override the default escape function to prevent escaping
 Mustache.escape = function (value) {
@@ -17,9 +17,10 @@ const interpolateVars = (request, envVars = {}) => {
 
   request.url = interpolate(request.url);
 
-  each(request.headers, (header) => {
-    header.value = interpolate(header.value);
+  forOwn(request.headers, (value, key) => {
+    request.headers[key] = interpolate(value);
   });
+
   each(request.params, (param) => {
     param.value = interpolate(param.value);
   });