rayan/bruno
1
0
Fork 0
mirror of https://github.com/usebruno/bruno.git synced 2026-07-01 00:24:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: response pane size when devtool open (#6380)

Browse Source
This commit is contained in:
Pooja
2025-12-17 12:15:11 +05:30
committed by GitHub
parent 7d317a775b
commit 639c8e573f
2 changed files with 31 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
packages/bruno-app/src/components/RequestTabPanel/index.js
View File

@@ -52,6 +52,7 @@ const RequestTabPanel = () => {
const _collections = useSelector((state) => state.collections.collections);
const preferences = useSelector((state) => state.app.preferences);
const isVerticalLayout = preferences?.layout?.responsePaneOrientation === 'vertical';
const isConsoleOpen = useSelector((state) => state.logs.isConsoleOpen);
// Use ref to avoid stale closure in event handlers
const isVerticalLayoutRef = useRef(isVerticalLayout);
@@ -80,6 +81,7 @@ const RequestTabPanel = () => {
const draggingRef = useRef(false);
const { left: leftPaneWidth, top: topPaneHeight, reset: resetPaneBoundaries, setTop: setTopPaneHeight, setLeft: setLeftPaneWidth } = useTabPaneBoundaries(activeTabUid);
const previousTopPaneHeight = useRef(null); // Store height before devtools opens
// Not a recommended pattern here to have the child component
// make a callback to set state, but treating this as an exception
@@ -145,6 +147,30 @@ const RequestTabPanel = () => {
};
}, [handleMouseUp, handleMouseMove]);
// When devtools opens in vertical layout, reduce request pane height to ensure response pane is visible
// When devtools closes, restore the previous height
useEffect(() => {
if (!isVerticalLayout) return;
if (isConsoleOpen) {
// Store current height before reducing
if (previousTopPaneHeight.current === null) {
previousTopPaneHeight.current = topPaneHeight;
}
// Reduce request pane height to make room for response pane when devtools is open
const maxHeight = 200;
if (topPaneHeight > maxHeight) {
setTopPaneHeight(maxHeight);
}
} else {
// Restore previous height when devtools closes
if (previousTopPaneHeight.current !== null) {
setTopPaneHeight(previousTopPaneHeight.current);
previousTopPaneHeight.current = null;
}
}
}, [isConsoleOpen, isVerticalLayout]);
if (!activeTabUid) {
return <WorkspaceHome />;
}

8
packages/bruno-app/src/components/ResponsePane/Placeholder/index.js
View File

@@ -12,12 +12,14 @@ const Placeholder = () => {
const preferences = useSelector((state) => state.app.preferences);
const isVerticalLayout = preferences?.layout?.responsePaneOrientation === 'vertical';
const iconSize = isVerticalLayout ? 80 : 150;
return (
<StyledWrapper className={`${isVerticalLayout ? 'vertical-layout' : ''}`}>
<div className="send-icon flex justify-center" style={{ fontSize: 200 }}>
<IconSend size={150} strokeWidth={1} />
<div className="send-icon flex justify-center" style={{ fontSize: isVerticalLayout ? 100 : 200 }}>
<IconSend size={iconSize} strokeWidth={1} />
</div>
<div className="flex mt-4">
<div className={`flex ${isVerticalLayout ? 'mt-2' : 'mt-4'}`}>
<div className="flex flex-1 flex-col items-end px-1">
<div className="px-1 py-2">Send Request</div>
<div className="px-1 py-2">New Request</div>