Skip to content

fix: response pane size when devtool open#6380

Merged
sid-bruno merged 1 commit intousebruno:mainfrom
pooja-bruno:fix/response-pane-size-when-devtool-open
Dec 17, 2025
Merged

fix: response pane size when devtool open#6380
sid-bruno merged 1 commit intousebruno:mainfrom
pooja-bruno:fix/response-pane-size-when-devtool-open

Conversation

@pooja-bruno
Copy link
Collaborator

@pooja-bruno pooja-bruno commented Dec 11, 2025

Description

JIRA

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.
Screen.Recording.2025-12-11.at.4.27.24.PM.mov

Summary by CodeRabbit

  • Bug Fixes
    • Fixed console panel height management in vertical layout—heights are now properly stored and restored when opening/closing the console.
    • Improved layout responsiveness—icon sizes and vertical spacing now automatically adjust based on layout orientation for better visual consistency across different screen configurations.

✏️ Tip: You can customize this high-level summary in your review settings.

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Dec 11, 2025

Walkthrough

The changes introduce responsive layout behavior to the request panel. When the DevTools console toggles in vertical layout mode, the top pane height is dynamically managed—stored when opening and restored when closing. Additionally, icon sizing and spacing in the response placeholder adjust based on layout orientation.

Changes

Cohort / File(s) Summary
Console height management
packages/bruno-app/src/components/RequestTabPanel/index.js
Added state-driven effect to manage top pane height when console opens/closes in vertical layout. Stores previous height and constrains pane to max 200px when console is active; restores original height on close.
Responsive icon sizing
packages/bruno-app/src/components/ResponsePane/Placeholder/index.js
Made IconSend size and surrounding spacing responsive to layout orientation. Icon size and margin-top adjust conditionally based on vertical vs. horizontal layout.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

  • PR #6294: Adjusts MIN_TOP_PANE_HEIGHT and top pane fallback logic; directly related to pane height constraints modified in this PR.

Suggested labels

size/XS

Suggested reviewers

  • helloanoop
  • lohit-bruno
  • naman-bruno
  • bijin-bruno

Poem

📐 Console opens, heights adjust with care,
Vertical layout, responsive everywhere,
Icons scale gracefully, spacing just right,
DevTools and UI dance in perfect sight! ✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title directly addresses the main issue: adjusting response pane size when DevTools opens, which is the core change across both modified files.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 98513c6 and ee9b86e.

📒 Files selected for processing (2)
  • packages/bruno-app/src/components/RequestTabPanel/index.js (3 hunks)
  • packages/bruno-app/src/components/ResponsePane/Placeholder/index.js (1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{js,jsx,ts,tsx}

📄 CodeRabbit inference engine (CODING_STANDARDS.md)

**/*.{js,jsx,ts,tsx}: Use 2 spaces for indentation. No tabs, just spaces
Stick to single quotes for strings. For JSX/TSX attributes, use double quotes (e.g., )
Always add semicolons at the end of statements
No trailing commas
Always use parentheses around parameters in arrow functions, even for single params
For multiline constructs, put opening braces on the same line, and ensure consistency. Minimum 2 elements for multiline
No newlines inside function parentheses
Space before and after the arrow in arrow functions. () => {} is good
No space between function name and parentheses. func() not func ()
Semicolons go at the end of the line, not on a new line
Names for functions need to be concise and descriptive
Add in JSDoc comments to add more details to the abstractions if needed
Add in meaningful comments instead of obvious ones where complex code flow is explained properly

Files:

  • packages/bruno-app/src/components/RequestTabPanel/index.js
  • packages/bruno-app/src/components/ResponsePane/Placeholder/index.js
🧬 Code graph analysis (2)
packages/bruno-app/src/components/RequestTabPanel/index.js (3)
packages/bruno-app/src/pages/Bruno/index.js (1)
  • isConsoleOpen (61-61)
packages/bruno-app/src/components/ResponsePane/Placeholder/index.js (1)
  • isVerticalLayout (13-13)
packages/bruno-app/src/components/ResponseExample/index.js (1)
  • topPaneHeight (25-25)
packages/bruno-app/src/components/ResponsePane/Placeholder/index.js (5)
packages/bruno-app/src/components/RequestTabPanel/index.js (1)
  • isVerticalLayout (54-54)
packages/bruno-app/src/components/ResponsePane/Overlay/index.js (1)
  • isVerticalLayout (11-11)
packages/bruno-app/src/components/RequestTabPanel/StyledWrapper.js (1)
  • StyledWrapper (3-92)
packages/bruno-app/src/components/ResponsePane/Overlay/StyledWrapper.js (1)
  • StyledWrapper (3-34)
packages/bruno-app/src/components/ResponsePane/Placeholder/StyledWrapper.js (1)
  • StyledWrapper (3-17)
🪛 Biome (2.1.2)
packages/bruno-app/src/components/RequestTabPanel/index.js

[error] 55-55: This hook is being called conditionally, but all hooks must be called in the exact same order in every component render.

Hooks should not be called after an early return.

For React to preserve state between calls, hooks needs to be called unconditionally and always in the same order.
See https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level

(lint/correctness/useHookAtTopLevel)


[error] 77-77: This hook is being called conditionally, but all hooks must be called in the exact same order in every component render.

Hooks should not be called after an early return.

For React to preserve state between calls, hooks needs to be called unconditionally and always in the same order.
See https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level

(lint/correctness/useHookAtTopLevel)


[error] 143-143: This hook is being called conditionally, but all hooks must be called in the exact same order in every component render.

Hooks should not be called after an early return.

For React to preserve state between calls, hooks needs to be called unconditionally and always in the same order.
See https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level

(lint/correctness/useHookAtTopLevel)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (6)
  • GitHub Check: SSL Tests - macOS
  • GitHub Check: SSL Tests - Linux
  • GitHub Check: SSL Tests - Windows
  • GitHub Check: Unit Tests
  • GitHub Check: CLI Tests
  • GitHub Check: Playwright E2E Tests
🔇 Additional comments (1)
packages/bruno-app/src/components/ResponsePane/Placeholder/index.js (1)

15-22: Layout-aware icon sizing and spacing look good

The new iconSize and conditional margin for vertical vs horizontal layouts are wired correctly and keep the behavior purely presentational, consistent with the rest of the layout logic. No changes needed here.


Comment @coderabbitai help to get the list of available commands and usage tips.

@sid-bruno sid-bruno merged commit 639c8e5 into usebruno:main Dec 17, 2025
10 of 11 checks passed
@coderabbitai coderabbitai bot mentioned this pull request Feb 19, 2026
5 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants