From 6f8865e1626947b25be5f0a8ce2d5d520d5b2484 Mon Sep 17 00:00:00 2001
From: sachin-thakur-bruno <sachin.thakur@usebruno.com>
Date: Tue, 7 Jul 2026 12:27:50 +0530
Subject: [PATCH] fix(request-panel)/changed request panel static width to
 percentage width of screen width (#8499)

---
 .../src/components/Devtools/Console/index.js  | 22 +++++++++++++++++--
 .../src/hooks/useResizablePanel/index.js      | 16 +++++++++++++-
 2 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/packages/bruno-app/src/components/Devtools/Console/index.js b/packages/bruno-app/src/components/Devtools/Console/index.js
index 6e9cf918c..7bbde578f 100644
--- a/packages/bruno-app/src/components/Devtools/Console/index.js
+++ b/packages/bruno-app/src/components/Devtools/Console/index.js
@@ -37,7 +37,7 @@ import StyledWrapper from './StyledWrapper';
 import { useResizablePanel } from 'hooks/useResizablePanel';
 
 const MIN_DETAILS_PANEL_WIDTH = 280;
-const MAX_DETAILS_PANEL_WIDTH = 800;
+const DETAILS_PANEL_MAX_RATIO = 0.7;
 
 const LogIcon = ({ type }) => {
   const iconProps = { size: 16, strokeWidth: 1.5 };
@@ -388,11 +388,29 @@ const Console = () => {
   const collections = useSelector((state) => state.collections.collections);
   const [savedDetailsPanelWidth, setSavedDetailsPanelWidth] = usePersistedState({ key: 'devtools-details-panel-width', default: 400 });
   const consoleRef = useRef(null);
+  const [consoleWidth, setConsoleWidth] = useState(0);
+
+  useEffect(() => {
+    const node = consoleRef.current;
+    if (!node || typeof ResizeObserver === 'undefined') return;
+
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (entry) setConsoleWidth(entry.contentRect.width);
+    });
+    observer.observe(node);
+
+    return () => observer.disconnect();
+  }, []);
+
+  const detailsPanelMaxWidth = consoleWidth
+    ? Math.max(MIN_DETAILS_PANEL_WIDTH, consoleWidth * DETAILS_PANEL_MAX_RATIO)
+    : Number.POSITIVE_INFINITY;
 
   const { width: detailsPanelWidth, handleDragStart: handleDetailsPanelDragStart } = useResizablePanel({
     initialWidth: savedDetailsPanelWidth,
     minWidth: MIN_DETAILS_PANEL_WIDTH,
-    maxWidth: MAX_DETAILS_PANEL_WIDTH,
+    maxWidth: detailsPanelMaxWidth,
     direction: 'right',
     onResizeEnd: (newWidth) => setSavedDetailsPanelWidth(newWidth)
   });
diff --git a/packages/bruno-app/src/hooks/useResizablePanel/index.js b/packages/bruno-app/src/hooks/useResizablePanel/index.js
index 19ed50d74..b0c6db1f4 100644
--- a/packages/bruno-app/src/hooks/useResizablePanel/index.js
+++ b/packages/bruno-app/src/hooks/useResizablePanel/index.js
@@ -27,7 +27,12 @@ export function useResizablePanel({
   const dragStartWidth = useRef(0);
   const currentWidth = useRef(initialWidth);
 
-  const clamp = (w) => Math.min(maxWidth, Math.max(minWidth, w));
+  const minWidthRef = useRef(minWidth);
+  const maxWidthRef = useRef(maxWidth);
+  minWidthRef.current = minWidth;
+  maxWidthRef.current = maxWidth;
+
+  const clamp = (w) => Math.min(maxWidthRef.current, Math.max(minWidthRef.current, w));
 
   const handleDragStart = (e) => {
     isDragging.current = true;
@@ -65,5 +70,14 @@ export function useResizablePanel({
     };
   }, []);
 
+  useEffect(() => {
+    if (isDragging.current) return;
+    setWidth((w) => {
+      const clamped = clamp(w);
+      currentWidth.current = clamped;
+      return clamped;
+    });
+  }, [minWidth, maxWidth]);
+
   return { width, handleDragStart };
 }