Repository navigation
fix (desktop): a couple more fixes to diff sidebar - #385
Conversation
Add max-w-[320px] to sidebar container and max-w-[160px] to file names to prevent unconstrained growth and ensure proper truncation. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
WalkthroughThe pull request adjusts the desktop renderer's file item and sidebar UI layout. Changes include tightening padding in the FileItem component, restructuring filename and stats rendering to display inline with capped widths, and constraining the sidebar width with a maximum width utility. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes
Possibly related PRs
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (1 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 |
🚀 Preview Deployment🔗 Preview Links
Preview updates automatically with new commits |
4bbab7f to
fdcca85
Compare
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/ChangesView/components/FileItem/FileItem.tsx (1)
78-96: Verify that the narrow filename width suits typical file paths.The 130px/150px max-width on the filename is quite narrow. Typical component or module filenames (e.g., "VeryLongComponentName.tsx", "some-feature-module.ts") may frequently truncate, especially with the inline stats taking additional space.
Consider testing with representative file paths from your codebase to ensure the layout remains usable, or slightly increase the max-width if truncation is too aggressive.
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/ChangesView/components/FileItem/FileItem.tsx(2 hunks)apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/index.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (6)
apps/desktop/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (apps/desktop/AGENTS.md)
For Electron interprocess communication, ALWAYS use tRPC as defined in
src/lib/trpc
Files:
apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/index.tsxapps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/ChangesView/components/FileItem/FileItem.tsx
apps/desktop/**/*.{ts,tsx}
📄 CodeRabbit inference engine (apps/desktop/AGENTS.md)
apps/desktop/**/*.{ts,tsx}: Please use alias as defined intsconfig.jsonwhen possible
Prefer zustand for state management if it makes sense. Do not use effect unless absolutely necessary
Files:
apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/index.tsxapps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/ChangesView/components/FileItem/FileItem.tsx
**/*.{ts,tsx,js,jsx,json}
📄 CodeRabbit inference engine (AGENTS.md)
Use Biome for code formatting and linting, running at root level for speed
Files:
apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/index.tsxapps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/ChangesView/components/FileItem/FileItem.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Avoid
anytype and prioritize type safety in TypeScript code
Files:
apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/index.tsxapps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/ChangesView/components/FileItem/FileItem.tsx
**/components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/components/**/*.{ts,tsx}: Structure project folders as one folder per component with PascalCase naming (ComponentName/ComponentName.tsx + index.ts barrel export)
Co-locate component dependencies (utils, hooks, constants, config, tests, stories) next to the file using them
Use one component per file (no multi-component files)
Files:
apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/index.tsxapps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/ChangesView/components/FileItem/FileItem.tsx
apps/desktop/src/renderer/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Call IPC methods from renderer process using window.ipcRenderer.invoke with type-safe object parameters
Files:
apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/index.tsxapps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/ChangesView/components/FileItem/FileItem.tsx
🧠 Learnings (1)
📚 Learning: 2025-12-12T05:45:09.686Z
Learnt from: CR
Repo: superset-sh/superset PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-12T05:45:09.686Z
Learning: Applies to **/components/{ui,ai-elements,react-flow}/**/*.{ts,tsx} : For shadcn/ui components, use kebab-case single files (e.g., button.tsx) in src/components/ui/, src/components/ai-elements, and src/components/react-flow/ directories
Applied to files:
apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/ChangesView/components/FileItem/FileItem.tsx
⏰ 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: Deploy Marketing
- GitHub Check: Deploy API
- GitHub Check: Deploy Docs
- GitHub Check: Deploy Web
- GitHub Check: Deploy Admin
- GitHub Check: Build
🔇 Additional comments (2)
apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/ChangesView/components/FileItem/FileItem.tsx (1)
61-61: LGTM! Padding reduction aligns with layout tightening.The reduced padding (px-2 → px-1) is consistent with the overall goal of making the sidebar more compact and coordinating with the max-width constraint applied to the Sidebar container.
apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/index.tsx (1)
13-13: LGTM! Sidebar width constraint coordinates well with FileItem changes.The
max-w-[320px]constraint is a sensible maximum width for the sidebar and works in harmony with the tighter FileItem layout (reduced padding, inline filename+stats). This ensures the UI remains compact without becoming unusable.
| <span className="max-w-[130px] xl:max-w-[150px] text-xs text-start truncate overflow-hidden text-ellipsis"> | ||
| {fileName} | ||
| </span> |
There was a problem hiding this comment.
Add tooltip to show full filename on truncation.
The filename is constrained to 130px (150px on xl) and will truncate with ellipsis, but there's no way for users to see the full path. This creates an accessibility and usability gap—users cannot identify files with long names.
Consider wrapping the filename span in a Tooltip component (already imported):
<span className="flex-1 min-w-0 flex items-center gap-1">
+ <Tooltip>
+ <TooltipTrigger asChild>
<span className="max-w-[130px] xl:max-w-[150px] text-xs text-start truncate overflow-hidden text-ellipsis">
{fileName}
</span>
+ </TooltipTrigger>
+ <TooltipContent side="right">{file.path}</TooltipContent>
+ </Tooltip>
{showStatsDisplay && (📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <span className="max-w-[130px] xl:max-w-[150px] text-xs text-start truncate overflow-hidden text-ellipsis"> | |
| {fileName} | |
| </span> | |
| <span className="flex-1 min-w-0 flex items-center gap-1"> | |
| <Tooltip> | |
| <TooltipTrigger asChild> | |
| <span className="max-w-[130px] xl:max-w-[150px] text-xs text-start truncate overflow-hidden text-ellipsis"> | |
| {fileName} | |
| </span> | |
| </TooltipTrigger> | |
| <TooltipContent side="right">{file.path}</TooltipContent> | |
| </Tooltip> | |
| {showStatsDisplay && ( |
🤖 Prompt for AI Agents
In
apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/ChangesView/components/FileItem/FileItem.tsx
around lines 79-81, the truncated filename span lacks a way to reveal the full
name; wrap that span inside the already-imported Tooltip component, pass the
full fileName (or full path) as the tooltip content/label, preserve the existing
span classes and text rendering, and add an accessible attribute (e.g.,
aria-label or title) on the span as a fallback so users can see the complete
filename when it’s truncated.
Description
Related Issues
Type of Change
Testing
Screenshots (if applicable)
Additional Notes
Summary by CodeRabbit
Release Notes
✏️ Tip: You can customize this high-level summary in your review settings.