From ba5eb53548fe50d47c7aff0cb82a024b8287620f Mon Sep 17 00:00:00 2001
From: naman-bruno <naman@usebruno.com>
Date: Wed, 16 Jul 2025 17:41:27 +0530
Subject: [PATCH] Merge pull request #5110 from
 naman-bruno/bugfix/devtools-timeline-scroll

---
 packages/bruno-app/src/components/ResponsePane/index.js     | 4 ++--
 .../src/components/RunnerResults/ResponsePane/index.js      | 6 +++---
 packages/bruno-app/src/components/RunnerResults/index.jsx   | 2 +-
 .../bruno-app/src/components/StatusBar/StyledWrapper.js     | 2 +-
 packages/bruno-app/src/components/VariablesEditor/index.js  | 2 +-
 5 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/bruno-app/src/components/ResponsePane/index.js b/packages/bruno-app/src/components/ResponsePane/index.js
index 33668fa36..22955ac2d 100644
--- a/packages/bruno-app/src/components/ResponsePane/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/index.js
@@ -176,7 +176,7 @@ const ResponsePane = ({ item, collection }) => {
         ) : null}
       </div>
       <section
-        className={`flex flex-col min-h-0 relative px-4 auto`}
+        className={`flex flex-col min-h-0 relative px-4 auto overflow-scroll`}
         style={{
           flex: '1 1 0',
           height: hasScriptError && showScriptErrorCard ? 'auto' : '100%'
@@ -189,7 +189,7 @@ const ResponsePane = ({ item, collection }) => {
             onClose={() => setShowScriptErrorCard(false)}
           />
         )}
-        <div className='flex-1 min-h-[200px] overflow-y-auto'>
+        <div className='flex-1 overflow-y-auto'>
           {!item?.response ? (
             focusedTab?.responsePaneTab === "timeline" && requestTimeline?.length ? (
               <Timeline
diff --git a/packages/bruno-app/src/components/RunnerResults/ResponsePane/index.js b/packages/bruno-app/src/components/RunnerResults/ResponsePane/index.js
index 8f82d8126..bfc716d28 100644
--- a/packages/bruno-app/src/components/RunnerResults/ResponsePane/index.js
+++ b/packages/bruno-app/src/components/RunnerResults/ResponsePane/index.js
@@ -96,8 +96,8 @@ const ResponsePane = ({ rightPaneWidth, item, collection }) => {
   }
 
   return (
-    <StyledWrapper className="flex flex-col h-full relative">
-      <div className="flex items-center tabs" role="tablist">
+    <StyledWrapper className="flex flex-col h-full relative overflow-scroll">
+      <div className="flex items-center tabs overflow-visible" role="tablist">
         <div className={getTabClassname('response')} role="tab" onClick={() => selectTab('response')}>
           Response
         </div>
@@ -128,7 +128,7 @@ const ResponsePane = ({ rightPaneWidth, item, collection }) => {
           <ResponseSize size={size} />
         </div>
       </div>
-      <section className="flex flex-col flex-grow">
+      <section className="flex flex-col flex-grow overflow-scroll">
         {hasScriptError && showScriptErrorCard && (
           <ScriptError
             item={item}
diff --git a/packages/bruno-app/src/components/RunnerResults/index.jsx b/packages/bruno-app/src/components/RunnerResults/index.jsx
index 0a8f6e333..29eed0608 100644
--- a/packages/bruno-app/src/components/RunnerResults/index.jsx
+++ b/packages/bruno-app/src/components/RunnerResults/index.jsx
@@ -357,7 +357,7 @@ export default function RunnerResults({ collection }) {
         </div>
         {selectedItem ? (
           <div className="flex flex-1 w-[50%] overflow-y-auto">
-            <div className="flex flex-col w-full overflow-auto">
+            <div className="flex flex-col w-full overflow-hidden">
               <div className="flex items-center mb-4 font-medium">
                 <span className="mr-2">{selectedItem.displayName}</span>
                 <span>
diff --git a/packages/bruno-app/src/components/StatusBar/StyledWrapper.js b/packages/bruno-app/src/components/StatusBar/StyledWrapper.js
index 6924fa098..238746bc0 100644
--- a/packages/bruno-app/src/components/StatusBar/StyledWrapper.js
+++ b/packages/bruno-app/src/components/StatusBar/StyledWrapper.js
@@ -33,7 +33,7 @@ const StyledWrapper = styled.div`
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: 4px;
+    padding: 0 4px;
     color: ${(props) => props.theme.sidebar.color};
     cursor: pointer;
     opacity: 0.7;
diff --git a/packages/bruno-app/src/components/VariablesEditor/index.js b/packages/bruno-app/src/components/VariablesEditor/index.js
index 5d9de8b59..b601f3de0 100644
--- a/packages/bruno-app/src/components/VariablesEditor/index.js
+++ b/packages/bruno-app/src/components/VariablesEditor/index.js
@@ -89,7 +89,7 @@ const VariablesEditor = ({ collection }) => {
   const reactInspectorTheme = storedTheme === 'light' ? 'chromeLight' : 'chromeDark';
 
   return (
-    <StyledWrapper className="px-4 py-4">
+    <StyledWrapper className="px-4 py-4 overflow-scroll">
       <RuntimeVariables collection={collection} theme={reactInspectorTheme} />
       <EnvVariables collection={collection} theme={reactInspectorTheme} />