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

fix(request-panel)/changed request panel static width to percentage width of screen width (#8499)

Browse Source
This commit is contained in:
sachin-thakur-bruno
2026-07-07 12:27:50 +05:30
committed by GitHub
parent cbed13a346
commit 6f8865e162
2 changed files with 35 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
packages/bruno-app/src/components/Devtools/Console/index.js
View File

@@ -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)
});

16
packages/bruno-app/src/hooks/useResizablePanel/index.js
View File

@@ -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 };
}