fix: fix overflow issues in keyval editors in the app

packages/bruno-app/src/components/RequestPane/FormUrlEncodedParams/StyledWrapper.js

@@ -5,6 +5,7 @@ const Wrapper = styled.div`
     width: 100%;
     border-collapse: collapse;
     font-weight: 600;
+    table-layout: fixed;
 
     thead,
     td {
@@ -18,6 +19,14 @@ const Wrapper = styled.div`
     }
     td {
       padding: 6px 10px;
+
+      &:nth-child(1) {
+        width: 30%;
+      }
+
+      &:nth-child(3) {
+        width: 70px;
+      }
     }
   }
 

packages/bruno-app/src/components/RequestPane/MultipartFormParams/StyledWrapper.js

@@ -5,6 +5,7 @@ const Wrapper = styled.div`
     width: 100%;
     border-collapse: collapse;
     font-weight: 600;
+    table-layout: fixed;
 
     thead,
     td {
@@ -18,6 +19,14 @@ const Wrapper = styled.div`
     }
     td {
       padding: 6px 10px;
+
+      &:nth-child(1) {
+        width: 30%;
+      }
+
+      &:nth-child(3) {
+        width: 70px;
+      }
     }
   }
 

packages/bruno-app/src/components/RequestPane/QueryParams/StyledWrapper.js

@@ -5,6 +5,7 @@ const Wrapper = styled.div`
     width: 100%;
     border-collapse: collapse;
     font-weight: 600;
+    table-layout: fixed;
 
     thead,
     td {
@@ -18,6 +19,14 @@ const Wrapper = styled.div`
     }
     td {
       padding: 6px 10px;
+
+      &:nth-child(1) {
+        width: 30%;
+      }
+
+      &:nth-child(3) {
+        width: 70px;
+      }
     }
   }
 

packages/bruno-app/src/components/RequestPane/QueryUrl/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect}  from 'react';
 import get from 'lodash/get';
 import { useDispatch } from 'react-redux';
 import { requestUrlChanged, updateRequestMethod } from 'providers/ReduxStore/slices/collections';
@@ -15,6 +15,13 @@ const QueryUrl = ({ item, collection, handleRun }) => {
   const method = item.draft ? get(item, 'draft.request.method') : get(item, 'request.method');
   const url = item.draft ? get(item, 'draft.request.url') : get(item, 'request.url');
 
+  const [methodSelectorWidth, setMethodSelectorWidth] = useState(90);
+
+  useEffect(() => {
+    const el = document.querySelector(".method-selector-container");
+    setMethodSelectorWidth(el.offsetWidth);
+  }, [method]);
+
   const onSave = () => dispatch(saveRequest(item.uid, collection.uid));
   const onUrlChange = (value) => {
     dispatch(
@@ -41,7 +48,14 @@ const QueryUrl = ({ item, collection, handleRun }) => {
       <div className="flex items-center h-full method-selector-container">
         <HttpMethodSelector method={method} onMethodSelect={onMethodSelect} />
       </div>
-      <div className="flex items-center flex-grow input-container h-full">
+      <div
+        className="flex items-center flex-grow input-container h-full"
+        style={{
+          color: 'yellow',
+          width: `calc(100% - ${methodSelectorWidth}px)`,
+          maxWidth: `calc(100% - ${methodSelectorWidth}px)`
+        }}
+      >
         <SingleLineEditor 
           value={url} 
           onSave={onSave}

packages/bruno-app/src/components/RequestPane/RequestHeaders/StyledWrapper.js

@@ -5,6 +5,7 @@ const Wrapper = styled.div`
     width: 100%;
     border-collapse: collapse;
     font-weight: 600;
+    table-layout: fixed;
 
     thead,
     td {
@@ -18,6 +19,14 @@ const Wrapper = styled.div`
     }
     td {
       padding: 6px 10px;
+
+      &:nth-child(1) {
+        width: 30%;
+      }
+
+      &:nth-child(3) {
+        width: 70px;
+      }
     }
   }
 

packages/bruno-app/src/components/SingleLineEditor/StyledWrapper.js

@@ -1,9 +1,9 @@
 import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
-  width: 100%;
   height: 30px;
   overflow-y: hidden;
+  overflow-x: hidden;
 
   .CodeMirror {
     background: transparent;
@@ -16,6 +16,13 @@ const StyledWrapper = styled.div`
       display: none !important;
     }
 
+    .CodeMirror-hscrollbar {
+      display: none !important;
+    }
+    .CodeMirror-scrollbar-filler {
+      display: none !important;
+    }
+
     .CodeMirror-lines {
       padding: 0;
     }

packages/bruno-app/src/pageComponents/Index/index.js

@@ -52,7 +52,7 @@ export default function Main() {
     <div>
       <StyledWrapper className={className}>
         <Sidebar />
-        <section className="flex flex-grow flex-col">
+        <section className="flex flex-grow flex-col overflow-auto">
           {showHomePage ? (
             <Welcome />
           ) : (