Skip to content

fix: update ResponseExampleUrlBar styles for better overflow handling#6535

Merged
bijin-bruno merged 1 commit intousebruno:mainfrom
abhishek-bruno:fix/example-url-overflow
Jan 7, 2026
Merged

fix: update ResponseExampleUrlBar styles for better overflow handling#6535
bijin-bruno merged 1 commit intousebruno:mainfrom
abhishek-bruno:fix/example-url-overflow

Conversation

@abhishek-bruno
Copy link
Member

@abhishek-bruno abhishek-bruno commented Dec 29, 2025

Description

Update ResponseExampleUrlBar styles for better overflow handling.

Fixes #6532

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

  • Style
    • Improved layout and overflow handling in the response example URL area to ensure proper flex sizing and prevent content overflow, enhancing display stability across narrow layouts.

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

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Dec 29, 2025

Walkthrough

Added Tailwind CSS utility classes min-w-0 and overflow-hidden to the ResponseExample URL bar container to prevent URL text from overflowing its flex container.

Changes

Cohort / File(s) Change Summary
Response Example UI Styling
packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleUrlBar/index.js
Added min-w-0 and overflow-hidden to the container div's className to constrain flex-item sizing and hide overflowing URL text.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Suggested reviewers

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

Poem

✨ A URL once spilled beyond the pane,
Now tucked and tidy, calm again.
With min-w-0 and overflow hid,
The layout rests — no more grid skid. 🎉

🚥 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 accurately describes the main change: updating ResponseExampleUrlBar styles to fix overflow handling, which directly addresses the linked issue about URL box overflow.
Linked Issues check ✅ Passed The PR implements CSS-based overflow handling (min-w-0 and overflow-hidden) to address issue #6532's requirement of preventing URL overflow in the response example UI.
Out of Scope Changes check ✅ Passed All changes are scoped to ResponseExampleUrlBar styling for overflow handling, directly aligned with the linked issue requirement; no extraneous modifications detected.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing touches
  • 📝 Generate docstrings

📜 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 be5ae92 and cae5019.

📒 Files selected for processing (1)
  • packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleUrlBar/index.js
🚧 Files skipped from review as they are similar to previous changes (1)
  • packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleUrlBar/index.js
⏰ 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 - Linux
  • GitHub Check: Playwright E2E Tests
  • GitHub Check: CLI Tests
  • GitHub Check: Unit Tests
  • GitHub Check: SSL Tests - macOS
  • GitHub Check: SSL Tests - Windows

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

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

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleUrlBar/index.js (1)

42-49: Pre-existing: Remove duplicate case statements.

Lines 42-43 define cases for OPTIONS and HEAD, which are duplicated at lines 46-49. The second set is unreachable dead code and should be removed.

🔎 Proposed fix
     case 'HEAD':
       return 'method-head';
-    case 'OPTIONS':
-      return 'method-options';
-    case 'HEAD':
-      return 'method-head';
     default:
       return 'method-get';
📜 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 c714e9b and be5ae92.

📒 Files selected for processing (1)
  • packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleUrlBar/index.js
🧰 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/ResponseExample/ResponseExampleRequestPane/ResponseExampleUrlBar/index.js
🧠 Learnings (2)
📚 Learning: 2025-12-02T09:45:31.709Z
Learnt from: sid-bruno
Repo: usebruno/bruno PR: 6266
File: packages/bruno-app/src/components/ResponsePane/ResponseCopy/index.js:38-38
Timestamp: 2025-12-02T09:45:31.709Z
Learning: In the ResponseCopy component (packages/bruno-app/src/components/ResponsePane/ResponseCopy/index.js), the copy button is intentionally disabled using `!response.data` to prevent copying stream resets which result in empty strings.

Applied to files:

  • packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleUrlBar/index.js
📚 Learning: 2025-12-17T21:41:24.730Z
Learnt from: naman-bruno
Repo: usebruno/bruno PR: 6407
File: packages/bruno-app/src/components/Environments/ConfirmCloseEnvironment/index.js:5-41
Timestamp: 2025-12-17T21:41:24.730Z
Learning: Do not suggest PropTypes validation for React components in the Bruno codebase. The project does not use PropTypes, so reviews should avoid proposing PropTypes and rely on the existing typing/validation approach (e.g., TypeScript or alternative runtime checks) if applicable. This guideline applies broadly to all JavaScript/JSX components in the repo.

Applied to files:

  • packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleUrlBar/index.js
⏰ 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: Unit Tests
  • GitHub Check: Playwright E2E Tests
  • GitHub Check: CLI Tests
  • GitHub Check: SSL Tests - macOS
  • GitHub Check: SSL Tests - Windows
  • GitHub Check: SSL Tests - Linux
🔇 Additional comments (1)
packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleUrlBar/index.js (1)

62-65: LGTM! Effective fix for the URL overflow issue.

The addition of min-w-0 and overflow-hidden correctly addresses the flexbox overflow problem. min-w-0 allows the flex item to shrink below its content size (overriding the default min-width: auto), while overflow-hidden ensures content doesn't visually overflow the container. This pairs well with the existing flex-1 class and should resolve issue #6532.

@abhishek-bruno abhishek-bruno force-pushed the fix/example-url-overflow branch from be5ae92 to cae5019 Compare January 7, 2026 09:45
@bijin-bruno bijin-bruno merged commit 2a9386e into usebruno:main Jan 7, 2026
8 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.

Overflow example url

2 participants