Repository navigation
fix(desktop): more consistent layout - #287
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughRefactors UI spacing and sizing: button and toolbar spacing in TabPane, mosaic split/hover/drop visuals in CSS, TerminalSearch positioning and compact sizing, and WorkspaceView padding/background relocation. No logic or public API changes. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes
Possibly related PRs
Poem
Pre-merge checks and finishing touches❌ Failed checks (2 warnings)
✅ Passed checks (1 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
⏰ 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). (1)
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 Cleanup CompleteThe following preview resources have been cleaned up:
Thank you for your contribution! 🎉 |
- Consolidate padding to WorkspaceView level only (symmetric p-2) - Use consistent hover states: hover:bg-muted-foreground/20 (theme-aware) - Use consistent icon sizes: size-4 across all toolbar buttons - Use consistent button padding: p-1 for all toolbar buttons - Fix mosaic split handle hover to use theme variable - Fix drop target border color typo (130 vs 131) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
87eb2c1 to
c96db20
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
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/TabPane.tsx(1 hunks)apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/mosaic-theme.css(1 hunks)apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/Terminal/TerminalSearch/TerminalSearch.tsx(1 hunks)apps/desktop/src/renderer/screens/main/components/WorkspaceView/index.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (5)
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/index.tsxapps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/Terminal/TerminalSearch/TerminalSearch.tsxapps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/TabPane.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/index.tsxapps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/Terminal/TerminalSearch/TerminalSearch.tsxapps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/TabPane.tsx
**/{components,pages}/**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
**/{components,pages}/**/*.tsx: Use one folder per component with structureComponentName/ComponentName.tsxplusindex.tsfor barrel export
Create one component per file - do not use multi-component files
Files:
apps/desktop/src/renderer/screens/main/components/WorkspaceView/index.tsxapps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/Terminal/TerminalSearch/TerminalSearch.tsxapps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/TabPane.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx}: Co-locate component dependencies (utils, hooks, constants, config, tests, stories) next to the file using them
Avoidanytype in TypeScript unless absolutely necessary
Files:
apps/desktop/src/renderer/screens/main/components/WorkspaceView/index.tsxapps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/Terminal/TerminalSearch/TerminalSearch.tsxapps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/TabPane.tsx
apps/desktop/src/{renderer,shared,preload}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Never import Node.js modules in renderer process code or shared code in the desktop app
Files:
apps/desktop/src/renderer/screens/main/components/WorkspaceView/index.tsxapps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/Terminal/TerminalSearch/TerminalSearch.tsxapps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/TabPane.tsx
🧠 Learnings (1)
📚 Learning: 2025-12-06T18:44:13.290Z
Learnt from: CR
Repo: superset-sh/superset PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-06T18:44:13.290Z
Learning: Applies to src/components/{ui,ai-elements,react-flow}/**/*.tsx : Shadcn/ui components in `src/components/ui/`, `src/components/ai-elements`, and `src/components/react-flow/` use kebab-case single files (e.g., `button.tsx`) for shadcn CLI compatibility
Applied to files:
apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/Terminal/TerminalSearch/TerminalSearch.tsx
🧬 Code graph analysis (1)
apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/Terminal/TerminalSearch/TerminalSearch.tsx (1)
packages/ui/src/components/tooltip.tsx (3)
Tooltip(74-74)TooltipTrigger(74-74)TooltipContent(74-74)
🔇 Additional comments (5)
apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/TabPane.tsx (1)
119-136: LGTM! Toolbar styling refinements improve visual consistency.The reduced gap between controls and updated button styling (from
rounded-fullwith minimal padding toroundedwith more padding, plus explicit text colors) create a more cohesive design that aligns with the broader UI polish in this PR.apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/mosaic-theme.css (2)
69-82: LGTM! Transition and interaction polish improve responsiveness.The faster transitions (0.15s vs 0.2s) and refined hover/drag states create a snappier, more cohesive user experience. The consolidated selectors and updated active state background enhance maintainability.
84-90: LGTM! Subtler drop target visual reduces distraction.Reducing the background alpha from 0.2 to 0.15 while maintaining the border at 0.4 creates a more refined drag-and-drop experience without sacrificing clarity.
apps/desktop/src/renderer/screens/main/components/WorkspaceView/index.tsx (1)
128-132: LGTM! Layout reorganization improves box model clarity.The restructuring moves background styling and rounded corners from the outer wrapper to the inner container while replacing margins with padding. This creates cleaner separation of layout concerns and better control over spacing. The updated border radius (
rounded-lgvsrounded) provides subtle visual refinement.Since this is a layout refactor, verify that the visual appearance remains consistent across different viewport sizes and when the sidebar is expanded/collapsed.
apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/Terminal/TerminalSearch/TerminalSearch.tsx (1)
128-177: LGTM! Search UI refinements create more compact, consistent controls.The sizing adjustments across the search input and all control buttons create a more polished, space-efficient interface:
- Input with responsive width behavior (
min-w-0 w-28 flex-shrink)- Consistent button styling with explicit hover states
- Reduced icon sizes (
size-3.5vssize-4) for tighter visual density- Proper flex-shrink controls prevent layout collapse
These changes align well with the toolbar refinements in TabPane.tsx and the broader UI consistency goals of this PR.
|
|
||
| return ( | ||
| <div className="absolute top-2 right-3 z-10 flex items-center rounded-md bg-popover/95 shadow-lg ring-1 ring-border/40 backdrop-blur"> | ||
| <div className="absolute top-1.5 right-1.5 z-10 flex items-center max-w-[calc(100%-0.75rem)] rounded bg-popover/95 pl-2 pr-0.5 shadow-lg ring-1 ring-border/40 backdrop-blur"> |
There was a problem hiding this comment.
Verify max-width calculation for positioned element.
The container is positioned right-1.5 (1.5rem/24px from the right edge) but uses max-w-[calc(100%-0.75rem)] (subtracting only 0.75rem/12px). This seems inconsistent—if the element needs clearance on both sides, the calculation should account for the positioning offset.
Consider whether this should be:
calc(100%-3rem)to account for 1.5rem clearance on both left and rightcalc(100%-1.5rem)if only accounting for the right-side positioning- Or clarify if the current 0.75rem value is intentional for a specific layout reason
Apply this diff if symmetric clearance is intended:
- <div className="absolute top-1.5 right-1.5 z-10 flex items-center max-w-[calc(100%-0.75rem)] rounded bg-popover/95 pl-2 pr-0.5 shadow-lg ring-1 ring-border/40 backdrop-blur">
+ <div className="absolute top-1.5 right-1.5 z-10 flex items-center max-w-[calc(100%-3rem)] rounded bg-popover/95 pl-2 pr-0.5 shadow-lg ring-1 ring-border/40 backdrop-blur">📝 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.
| <div className="absolute top-1.5 right-1.5 z-10 flex items-center max-w-[calc(100%-0.75rem)] rounded bg-popover/95 pl-2 pr-0.5 shadow-lg ring-1 ring-border/40 backdrop-blur"> | |
| <div className="absolute top-1.5 right-1.5 z-10 flex items-center max-w-[calc(100%-3rem)] rounded bg-popover/95 pl-2 pr-0.5 shadow-lg ring-1 ring-border/40 backdrop-blur"> |
🤖 Prompt for AI Agents
In
apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/Terminal/TerminalSearch/TerminalSearch.tsx
around line 120, the positioned container uses right-1.5 (1.5rem) but its
max-width subtracts only 0.75rem (max-w-[calc(100%-0.75rem)]), which is
inconsistent; if you intend symmetric clearance on both sides, change the
max-width calculation to subtract 3rem (max-w-[calc(100%-3rem)]) so it accounts
for 1.5rem on left and right, otherwise adjust to calc(100%-1.5rem) if you only
need to account for the right-side offset—update the class accordingly to match
the intended clearance.
Description
Related Issues
Type of Change
Testing
Screenshots (if applicable)
Additional Notes
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.