fix: add fixed space for scrollbar on flow sidebar#9886
Conversation
|
Important Review skippedAuto incremental reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the WalkthroughThis PR applies presentational updates to the FlowPage sidebar: adds right padding (pr-2) to SidebarGroup instances, introduces a gutter-stable utility for scrollbar-gutter, applies it to SidebarContent, and adjusts a CSS max-width calculation accounting for a 2px border. Corresponding tests are updated. One import is converted to type-only. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
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 |
github-actions
Bot
added
bug
Frontend Unit Test Coverage ReportCoverage Summary
Unit Test Results
|
Codecov Report✅ All modified and coverable lines are covered by tests. ❌ Your project status has failed because the head coverage (47.03%) is below the target coverage (55.00%). You can increase the head coverage or adjust the target coverage. Additional details and impacted files@@ Coverage Diff @@
## main #9886 +/- ##
==========================================
- Coverage 24.19% 24.04% -0.15%
==========================================
Files 1091 1093 +2
Lines 40014 39863 -151
Branches 5543 5543
==========================================
- Hits 9681 9587 -94
+ Misses 30162 30105 -57
Partials 171 171
Flags with carried forward coverage won't be shown. Click here to find out more.
🚀 New features to boost your workflow:
|
github-actions
Bot
added
bug
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (5)
src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/categoryGroup.tsx (1)
28-28: Clarify padding intent:pr-2overridesp-3right padding (net = 0.5rem, not 0.75rem).If the goal was extra right space near the scrollbar, this actually reduces it. If intentional, ignore; otherwise, make side paddings explicit.
- <SidebarGroup className="p-3 pr-2"> + <SidebarGroup className="pl-3 pr-2 py-3">src/frontend/tailwind.config.mjs (1)
376-378: Good utility; consider RTL/overlay safety.Optionally add a variant reserving space on both edges and ensure the target has overflow set to auto/scroll.
".gutter-stable": { - "scrollbar-gutter": "stable", + "scrollbar-gutter": "stable", }, + ".gutter-stable-both": { + "scrollbar-gutter": "stable both-edges", + },src/frontend/src/App.css (1)
229-229: Max‑width adjustment looks right; confirm border is always 2px.If border width varies per theme/state, consider a CSS var (e.g.,
--sidebar-border-width) to avoid drift.src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/sidebarBundles.tsx (1)
44-44: Same padding note:pr-2lowers right padding vsp-3.Confirm intent; otherwise, make side paddings explicit for clarity/consistency.
- <SidebarGroup className="p-3 pr-2"> + <SidebarGroup className="pl-3 pr-2 py-3">src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/McpSidebarGroup.tsx (1)
90-90: Padding change mirrors others; verify the net decrease is desired.
p-3 pr-2${!hasMcpServers ? " h-full" : ""}reduces right padding; keep if intentional.- <SidebarGroup className={`p-3 pr-2${!hasMcpServers ? " h-full" : ""}`}> + <SidebarGroup className={`pl-3 pr-2 py-3${!hasMcpServers ? " h-full" : ""}`}>
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
src/frontend/src/App.css(1 hunks)src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/McpSidebarGroup.tsx(2 hunks)src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/__tests__/McpSidebarGroup.test.tsx(3 hunks)src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/__tests__/sidebarBundles.test.tsx(1 hunks)src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/categoryGroup.tsx(1 hunks)src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/sidebarBundles.tsx(1 hunks)src/frontend/src/pages/FlowPage/components/flowSidebarComponent/index.tsx(1 hunks)src/frontend/tailwind.config.mjs(1 hunks)
🧰 Additional context used
📓 Path-based instructions (5)
src/frontend/tailwind.config.*
📄 CodeRabbit inference engine (.cursor/rules/frontend_development.mdc)
Use Tailwind CSS for styling all frontend components.
Files:
src/frontend/tailwind.config.mjs
src/frontend/@(package*.json|tsconfig.json|tailwind.config.*|vite.config.*)
📄 CodeRabbit inference engine (.cursor/rules/frontend_development.mdc)
Frontend configuration files such as package.json, tsconfig.json, and Tailwind/Vite configs must be maintained and updated as needed.
Files:
src/frontend/tailwind.config.mjs
src/frontend/src/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursor/rules/frontend_development.mdc)
src/frontend/src/**/*.{ts,tsx,js,jsx}: All frontend TypeScript and JavaScript code should be located under src/frontend/src/ and organized into components, pages, icons, stores, types, utils, hooks, services, and assets directories as per the specified directory layout.
Use React 18 with TypeScript for all UI components in the frontend.
Format all TypeScript and JavaScript code using the make format_frontend command.
Lint all TypeScript and JavaScript code using the make lint command.
Files:
src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/__tests__/sidebarBundles.test.tsxsrc/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/categoryGroup.tsxsrc/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/sidebarBundles.tsxsrc/frontend/src/pages/FlowPage/components/flowSidebarComponent/index.tsxsrc/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/McpSidebarGroup.tsxsrc/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/__tests__/McpSidebarGroup.test.tsx
src/frontend/src/**/__tests__/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursor/rules/frontend_development.mdc)
All frontend code should be tested using appropriate component and integration tests.
Files:
src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/__tests__/sidebarBundles.test.tsxsrc/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/__tests__/McpSidebarGroup.test.tsx
src/frontend/**/*.@(test|spec).{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursor/rules/testing.mdc)
src/frontend/**/*.@(test|spec).{ts,tsx,js,jsx}: Frontend test files should be located in 'src/frontend/' and use '.test.{ts,tsx,js,jsx}' or '.spec.{ts,tsx,js,jsx}' extensions.
Test both sync and async code paths in frontend test files.
Mock external dependencies appropriately in frontend test files to isolate unit tests from external services.
Test error handling and edge cases in frontend test files.
Validate input/output behavior and test component initialization and configuration in frontend test files.
Each frontend test should have a clear description or comment explaining its purpose, especially for complex setups or mocks.
Files:
src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/__tests__/sidebarBundles.test.tsxsrc/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/__tests__/McpSidebarGroup.test.tsx
🧠 Learnings (3)
📚 Learning: 2025-07-18T18:26:42.027Z
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/docs_development.mdc:0-0
Timestamp: 2025-07-18T18:26:42.027Z
Learning: Applies to docs/sidebars.js : Sidebar navigation must be updated in docs/sidebars.js to reflect new or reorganized documentation content.
Applied to files:
src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/sidebarBundles.tsx
📚 Learning: 2025-07-18T18:27:12.609Z
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-07-18T18:27:12.609Z
Learning: Applies to src/frontend/src/components/**/@(FlowGraph|nodes)/**/*.{ts,tsx,js,jsx} : Use React Flow for flow graph visualization components.
Applied to files:
src/frontend/src/pages/FlowPage/components/flowSidebarComponent/index.tsx
📚 Learning: 2025-06-23T12:46:42.048Z
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-23T12:46:42.048Z
Learning: Frontend tests should be written using testing-library/react, with both component and integration tests verifying rendering, user interaction, and data loading.
Applied to files:
src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/__tests__/McpSidebarGroup.test.tsx
🧬 Code graph analysis (1)
src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/McpSidebarGroup.tsx (1)
src/frontend/src/components/ui/sidebar.tsx (1)
SidebarGroup(848-848)
⏰ 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). (12)
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 5/11
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 11/11
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 10/11
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 7/11
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 3/11
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 8/11
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 9/11
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 1/11
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 2/11
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 4/11
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 6/11
- GitHub Check: Test Starter Templates
🔇 Additional comments (6)
src/frontend/src/pages/FlowPage/components/flowSidebarComponent/index.tsx (1)
529-529: LGTM: applyinggutter-stableat the scroll container.Verify SidebarContent is the element with overflow to ensure the property takes effect.
src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/__tests__/sidebarBundles.test.tsx (1)
130-130: Test expectation updated forpr-2— matches component.No further issues.
src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/McpSidebarGroup.tsx (1)
11-11: Type‑only import is correct.This tightens type semantics and trims JS output.
src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/__tests__/McpSidebarGroup.test.tsx (3)
4-4: Type‑only import in tests: good.Keeps TS emit clean.
532-536: Expectation for classes (includingpr-2and conditionalh-full) is correct.Matches component logic.
549-549: Expectation includespr-2for hasMcpServers=true case — correct.Consistent with component markup.
github-actions
Bot
added
bug
github-actions
Bot
added
bug
github-merge-queue
Bot
removed this pull request from the merge queue due to failed status checks
github-actions
Bot
added
bug
github-actions
Bot
added
bug
|
3 participants
This pull request focuses on improving sidebar layout consistency and code quality in the frontend. The main changes include adding a right padding (
pr-2) to sidebar group components for better spacing, updating related tests, and introducing a utility CSS class to stabilize scrollbars. There are also minor improvements to TypeScript import style.Sidebar layout and style improvements:
pr-2(right padding) to allSidebarGroupcomponents for consistent spacing inMcpSidebarGroup,CategoryGroup, andsidebarBundles(McpSidebarGroup.tsx,categoryGroup.tsx,sidebarBundles.tsx) [1] [2] [3].max-widthcalculation inApp.cssto account for a 2px border, preventing overflow.App.cssfor improved readability.Testing updates:
pr-2class in sidebar group components, ensuring test accuracy (McpSidebarGroup.test.tsx,sidebarBundles.test.tsx) [1] [2] [3].Utility and code quality:
.gutter-stableutility class intailwind.config.mjsto stabilize scrollbars and applied it to the main sidebar content (index.tsx) [1] [2].import typeforAPIClassTypein both implementation and test files for better type-only import semantics [1] [2].Summary by CodeRabbit