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

[sachin-thakur-bruno]

Description

Fix: Request Details panel max width too small on desktop

JIRA

Problem

The Request Details panel (Devtools → Network tab) had a hardcoded maxWidth of 800px. On wide desktop monitors this meant the panel couldn't be dragged any wider, even though there was plenty of room.

Changes

• Devtools/Console/index.js: Replaced the fixed 800px cap with a dynamic max width equal to 70% of the console panel's actual width, measured live via ResizeObserver on the console container. Falls back to 800px only until the first measurement resolves.
• hooks/useResizablePanel/index.js: Fixed a stale-closure bug — the drag event listeners were bound once on mount and ignored any later changes to minWidth/maxWidth. Bounds are now read from refs so a dynamic maxWidth is respected during an active drag. Also added re-clamping if the bounds shrink below the current width while not dragging (e.g. on window resize).

Contribution Checklist:

• I've used AI significantly to create this pull request
• The pull request only addresses one issue or adds one feature.
• The pull request does not introduce any breaking changes
• I have added screenshots or gifs to help explain the change if applicable.
• I have read the contribution guidelines.
• Create an issue and link to the pull request.

Note: Keeping the PR small and focused helps make it easier to review and merge. If you have multiple changes you want to make, please consider submitting them as separate pull requests.

Publishing to New Package Managers

Please see here for more information.

Summary by CodeRabbit

• New Features
  • Console detail panels now size more intelligently based on the available space, staying responsive as the window or console area changes.
  • Resizable panels now enforce updated min/max limits more reliably, including when sizing constraints change after the panel is open.
• Bug Fixes
  • Improved resizing behavior to prevent panels from drifting outside the intended width bounds during or after layout changes.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: ea1b1afc-b6ab-4f18-83a2-5bb779bdc5b9

📥 Commits

Reviewing files that changed from the base of the PR and between f3ccbbf and a03fd76.

📒 Files selected for processing (1)

• packages/bruno-app/src/components/Devtools/Console/index.js

🚧 Files skipped from review as they are similar to previous changes (1)

• packages/bruno-app/src/components/Devtools/Console/index.js

---

Walkthrough

The console details panel now derives its maximum width from the measured console container width, and the shared resizable-panel hook re-clamps widths when bounds change.

Changes

Responsive resizable panel sizing

Layer / File(s)	Summary
useResizablePanel ref-based clamping and re-clamp effect packages/bruno-app/src/hooks/useResizablePanel/index.js	Clamp logic reads min/max from refs updated on render; a new effect re-clamps current width when minWidth/maxWidth change and not dragging.
Console responsive max width computation packages/bruno-app/src/components/Devtools/Console/index.js	Adds ratio-based max-width calculation from measured console width and passes the computed maxWidth into useResizablePanel.

Estimated code review effort: 2 (Simple) | ~15 minutes

Possibly related PRs

• usebruno/bruno#8234: Both PRs modify the same devtools Console details-panel resizing behavior and the shared useResizablePanel clamp flow.

Suggested labels: size/L

Suggested reviewers: helloanoop, bijin-bruno, lohit-bruno, naman-bruno, sid-bruno

Poem

A panel once fixed now learns to roam,
Measuring its container to find a home.
Refs keep the bounds steady and true,
Width shifts gently as layouts renew.
✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title matches the main change: replacing the request panel’s fixed width with a dynamic percentage-based limit.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

🧹 Nitpick comments (1)

packages/bruno-app/src/hooks/useResizablePanel/index.js (1)

73-81: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Re-clamp effect looks correct; consider a regression test.

The effect correctly re-clamps width when minWidth/maxWidth shrink while not dragging, satisfying the PR goal. One gap: the existing spec file only covers clamp-during-drag behavior (per the provided snippet), with no test exercising this new "bounds shrink while not dragging" path (e.g., simulating a maxWidth prop decrease below current width).

As per coding guidelines, "Add tests for any new functionality or meaningful changes." This re-clamp effect is new, meaningful behavior worth covering.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/bruno-app/src/hooks/useResizablePanel/index.js` around lines 73 -
81, The re-clamp behavior in useResizablePanel should be covered with a
regression test. Update the existing spec for useResizablePanel to simulate a
bounds change where maxWidth (or minWidth) shrinks below the current width while
isDragging.current is false, then assert that the hook re-clamps the width
through the useEffect path and updates currentWidth accordingly. Use the clamp
logic and the useResizablePanel hook setup already present in the test file to
keep the new case aligned with the existing drag-clamp coverage.

Source: Coding guidelines

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@packages/bruno-app/src/hooks/useResizablePanel/index.js`:
- Around line 73-81: The re-clamp behavior in useResizablePanel should be
covered with a regression test. Update the existing spec for useResizablePanel
to simulate a bounds change where maxWidth (or minWidth) shrinks below the
current width while isDragging.current is false, then assert that the hook
re-clamps the width through the useEffect path and updates currentWidth
accordingly. Use the clamp logic and the useResizablePanel hook setup already
present in the test file to keep the new case aligned with the existing
drag-clamp coverage.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 1aae3ebc-5ab0-45b6-a456-608c60065768

📥 Commits

Reviewing files that changed from the base of the PR and between 143cb5f and f3ccbbf.

📒 Files selected for processing (2)

• packages/bruno-app/src/components/Devtools/Console/index.js
• packages/bruno-app/src/hooks/useResizablePanel/index.js