fix(ui): open response pane at a minimum height on expand (usebruno#8236)

Author: gopu-bruno

packages/bruno-app/src/components/RequestTabPanel/index.js

@@ -43,6 +43,7 @@ import GlobalEnvironmentSettings from 'components/Environments/GlobalEnvironment
 import OpenAPISyncTab from 'components/OpenAPISyncTab';
 import OpenAPISpecTab from 'components/OpenAPISpecTab';
 import CollapsedPanelIndicator from './CollapsedPanelIndicator';
+import { clampRequestHeightForResponse } from './paneSize';
 import { IconLoader2 } from '@tabler/icons';
 
 const MIN_LEFT_PANE_WIDTH = 300;
@@ -51,6 +52,8 @@ const MIN_TOP_PANE_HEIGHT = 150;
 const MIN_BOTTOM_PANE_HEIGHT = 150;
 const COLLAPSE_EDGE_THRESHOLD = 80;
 const EXPAND_EDGE_THRESHOLD = 100;
+// Minimum response pane height to show placeholder content on click-expand
+const RESPONSE_EXPAND_MIN_HEIGHT = 300;
 
 const RequestTabPanel = () => {
   const dispatch = useDispatch();
@@ -262,6 +265,21 @@ const RequestTabPanel = () => {
     startDragging(e);
   }, [expandResponse, applyPointerResize, startDragging]);
 
+  const handleResponseIndicatorClickExpand = useCallback(() => {
+    expandResponse();
+    if (!isVerticalLayoutRef.current || !mainSectionRef.current) return;
+    const { height: containerHeight } = mainSectionRef.current.getBoundingClientRect();
+    const clampedHeight = clampRequestHeightForResponse(
+      topPaneHeight,
+      containerHeight,
+      RESPONSE_EXPAND_MIN_HEIGHT,
+      MIN_TOP_PANE_HEIGHT
+    );
+    if (clampedHeight != null) {
+      setTopPaneHeight(clampedHeight);
+    }
+  }, [expandResponse, topPaneHeight, setTopPaneHeight]);
+
   useEffect(() => {
     document.addEventListener('mouseup', handleMouseUp);
     document.addEventListener('mousemove', handleMouseMove);
@@ -563,7 +581,7 @@ const RequestTabPanel = () => {
             <CollapsedPanelIndicator
               panelType="response"
               isVertical={isVerticalLayout}
-              onExpand={expandResponse}
+              onExpand={handleResponseIndicatorClickExpand}
               onDragStart={handleResponseIndicatorDragStart}
               dragThresholdPx={isVerticalLayout ? MIN_BOTTOM_PANE_HEIGHT / 2 : MIN_RIGHT_PANE_WIDTH / 2}
             />

packages/bruno-app/src/components/RequestTabPanel/paneSize.js

@@ -0,0 +1,14 @@
+/**
+ * Clamps the request pane height to leave room for the response pane.
+ * Returns null if no clamping is needed.
+ */
+export const clampRequestHeightForResponse = (
+  currentRequestHeight,
+  containerHeight,
+  minResponseHeight,
+  minRequestHeight
+) => {
+  const maxRequestHeight = containerHeight - minResponseHeight;
+  if (currentRequestHeight <= maxRequestHeight) return null;
+  return Math.max(minRequestHeight, maxRequestHeight);
+};

packages/bruno-app/src/components/RequestTabPanel/paneSize.spec.js

@@ -0,0 +1,32 @@
+import { clampRequestHeightForResponse } from './paneSize';
+
+// Mirrors RequestTabPanel's constants
+const MIN_TOP_PANE_HEIGHT = 150;
+const RESPONSE_EXPAND_MIN_HEIGHT = 300;
+
+const clamp = (currentRequestHeight, containerHeight) =>
+  clampRequestHeightForResponse(currentRequestHeight, containerHeight, RESPONSE_EXPAND_MIN_HEIGHT, MIN_TOP_PANE_HEIGHT);
+
+describe('clampRequestHeightForResponse', () => {
+  it('shrinks the request pane so the response opens without squishing', () => {
+    const containerHeight = 800;
+    const result = clamp(760, containerHeight);
+    expect(result).toBe(500);
+  });
+
+  it('floors at the request minimum in a short window', () => {
+    const containerHeight = 400;
+    const result = clamp(380, containerHeight);
+    expect(result).toBe(MIN_TOP_PANE_HEIGHT);
+  });
+
+  it('floors at the request minimum even when the window cannot fit both panes', () => {
+    // 200px container results in a negative maxRequestHeight, so the MIN_TOP_PANE_HEIGHT is returned.
+    expect(clamp(380, 200)).toBe(MIN_TOP_PANE_HEIGHT);
+  });
+
+  it('returns null when the response already has enough room, no clamping needed', () => {
+    // Request with height 400 leaves the response with enough room, so no clamping is needed.
+    expect(clamp(400, 1000)).toBeNull();
+  });
+});