From 80f9e33be5c25757fa5428fb652ccad3548706cd Mon Sep 17 00:00:00 2001
From: Anoop M D <anoop.md1421@gmail.com>
Date: Wed, 1 Feb 2023 03:06:32 +0530
Subject: [PATCH] fix: fix overflow issues in keyval editors in the app

---
 .../FormUrlEncodedParams/StyledWrapper.js      |  9 +++++++++
 .../MultipartFormParams/StyledWrapper.js       |  9 +++++++++
 .../RequestPane/QueryParams/StyledWrapper.js   |  9 +++++++++
 .../components/RequestPane/QueryUrl/index.js   | 18 ++++++++++++++++--
 .../RequestHeaders/StyledWrapper.js            |  9 +++++++++
 .../SingleLineEditor/StyledWrapper.js          |  9 ++++++++-
 .../src/pageComponents/Index/index.js          |  2 +-
 7 files changed, 61 insertions(+), 4 deletions(-)

diff --git a/packages/bruno-app/src/components/RequestPane/FormUrlEncodedParams/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/FormUrlEncodedParams/StyledWrapper.js
index 9a2148809..f04a30be0 100644
--- a/packages/bruno-app/src/components/RequestPane/FormUrlEncodedParams/StyledWrapper.js
+++ b/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;
+      }
     }
   }
 
diff --git a/packages/bruno-app/src/components/RequestPane/MultipartFormParams/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/MultipartFormParams/StyledWrapper.js
index 0142fd524..de3218cb1 100644
--- a/packages/bruno-app/src/components/RequestPane/MultipartFormParams/StyledWrapper.js
+++ b/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;
+      }
     }
   }
 
diff --git a/packages/bruno-app/src/components/RequestPane/QueryParams/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/QueryParams/StyledWrapper.js
index fbcaabd28..a15d5a4b5 100644
--- a/packages/bruno-app/src/components/RequestPane/QueryParams/StyledWrapper.js
+++ b/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;
+      }
     }
   }
 
diff --git a/packages/bruno-app/src/components/RequestPane/QueryUrl/index.js b/packages/bruno-app/src/components/RequestPane/QueryUrl/index.js
index dfdc81968..eda5e33e6 100644
--- a/packages/bruno-app/src/components/RequestPane/QueryUrl/index.js
+++ b/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}
diff --git a/packages/bruno-app/src/components/RequestPane/RequestHeaders/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/RequestHeaders/StyledWrapper.js
index 2233d2c58..9f723cb81 100644
--- a/packages/bruno-app/src/components/RequestPane/RequestHeaders/StyledWrapper.js
+++ b/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;
+      }
     }
   }
 
diff --git a/packages/bruno-app/src/components/SingleLineEditor/StyledWrapper.js b/packages/bruno-app/src/components/SingleLineEditor/StyledWrapper.js
index e0536eaf7..4155c64d7 100644
--- a/packages/bruno-app/src/components/SingleLineEditor/StyledWrapper.js
+++ b/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;
     }
diff --git a/packages/bruno-app/src/pageComponents/Index/index.js b/packages/bruno-app/src/pageComponents/Index/index.js
index c74d60c11..73d281c6c 100644
--- a/packages/bruno-app/src/pageComponents/Index/index.js
+++ b/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 />
           ) : (