Conversation
WalkthroughThe pull request applies UI refinements across multiple components: adjusts RequestTabs spacing and active-tab chevron styling, adds auto-scroll behavior to active sidebar items (ExampleItem and Collection), removes explicit background styling from workspace cards, and updates the CreateWorkspace location input with Help component documentation and click-to-browse functionality. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 inconclusive)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (3)
packages/bruno-app/src/components/Sidebar/Collections/Collection/index.js (1)
248-256: Auto-scroll on focused collection is safe; consider a small shared hookThe new effect cleanly scrolls the focused collection into view, guarded by both the flag and ref plus a try/catch, so it’s low-risk and won’t throw in odd DOM states.
If you find yourself repeating this pattern (e.g. with examples), you could extract a tiny hook like
useScrollIntoViewOnActive(ref, isActive)to keep behavior consistent and testable, but it’s not required for this PR.packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/index.js (1)
29-29: Example auto-scroll behavior is correct and matches collection behavior
exampleRef+ theuseEffectkeyed onisExampleActiveis a straightforward, robust way to ensure the active example is brought into view, and attaching the ref toStyledWrapperis appropriate for a styled div.Given you now have essentially the same scroll-into-view pattern here and in
Collection/index.js, you could optionally wrap it in a shared hook (useScrollIntoViewOnActive) to centralize behavior and keep future tweaks (e.g. scroll options) in one place.Also applies to: 61-69, 151-151
packages/bruno-app/src/components/RequestTabs/ExampleTab/index.js (1)
77-77: Spacing changes look fine; consider aligning not-found state paddingReducing the outer padding to
px-2and dropping extra padding on.tab-labelis consistent with the updated tabs styling and shouldn’t affect behavior.One minor thing to consider: the “not found” branch above still uses
px-3on itsStyledWrapper. If you want perfectly consistent horizontal spacing between normal example tabs and the not-found placeholder, you could switch that topx-2as well, but it’s cosmetic.Also applies to: 105-105
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
packages/bruno-app/src/components/RequestTabs/ExampleTab/index.js(2 hunks)packages/bruno-app/src/components/RequestTabs/StyledWrapper.js(2 hunks)packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/index.js(3 hunks)packages/bruno-app/src/components/Sidebar/Collections/Collection/index.js(1 hunks)packages/bruno-app/src/components/WorkspaceHome/WorkspaceOverview/CollectionsList/StyledWrapper.js(0 hunks)packages/bruno-app/src/components/WorkspaceSidebar/CreateWorkspace/index.js(2 hunks)
💤 Files with no reviewable changes (1)
- packages/bruno-app/src/components/WorkspaceHome/WorkspaceOverview/CollectionsList/StyledWrapper.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()notfunc ()
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/Sidebar/Collections/Collection/index.jspackages/bruno-app/src/components/RequestTabs/StyledWrapper.jspackages/bruno-app/src/components/RequestTabs/ExampleTab/index.jspackages/bruno-app/src/components/WorkspaceSidebar/CreateWorkspace/index.jspackages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/index.js
🧠 Learnings (2)
📚 Learning: 2025-12-05T20:31:33.005Z
Learnt from: CR
Repo: usebruno/bruno PR: 0
File: CODING_STANDARDS.md:0-0
Timestamp: 2025-12-05T20:31:33.005Z
Learning: Applies to **/*.{jsx,tsx} : Styled Components are used as wrappers to define both self and children components style; Tailwind classes are used specifically for layout based styles
Applied to files:
packages/bruno-app/src/components/RequestTabs/StyledWrapper.js
📚 Learning: 2025-12-05T20:31:33.005Z
Learnt from: CR
Repo: usebruno/bruno PR: 0
File: CODING_STANDARDS.md:0-0
Timestamp: 2025-12-05T20:31:33.005Z
Learning: Applies to **/*.{jsx,tsx} : Styled Component CSS might also change layout but Tailwind classes shouldn't define colors
Applied to files:
packages/bruno-app/src/components/RequestTabs/StyledWrapper.js
🧬 Code graph analysis (2)
packages/bruno-app/src/components/RequestTabs/ExampleTab/index.js (1)
packages/bruno-app/src/components/RequestTabs/RequestTab/StyledWrapper.js (1)
StyledWrapper(3-31)
packages/bruno-app/src/components/WorkspaceSidebar/CreateWorkspace/index.js (1)
packages/bruno-app/src/components/Help/index.js (1)
Help(11-38)
⏰ 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: Playwright E2E Tests
- GitHub Check: CLI Tests
- GitHub Check: Unit Tests
- GitHub Check: SSL Tests - Windows
- GitHub Check: SSL Tests - macOS
- GitHub Check: SSL Tests - Linux
🔇 Additional comments (1)
packages/bruno-app/src/components/RequestTabs/StyledWrapper.js (1)
36-36: Visual tweaks to padding and chevron styling in StyledWrapperPadding adjustment to
0 3pxand chevron offset/radius tweaks are CSS-only changes within the styled-component. Verify that colors continue to use theme tokens rather than CSS variables, and consider a quick visual check in both light and dark modes to ensure the new offsets align properly with the tab border.
| import { browseDirectory } from 'providers/ReduxStore/slices/collections/actions'; | ||
| import { multiLineMsg } from 'utils/common/index'; | ||
| import { formatIpcError } from 'utils/common/error'; | ||
| import Help from 'components/Help'; |
There was a problem hiding this comment.
Nice UX improvement on location field; fix the label/input linkage
The Help tooltip and making the read-only location input clickable via onClick={browse} are good usability wins, and cursor-pointer reinforces that.
There’s a small accessibility/linkage issue though: the label’s htmlFor doesn’t match the input’s id, so clicking the label won’t focus/trigger the input, and screen readers won’t associate them correctly.
You can fix this by aligning the htmlFor with the existing input id:
- <label htmlFor="workspaceLocation" className="font-semibold mb-2 flex items-center">
+ <label htmlFor="workspace-location" className="font-semibold mb-2 flex items-center">After that, clicking “Location” will also activate the input’s onClick and open the directory picker.
Also applies to: 110-120, 127-127, 133-133
🤖 Prompt for AI Agents
In packages/bruno-app/src/components/WorkspaceSidebar/CreateWorkspace/index.js
around lines 11, 110-120, 127, and 133, the label htmlFor attributes do not
match the corresponding input id(s), breaking click-to-focus and screen reader
association; update each label's htmlFor to exactly match the input's id (or
assign a matching id to the input if missing) for the read-only location field
so clicking the "Location" label triggers the input's onClick and the Help
tooltip remains intact.
fixes:
Contribution Checklist:
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
Style
✏️ Tip: You can customize this high-level summary in your review settings.