chore: update responsive tab's more icon#6509
Conversation
WalkthroughSingle file modification to the ResponsiveTabs component, replacing the "More" label and down chevron icon with a single right-facing chevron icon of increased size for the overflow menu trigger. Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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. Comment |
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
packages/bruno-app/src/ui/ResponsiveTabs/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()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/ui/ResponsiveTabs/index.js
🧠 Learnings (1)
📚 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/ui/ResponsiveTabs/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 - 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/ui/ResponsiveTabs/index.js (1)
4-4: Import looks good—onlyIconChevronsRightis present with no unused imports.
| <div className="more-tabs select-none flex items-center cursor-pointer gap-1"> | ||
| <span>More</span> | ||
| <IconChevronDown size={14} strokeWidth={2} /> | ||
| <IconChevronsRight size={18} strokeWidth={2} /> | ||
| </div> |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
cat -n packages/bruno-app/src/ui/ResponsiveTabs/index.js | head -280 | tail -40Repository: usebruno/bruno
Length of output: 1426
🏁 Script executed:
# Check the full context around lines 253-255
sed -n '240,260p' packages/bruno-app/src/ui/ResponsiveTabs/index.jsRepository: usebruno/bruno
Length of output: 658
🏁 Script executed:
# Check what icon libraries are imported in this file
head -30 packages/bruno-app/src/ui/ResponsiveTabs/index.jsRepository: usebruno/bruno
Length of output: 1159
🏁 Script executed:
# Search for similar dropdown triggers in the codebase to understand patterns
rg -A3 "aria-label.*[Dd]rop" --type js --type jsx --type ts --type tsx | head -30Repository: usebruno/bruno
Length of output: 85
🏁 Script executed:
# Find other uses of IconChevronsRight to understand its typical usage
rg "IconChevronsRight" --type js --type jsx --type ts --type tsxRepository: usebruno/bruno
Length of output: 85
🏁 Script executed:
find . -name "*MenuDropdown*" -type fRepository: usebruno/bruno
Length of output: 40
🏁 Script executed:
# Check MenuDropdown implementation
cat -n packages/bruno-app/src/ui/MenuDropdown/index.js | head -100Repository: usebruno/bruno
Length of output: 5390
🏁 Script executed:
# Search for other dropdown/menu button patterns with proper accessibility
rg -B2 -A5 "role=\"button\"" --type js --type ts | head -40Repository: usebruno/bruno
Length of output: 1067
🏁 Script executed:
# Check how other dropdown triggers are implemented in the codebase
rg -B3 -A3 "placement=\"bottom" --type js --type ts | head -50Repository: usebruno/bruno
Length of output: 4970
🏁 Script executed:
# Check how MenuDropdown renders its children and if it adds accessibility
sed -n '140,200p' packages/bruno-app/src/ui/MenuDropdown/index.jsRepository: usebruno/bruno
Length of output: 1918
🏁 Script executed:
# Check Dropdown component to see if it handles accessibility on trigger
find . -name "Dropdown.js" -o -name "Dropdown.jsx" | head -5Repository: usebruno/bruno
Length of output: 40
🏁 Script executed:
# Look for uses of IconDots in dropdowns to understand the pattern
rg "IconDots.*size" --type js --type ts -B3 -A3 | head -50Repository: usebruno/bruno
Length of output: 5109
🏁 Script executed:
# Check if there are any other ResponsiveTabs components to understand patterns
rg -l "ResponsiveTabs" --type js --type tsRepository: usebruno/bruno
Length of output: 308
🏁 Script executed:
# Check how ResponsiveTabs is used in other files
grep -n "ResponsiveTabs" packages/bruno-app/src/components/ResponsePane/index.js -A5 | head -20Repository: usebruno/bruno
Length of output: 515
🏁 Script executed:
# Check the Dropdown component to understand how it handles trigger accessibility
find . -path "*/components/Dropdown*" -name "*.js" -o -path "*/components/Dropdown*" -name "*.jsx" | head -1Repository: usebruno/bruno
Length of output: 119
🏁 Script executed:
# Check ActionIcon to see how it provides accessibility
rg -B2 -A8 "export.*ActionIcon" --type js --type ts --type jsxRepository: usebruno/bruno
Length of output: 85
🏁 Script executed:
# Find ActionIcon component
find . -name "*ActionIcon*" -type f | head -5Repository: usebruno/bruno
Length of output: 40
🏁 Script executed:
# Search for ActionIcon definition
rg "const ActionIcon|function ActionIcon|export.*ActionIcon" --type js --type ts -A10 | head -40Repository: usebruno/bruno
Length of output: 844
🏁 Script executed:
# Check how MenuDropdown children (the trigger) is handled for accessibility
sed -n '200,270p' packages/bruno-app/src/ui/MenuDropdown/index.jsRepository: usebruno/bruno
Length of output: 2294
🏁 Script executed:
# Check if the div trigger is wrapped in anything that might add accessibility
sed -n '245,260p' packages/bruno-app/src/ui/ResponsiveTabs/index.jsRepository: usebruno/bruno
Length of output: 561
🏁 Script executed:
# Look at the complete ActionIcon to understand its accessibility support
cat -n packages/bruno-app/src/ui/ActionIcon/index.js | head -50Repository: usebruno/bruno
Length of output: 2379
Use appropriate icon and add accessibility attributes to the dropdown trigger.
Two issues:
-
UX:
IconChevronsRightis semantically incorrect for dropdown triggers. The codebase consistently usesIconDotsorIconDotsVerticalfor menu triggers. Right-facing chevrons indicate "fast forward" or "skip", not "more options". -
Accessibility: The trigger
divlacks required accessibility attributes. UseActionIconcomponent (already used throughout the codebase for dropdown triggers) or addaria-label,role="button", andtabIndex={0}to the div.
🤖 Prompt for AI Agents
In packages/bruno-app/src/ui/ResponsiveTabs/index.js around lines 253 to 255,
the dropdown trigger uses IconChevronsRight and a bare div without accessibility
attributes; replace the chevrons icon with the project-standard IconDots or
IconDotsVertical and either wrap/replace the div with the existing ActionIcon
component used for menu triggers or, if keeping a div, add role="button",
tabIndex={0} and an appropriate aria-label (e.g., "More options") and ensure
click/keyboard handlers work for Enter/Space; update imports as needed.
* chore: playwright fix (#6507) * chore: update responsive tab's more icon (#6509) * refactor: replace button elements with new Button component (#6512) * refactor: replace button elements with new Button component * chore: fix button size for consistency --------- Co-authored-by: Bijin A B <bijin@usebruno.com> * feat: `collection-level` and `app-level` proxy settings updates (#6514) * feat: collection and app proxy settings updates * fix: opencollection proxy config export and import * fix: coderabbit review fixes * chore: fix minor runtime warnings (#6518) --------- Co-authored-by: Sanjai Kumar <161328623+sanjaikumar-bruno@users.noreply.github.com> Co-authored-by: lohit <lohit@usebruno.com>
Description
Update responsive tab's more icon
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
✏️ Tip: You can customize this high-level summary in your review settings.