From 1a93eabf0163b6b276bad827f8c022d0d572e705 Mon Sep 17 00:00:00 2001
From: lohit <lohit.jiddimani@gmail.com>
Date: Thu, 3 Jul 2025 13:35:05 +0530
Subject: [PATCH] request/response pane styling fixes (#5025)

---
 .../bruno-app/src/components/RequestTabPanel/index.js     | 2 +-
 .../Timeline/TimelineItem/Common/Body/index.js            | 3 +--
 .../ResponsePane/Timeline/TimelineItem/Request/index.js   | 4 ++--
 .../ResponsePane/Timeline/TimelineItem/Response/index.js  | 4 ++--
 .../ResponsePane/Timeline/TimelineItem/index.js           | 8 ++++----
 .../src/components/ResponsePane/Timeline/index.js         | 5 +----
 packages/bruno-app/src/components/ResponsePane/index.js   | 2 +-
 .../src/ui/HeightBoundContainer/StyledWrapper.js          | 6 +++---
 packages/bruno-app/src/ui/HeightBoundContainer/index.js   | 2 +-
 9 files changed, 16 insertions(+), 20 deletions(-)

diff --git a/packages/bruno-app/src/components/RequestTabPanel/index.js b/packages/bruno-app/src/components/RequestTabPanel/index.js
index 19e52ae0f..6863b30b2 100644
--- a/packages/bruno-app/src/components/RequestTabPanel/index.js
+++ b/packages/bruno-app/src/components/RequestTabPanel/index.js
@@ -267,7 +267,7 @@ const RequestTabPanel = () => {
           <div className="dragbar-handle" />
         </div>
 
-        <section className="response-pane flex-grow">
+        <section className="response-pane flex-grow overflow-x-auto">
           <ResponsePane item={item} collection={collection} response={item.response} />
         </section>
       </section>
diff --git a/packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Common/Body/index.js b/packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Common/Body/index.js
index 6f9d2f832..683c82bba 100644
--- a/packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Common/Body/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Common/Body/index.js
@@ -1,7 +1,7 @@
 import QueryResult from "components/ResponsePane/QueryResult/index";
 import { useState } from "react";
 
-const BodyBlock = ({ collection, data, dataBuffer, headers, error, item, width }) => {
+const BodyBlock = ({ collection, data, dataBuffer, headers, error, item }) => {
   const [isBodyCollapsed, toggleBody] = useState(true);
   return (
     <div className="collapsible-section">
@@ -17,7 +17,6 @@ const BodyBlock = ({ collection, data, dataBuffer, headers, error, item, width }
             <QueryResult
               item={item}
               collection={collection}
-              width={width}
               data={data}
               dataBuffer={dataBuffer}
               headers={headers}
diff --git a/packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Request/index.js b/packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Request/index.js
index 1cef8e9e5..400f3ffe5 100644
--- a/packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Request/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Request/index.js
@@ -16,7 +16,7 @@ const safeStringifyJSONIfNotString = (obj) => {
 };
 
 
-const Request = ({ collection, request, item, width }) => {
+const Request = ({ collection, request, item }) => {
   let { url, headers, data, dataBuffer, error } = request || {};  
   if (!dataBuffer) {
     dataBuffer = Buffer.from(safeStringifyJSONIfNotString(data))?.toString('base64');
@@ -33,7 +33,7 @@ const Request = ({ collection, request, item, width }) => {
       <Headers headers={headers} type={'request'} />
 
       {/* Body */}
-      <BodyBlock collection={collection} data={data} dataBuffer={dataBuffer} error={error} headers={headers} item={item} width={width} />
+      <BodyBlock collection={collection} data={data} dataBuffer={dataBuffer} error={error} headers={headers} item={item} />
   </div>
   )
 }
diff --git a/packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Response/index.js b/packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Response/index.js
index c70825eb9..9a72c8856 100644
--- a/packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Response/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/Response/index.js
@@ -16,7 +16,7 @@ const safeStringifyJSONIfNotString = (obj) => {
   }
 };
 
-const Response = ({ collection, response, item, width }) => {
+const Response = ({ collection, response, item }) => {
   let { status, statusCode, statusText, dataBuffer, headers, data, error } = response || {};
   if (!dataBuffer) {
     dataBuffer = Buffer.from(safeStringifyJSONIfNotString(data))?.toString('base64');
@@ -35,7 +35,7 @@ const Response = ({ collection, response, item, width }) => {
     <Headers headers={headers} type={'response'} />
 
     {/* Body */}
-    <BodyBlock collection={collection} data={data} dataBuffer={dataBuffer} error={error} headers={headers} item={item} width={width} />
+    <BodyBlock collection={collection} data={data} dataBuffer={dataBuffer} error={error} headers={headers} item={item} />
   </div>
   )
 }
diff --git a/packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/index.js b/packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/index.js
index 92e5db8ec..46a5efad5 100644
--- a/packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/index.js
@@ -6,7 +6,7 @@ import Method from "./Common/Method/index";
 import Status from "./Common/Status/index";
 import { RelativeTime } from "./Common/Time/index";
 
-const TimelineItem = ({ timestamp, request, response, item, collection, width, isOauth2 }) => {
+const TimelineItem = ({ timestamp, request, response, item, collection, isOauth2 }) => {
   const [isCollapsed, _toggleCollapse] = useState(false);
   const [activeTab, setActiveTab] = useState('request');
   const toggleCollapse = () => _toggleCollapse(prev => !prev);
@@ -57,15 +57,15 @@ const TimelineItem = ({ timestamp, request, response, item, collection, width, i
         </div>
 
         {/* Tab Content */}
-        <div className="tab-content">
+        <div className="tab-content break-all">
           {/* Request Tab */}
           {activeTab === 'request' && (
-            <Request request={request} item={item} collection={collection} width={width} />
+            <Request request={request} item={item} collection={collection} />
           )}
 
           {/* Response Tab */}
           {activeTab === 'response' && (
-            <Response response={response} item={item} collection={collection} width={width} />
+            <Response response={response} item={item} collection={collection} />
           )}
 
           {/* Network Logs Tab */}
diff --git a/packages/bruno-app/src/components/ResponsePane/Timeline/index.js b/packages/bruno-app/src/components/ResponsePane/Timeline/index.js
index 40fccf969..98fe1479a 100644
--- a/packages/bruno-app/src/components/ResponsePane/Timeline/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/Timeline/index.js
@@ -41,7 +41,7 @@ const getEffectiveAuthSource = (collection, item) => {
   return effectiveSource;
 };
 
-const Timeline = ({ collection, item, width }) => {
+const Timeline = ({ collection, item }) => {
   // Get the effective auth source if auth mode is inherit
   const authSource = getEffectiveAuthSource(collection, item);
 
@@ -62,7 +62,6 @@ const Timeline = ({ collection, item, width }) => {
   return (
     <StyledWrapper
       className="pb-4 w-full flex flex-grow flex-col"
-      style={{ maxWidth: width - 60, overflowWrap: 'break-word' }}
     >
       {combinedTimeline.map((event, index) => {
         if (event.type === 'request') {
@@ -76,7 +75,6 @@ const Timeline = ({ collection, item, width }) => {
                 response={response}
                 item={item}
                 collection={collection}
-                width={width}
               />
             </div>
           );
@@ -101,7 +99,6 @@ const Timeline = ({ collection, item, width }) => {
                           response={data?.response}
                           item={item}
                           collection={collection}
-                          width={width - 50}
                           isOauth2={true}
                         />
                       </div>
diff --git a/packages/bruno-app/src/components/ResponsePane/index.js b/packages/bruno-app/src/components/ResponsePane/index.js
index 447eab43b..33668fa36 100644
--- a/packages/bruno-app/src/components/ResponsePane/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/index.js
@@ -189,7 +189,7 @@ const ResponsePane = ({ item, collection }) => {
             onClose={() => setShowScriptErrorCard(false)}
           />
         )}
-        <div className='flex-1 min-h-[200px]'>
+        <div className='flex-1 min-h-[200px] overflow-y-auto'>
           {!item?.response ? (
             focusedTab?.responsePaneTab === "timeline" && requestTimeline?.length ? (
               <Timeline
diff --git a/packages/bruno-app/src/ui/HeightBoundContainer/StyledWrapper.js b/packages/bruno-app/src/ui/HeightBoundContainer/StyledWrapper.js
index 8770381e7..6d261b9bf 100644
--- a/packages/bruno-app/src/ui/HeightBoundContainer/StyledWrapper.js
+++ b/packages/bruno-app/src/ui/HeightBoundContainer/StyledWrapper.js
@@ -14,10 +14,10 @@ const StyledWrapper = styled.div`
     min-height: 0;
   }
 
-  /* Grid container - enforces boundaries */
-  .grid-boundary {
+  /* flex container - enforces boundaries */
+  .flex-boundary {
     width: 100%;
-    display: grid;
+    display: flex;
     overflow-y: auto;
   }
 `;
diff --git a/packages/bruno-app/src/ui/HeightBoundContainer/index.js b/packages/bruno-app/src/ui/HeightBoundContainer/index.js
index be7b2727a..149c02da1 100644
--- a/packages/bruno-app/src/ui/HeightBoundContainer/index.js
+++ b/packages/bruno-app/src/ui/HeightBoundContainer/index.js
@@ -5,7 +5,7 @@ const HeightBoundContainer = ({children}) => {
   return (
     <StyledWrapper>
       <div className="height-constraint">
-        <div className="grid-boundary">
+        <div className="flex-boundary">
           {children}
         </div>
       </div>