fix: open panes at default size on expand from collapsed state (usebruno#8133)

* fix(tabs): open panes at default size on expand from collapsed state

* chore: shorten comment in pane expand reducers

* test(tabs): add tabs collapse/expand reducer tests

* test(tabs): assert expand reducers preserve the other pane's collapse flag

Author: gopu-bruno

packages/bruno-app/src/providers/ReduxStore/slices/tabs.js

@@ -104,8 +104,6 @@ export const tabsSlice = createSlice({
           requestPaneHeight: null,
           requestPaneCollapsed: false,
           responsePaneCollapsed: false,
-          requestPaneWidthBeforeCollapse: null,
-          requestPaneHeightBeforeCollapse: null,
           requestPaneTab: requestPaneTab || defaultRequestPaneTab,
           responsePaneTab: 'response',
           responseFormat: null,
@@ -135,8 +133,6 @@ export const tabsSlice = createSlice({
         requestPaneHeight: null,
         requestPaneCollapsed: false,
         responsePaneCollapsed: false,
-        requestPaneWidthBeforeCollapse: null,
-        requestPaneHeightBeforeCollapse: null,
         requestPaneTab: requestPaneTab || defaultRequestPaneTab,
         responsePaneTab: 'response',
         responseFormat: null,
@@ -383,8 +379,6 @@ export const tabsSlice = createSlice({
       if (tab) {
         tab.requestPaneCollapsed = true;
         tab.responsePaneCollapsed = false;
-        tab.requestPaneWidthBeforeCollapse = tab.requestPaneWidth;
-        tab.requestPaneHeightBeforeCollapse = tab.requestPaneHeight;
       }
     },
     collapseResponsePane: (state, action) => {
@@ -398,20 +392,18 @@ export const tabsSlice = createSlice({
       const tab = find(state.tabs, (t) => t.uid === action.payload.uid);
       if (tab) {
         tab.requestPaneCollapsed = false;
-        if (tab.requestPaneWidthBeforeCollapse != null) {
-          tab.requestPaneWidth = tab.requestPaneWidthBeforeCollapse;
-        }
-        if (tab.requestPaneHeightBeforeCollapse != null) {
-          tab.requestPaneHeight = tab.requestPaneHeightBeforeCollapse;
-        }
-        tab.requestPaneWidthBeforeCollapse = null;
-        tab.requestPaneHeightBeforeCollapse = null;
+        // reset so the panes return to their default size on expand
+        tab.requestPaneWidth = null;
+        tab.requestPaneHeight = null;
       }
     },
     expandResponsePane: (state, action) => {
       const tab = find(state.tabs, (t) => t.uid === action.payload.uid);
       if (tab) {
         tab.responsePaneCollapsed = false;
+        // reset so the panes return to their default size on expand
+        tab.requestPaneWidth = null;
+        tab.requestPaneHeight = null;
       }
     },
     reorderTabs: (state, action) => {

packages/bruno-app/src/providers/ReduxStore/slices/tabs.spec.js

@@ -0,0 +1,59 @@
+import reducer, {
+  collapseRequestPane,
+  collapseResponsePane,
+  expandRequestPane,
+  expandResponsePane
+} from './tabs';
+
+const makeState = (overrides = {}) => ({
+  tabs: [{
+    uid: 'tab-1',
+    collectionUid: 'col-1',
+    type: 'http-request',
+    requestPaneWidth: 500,
+    requestPaneHeight: 400,
+    requestPaneCollapsed: false,
+    responsePaneCollapsed: false,
+    ...overrides
+  }],
+  activeTabUid: 'tab-1',
+  recentlyClosedTabs: []
+});
+
+describe('tabs slice - collapse/expand reducers', () => {
+  it('collapseRequestPane flips flags and preserves stored dimensions', () => {
+    const next = reducer(makeState({ responsePaneCollapsed: true }), collapseRequestPane({ uid: 'tab-1' }));
+
+    expect(next.tabs[0].requestPaneCollapsed).toBe(true);
+    expect(next.tabs[0].responsePaneCollapsed).toBe(false);
+    expect(next.tabs[0].requestPaneWidth).toBe(500);
+    expect(next.tabs[0].requestPaneHeight).toBe(400);
+  });
+
+  it('collapseResponsePane flips flags and preserves stored dimensions', () => {
+    const next = reducer(makeState({ requestPaneCollapsed: true }), collapseResponsePane({ uid: 'tab-1' }));
+
+    expect(next.tabs[0].requestPaneCollapsed).toBe(false);
+    expect(next.tabs[0].responsePaneCollapsed).toBe(true);
+    expect(next.tabs[0].requestPaneWidth).toBe(500);
+    expect(next.tabs[0].requestPaneHeight).toBe(400);
+  });
+
+  it('expandRequestPane flips flag and resets stored dimensions to default', () => {
+    const next = reducer(makeState({ requestPaneCollapsed: true }), expandRequestPane({ uid: 'tab-1' }));
+
+    expect(next.tabs[0].requestPaneCollapsed).toBe(false);
+    expect(next.tabs[0].responsePaneCollapsed).toBe(false);
+    expect(next.tabs[0].requestPaneWidth).toBeNull();
+    expect(next.tabs[0].requestPaneHeight).toBeNull();
+  });
+
+  it('expandResponsePane flips flag and resets stored dimensions to default', () => {
+    const next = reducer(makeState({ responsePaneCollapsed: true }), expandResponsePane({ uid: 'tab-1' }));
+
+    expect(next.tabs[0].responsePaneCollapsed).toBe(false);
+    expect(next.tabs[0].requestPaneCollapsed).toBe(false);
+    expect(next.tabs[0].requestPaneWidth).toBeNull();
+    expect(next.tabs[0].requestPaneHeight).toBeNull();
+  });
+});