fix(ui): larger collapsed-sidebar icons (Projects/History/Exports) - #192
Conversation
…llapsed The collapsed sidebar rail showed the tab icons at size 13 — too small to read as the only affordance. Bump to 18 when collapsed; the expanded tab bar keeps 13. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughThe Sidebar component now renders tab icons at responsive sizes based on the sidebar's collapse state. When collapsed, icons display larger; when expanded, they display smaller. This is implemented by switching the ChangesSidebar Icon Sizing
🎯 1 (Trivial) | ⏱️ ~2 minutes 🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
ESLint skipped: no ESLint configuration detected in root package.json. To enable, add 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 |
|
| Filename | Overview |
|---|---|
| frontend/src/components/Sidebar.jsx | Single-line change bumps tab icon size prop from 13 to 18 when sidebar is collapsed; redundant with a pre-existing CSS rule that already enforces 18×18 on those same SVG elements |
Flowchart
%%{init: {'theme': 'neutral'}}%%
flowchart TD
A[Sidebar renders tab bar] --> B{isSidebarCollapsed?}
B -- yes --> C["Icon size prop = 18"]
B -- no --> D["Icon size prop = 13"]
C --> E["SVG width/height attr = 18"]
D --> F["SVG width/height attr = 13"]
E --> G["CSS rule: .is-collapsed .sidebar__tab svg\nwidth: 18px; height: 18px"]
F --> H["No CSS override — renders at 13px"]
G --> I["Renders at 18px ✓"]
style G fill:#faad14,color:#000
style E fill:#52c41a,color:#000
style I fill:#52c41a,color:#000
Reviews (1): Last reviewed commit: "fix(ui): larger Projects/History/Exports..." | Re-trigger Greptile
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| title={`${tabLabel[id]} (${tabCount[id]})`} | ||
| > | ||
| <Icon size={13} /> | ||
| <Icon size={isSidebarCollapsed ? 18 : 13} /> |
There was a problem hiding this comment.
Sidebar.css already has .sidebar.is-collapsed .sidebar__tab svg { width: 18px; height: 18px; } (lines 26-29), which overrides Lucide's SVG presentation attributes regardless of what the size prop is set to. This means the icons were already rendering at 18×18 when collapsed before this change — the described bug may not have actually existed. The new ternary is harmless and makes the prop value self-documenting, but it is redundant with the CSS rule. Consider removing the CSS override (keeping only the JS prop) or the JS ternary (keeping only the CSS), so the two sources of truth don't diverge silently if either is changed later.
Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!
1 participant
When the sidebar is collapsed, the Projects/History/Exports tab icons were rendered at
size=13— too small as the sole affordance. Bumped to 18 when collapsed (expanded tab bar keeps 13). typecheck/build ✓.🤖 Generated with Claude Code
Summary by CodeRabbit