Fix: Allow refresh list button to stay stagnant while zoom (Safari) #10777
Conversation
WalkthroughRemoves sticky positioning from the dropdown footer refresh list container, changing its layout to scroll naturally within the popover. Additionally includes minor formatting and indentation adjustments to a test suite file without functional changes. Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes
Possibly related PRs
Suggested labels
Suggested reviewers
Pre-merge checks and finishing touchesImportant Pre-merge checks failedPlease resolve all errors before merging. Addressing warnings is optional. ❌ Failed checks (1 error, 2 warnings)
✅ Passed checks (4 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 |
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 (40.04%) is below the target coverage (60.00%). You can increase the head coverage or adjust the target coverage. Additional details and impacted files@@ Coverage Diff @@
## main #10777 +/- ##
=======================================
Coverage 32.39% 32.39%
=======================================
Files 1368 1368
Lines 63414 63414
Branches 9373 9373
=======================================
Hits 20541 20541
Misses 41840 41840
Partials 1033 1033
Flags with carried forward coverage won't be shown. Click here to find out more.
🚀 New features to boost your workflow:
|
![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 (1)
src/frontend/tests/core/unit/codeAreaModalComponent.spec.ts (1)
5-103: Playwright test remains behaviorally sound; consider adding a brief scenario commentThe test structure, selectors, and assertions still exercise real user behavior (bootstrap → open modal → validate error on invalid code → ensure code persists), and your changes here are effectively formatting only, so behavior is preserved and looks good.
Given the repo’s testing guidelines for
*.spec.tsundersrc/frontend/**, you might want to add a short comment above this test explaining the scenario and expected outcome (e.g., “verifies CodeArea modal validates syntax errors and saves valid custom component code”), to make the test’s intent clearer when scanning the suite. This is non-blocking and can be done in a follow‑up.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/frontend/src/components/core/dropdownComponent/index.tsx(1 hunks)src/frontend/tests/core/unit/codeAreaModalComponent.spec.ts(3 hunks)
🧰 Additional context used
📓 Path-based instructions (6)
src/frontend/**/*.{test,spec}.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursor/rules/testing.mdc)
src/frontend/**/*.{test,spec}.{ts,tsx,js,jsx}: Use@pytest.mark.asynciodecorator for async frontend tests; structure tests to verify component behavior, state updates, and proper cleanup
Frontend tests should validate component rendering, user interactions, state management, and async operations using appropriate testing libraries (React Testing Library, Vitest, Jest, etc.)
Document each frontend test with a clear docstring/comment explaining its purpose, the scenario being tested, and expected outcomes
Files:
src/frontend/tests/core/unit/codeAreaModalComponent.spec.ts
**/*.{test.ts,test.tsx,spec.ts,spec.tsx,test_*.py}
📄 CodeRabbit inference engine (Custom checks)
**/*.{test.ts,test.tsx,spec.ts,spec.tsx,test_*.py}: Review test files for excessive use of mocks that may indicate poor test design - check if tests have too many mock objects that obscure what's actually being tested
Warn when mocks are used instead of testing real behavior and interactions
Suggest using real objects or test doubles when mocks become excessive
Ensure mocks are used appropriately for external dependencies, not core logic
Test files should have descriptive test function names that explain what is being tested
Tests should be organized logically with proper setup and teardown
Consider including edge cases and error conditions for comprehensive coverage
Verify tests cover both positive and negative scenarios where appropriate
Tests should cover the main functionality being implemented
Check that tests are not just smoke tests but actually validate behavior
Ensure tests follow the project's testing patterns (pytest for backend, Playwright for frontend)
For API endpoints, verify both success and error response testing
Files:
src/frontend/tests/core/unit/codeAreaModalComponent.spec.ts
src/frontend/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/frontend_development.mdc)
src/frontend/src/**/*.{ts,tsx}: Use React 18 with TypeScript for frontend development
Use Zustand for state management
Files:
src/frontend/src/components/core/dropdownComponent/index.tsx
src/frontend/src/**/*.{tsx,jsx,css,scss}
📄 CodeRabbit inference engine (.cursor/rules/frontend_development.mdc)
Use Tailwind CSS for styling
Files:
src/frontend/src/components/core/dropdownComponent/index.tsx
src/frontend/src/components/**/*.{tsx,jsx}
📄 CodeRabbit inference engine (.cursor/rules/frontend_development.mdc)
src/frontend/src/components/**/*.{tsx,jsx}: Use React Flow for flow graph visualization with Node, Edge, Controls, and Background components
Use the cn() utility function for combining Tailwind CSS classes in components
Use TypeScript interfaces for defining component props in React components
Files:
src/frontend/src/components/core/dropdownComponent/index.tsx
src/frontend/src/**/*.{tsx,jsx}
📄 CodeRabbit inference engine (.cursor/rules/frontend_development.mdc)
src/frontend/src/**/*.{tsx,jsx}: Implement dark mode support using the useDarkMode hook and dark store
Use Lucide React for icon components in the application
Files:
src/frontend/src/components/core/dropdownComponent/index.tsx
🧠 Learnings (11)
📚 Learning: 2025-11-24T19:47:28.997Z
Learnt from: CR
Repo: langflow-ai/langflow PR: 0
File: .cursor/rules/testing.mdc:0-0
Timestamp: 2025-11-24T19:47:28.997Z
Learning: Applies to src/frontend/**/*.{test,spec}.{ts,tsx,js,jsx} : Document each frontend test with a clear docstring/comment explaining its purpose, the scenario being tested, and expected outcomes
Applied to files:
src/frontend/tests/core/unit/codeAreaModalComponent.spec.ts
📚 Learning: 2025-11-24T19:47:40.400Z
Learnt from: CR
Repo: langflow-ai/langflow PR: 0
File: coderabbit-custom-pre-merge-checks-unique-id-file-non-traceable-F7F2B60C-1728-4C9A-8889-4F2235E186CA.txt:0-0
Timestamp: 2025-11-24T19:47:40.400Z
Learning: Applies to **/*.{test.ts,test.tsx,spec.ts,spec.tsx,test_*.py} : Ensure tests follow the project's testing patterns (pytest for backend, Playwright for frontend)
Applied to files:
src/frontend/tests/core/unit/codeAreaModalComponent.spec.ts
📚 Learning: 2025-11-24T19:47:40.400Z
Learnt from: CR
Repo: langflow-ai/langflow PR: 0
File: coderabbit-custom-pre-merge-checks-unique-id-file-non-traceable-F7F2B60C-1728-4C9A-8889-4F2235E186CA.txt:0-0
Timestamp: 2025-11-24T19:47:40.400Z
Learning: Applies to **/*.{test.ts,test.tsx,spec.ts,spec.tsx,test_*.py} : Tests should cover the main functionality being implemented
Applied to files:
src/frontend/tests/core/unit/codeAreaModalComponent.spec.ts
📚 Learning: 2025-11-24T19:47:40.400Z
Learnt from: CR
Repo: langflow-ai/langflow PR: 0
File: coderabbit-custom-pre-merge-checks-unique-id-file-non-traceable-F7F2B60C-1728-4C9A-8889-4F2235E186CA.txt:0-0
Timestamp: 2025-11-24T19:47:40.400Z
Learning: Applies to **/*.{test.ts,test.tsx,spec.ts,spec.tsx,test_*.py} : Consider including edge cases and error conditions for comprehensive coverage
Applied to files:
src/frontend/tests/core/unit/codeAreaModalComponent.spec.ts
📚 Learning: 2025-11-24T19:46:45.790Z
Learnt from: CR
Repo: langflow-ai/langflow PR: 0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-11-24T19:46:45.790Z
Learning: Applies to src/frontend/**/*.test.{ts,tsx} : Write component tests using React Testing Library with render(), screen, and fireEvent utilities
Applied to files:
src/frontend/tests/core/unit/codeAreaModalComponent.spec.ts
📚 Learning: 2025-11-24T19:47:28.997Z
Learnt from: CR
Repo: langflow-ai/langflow PR: 0
File: .cursor/rules/testing.mdc:0-0
Timestamp: 2025-11-24T19:47:28.997Z
Learning: Applies to src/frontend/**/*.{test,spec}.{ts,tsx,js,jsx} : Frontend tests should validate component rendering, user interactions, state management, and async operations using appropriate testing libraries (React Testing Library, Vitest, Jest, etc.)
Applied to files:
src/frontend/tests/core/unit/codeAreaModalComponent.spec.ts
📚 Learning: 2025-07-11T22:12:46.255Z
Learnt from: namastex888
Repo: langflow-ai/langflow PR: 9018
File: src/frontend/src/modals/apiModal/codeTabs/code-tabs.tsx:244-244
Timestamp: 2025-07-11T22:12:46.255Z
Learning: In src/frontend/src/modals/apiModal/codeTabs/code-tabs.tsx, the inconsistent showLineNumbers setting between Step 1 (false) and Step 2 (true) in the API modal is intentional to prevent breaking the modal height. Step 1 uses showLineNumbers={false} to save vertical space while Step 2 uses showLineNumbers={true} for better readability of longer code.
Applied to files:
src/frontend/tests/core/unit/codeAreaModalComponent.spec.ts
📚 Learning: 2025-11-24T19:47:40.400Z
Learnt from: CR
Repo: langflow-ai/langflow PR: 0
File: coderabbit-custom-pre-merge-checks-unique-id-file-non-traceable-F7F2B60C-1728-4C9A-8889-4F2235E186CA.txt:0-0
Timestamp: 2025-11-24T19:47:40.400Z
Learning: Applies to **/*.{test.ts,test.tsx,spec.ts,spec.tsx,test_*.py} : Check that tests are not just smoke tests but actually validate behavior
Applied to files:
src/frontend/tests/core/unit/codeAreaModalComponent.spec.ts
📚 Learning: 2025-11-24T19:47:40.400Z
Learnt from: CR
Repo: langflow-ai/langflow PR: 0
File: coderabbit-custom-pre-merge-checks-unique-id-file-non-traceable-F7F2B60C-1728-4C9A-8889-4F2235E186CA.txt:0-0
Timestamp: 2025-11-24T19:47:40.400Z
Learning: Applies to **/*.{test.ts,test.tsx,spec.ts,spec.tsx,test_*.py} : Ensure mocks are used appropriately for external dependencies, not core logic
Applied to files:
src/frontend/tests/core/unit/codeAreaModalComponent.spec.ts
📚 Learning: 2025-11-24T19:47:40.400Z
Learnt from: CR
Repo: langflow-ai/langflow PR: 0
File: coderabbit-custom-pre-merge-checks-unique-id-file-non-traceable-F7F2B60C-1728-4C9A-8889-4F2235E186CA.txt:0-0
Timestamp: 2025-11-24T19:47:40.400Z
Learning: Applies to **/*.test.{ts,tsx} : Frontend tests should use *.test.ts or *.test.tsx with Playwright
Applied to files:
src/frontend/tests/core/unit/codeAreaModalComponent.spec.ts
📚 Learning: 2025-06-23T12:46:42.048Z
Learnt from: CR
Repo: langflow-ai/langflow PR: 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/tests/core/unit/codeAreaModalComponent.spec.ts
🧬 Code graph analysis (1)
src/frontend/tests/core/unit/codeAreaModalComponent.spec.ts (1)
src/frontend/tests/utils/await-bootstrap-test.ts (1)
awaitBootstrapTest(4-67)
⏰ 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). (4)
- GitHub Check: Run Frontend Tests / Determine Test Suites and Shard Distribution
- GitHub Check: Test Docker Images / Test docker images
- GitHub Check: Run Frontend Unit Tests / Frontend Jest Unit Tests
- GitHub Check: Test Starter Templates
🔇 Additional comments (1)
src/frontend/src/components/core/dropdownComponent/index.tsx (1)
691-712: Removingstickyfrom the refresh footer matches the Safari bugfix intentDropping
sticky bottom-0in favor of a plainborder-t bg-backgroundwrapper keeps the “Refresh list” button behavior and test id intact while eliminating the sticky layout that was causing the Safari zoom issue. The action wiring (handleRefreshButtonPress) and visibility conditions are unchanged.Please double‑check in Safari and at least one Chromium/Firefox build with a long options list that:
- The button no longer “floats” when zooming.
- It remains reachable at the bottom of the scrollable list without layout glitches.
There was a problem hiding this comment.
LGTM! Thank you @olayinkaadelakun
Tested accross FF, chrome, safari and Edge
FF:
Screen.Recording.2025-11-28.at.1.07.28.PM.mov
Chrome:
Screen.Recording.2025-11-28.at.1.07.58.PM.mov
Safari:
Screen.Recording.2025-11-28.at.1.08.42.PM.mov
Edge:
Screen.Recording.2025-11-28.at.1.09.28.PM.mov
|
1 somewhat related issues I noticed 
|
Ill look into that |
|
@olayinkaadelakun if we do want refresh list in agent component I would suggest making that a seperate PR |
github-merge-queue
bot
removed this pull request from the merge queue due to failed status checks
github-merge-queue
bot
removed this pull request from the merge queue due to failed status checks
github-merge-queue
bot
removed this pull request from the merge queue due to failed status checks
|
I have this listed as needed for 1.7.0. if that is still true please cherrypick these changes into release-1.7.0 Example: #10738 |
…10777) * remove sticky as it was causing the refresh list to float on safari * [autofix.ci] apply automated fixes * [autofix.ci] apply automated fixes --------- Co-authored-by: Olayinka Adelakun <[email protected]> Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
#10827) Fix: Allow refresh list button to stay stagnant while zoom (Safari) (#10777) * remove sticky as it was causing the refresh list to float on safari * [autofix.ci] apply automated fixes * [autofix.ci] apply automated fixes --------- Co-authored-by: Olayinka Adelakun <[email protected]> Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
5 participants
Description
This is arises on safari because of the sticky style applied
For the Language model component, the "refresh list" was float around due to the fact of safari weirdness with the sticky styling. After evaluation i noticed that we didn't need the sticky component as the list dynamically grows and the "Refresh list" is always just placed at the buttom
Testcase
Screenshot
Before Change
After change
Summary by CodeRabbit
Style
Tests
✏️ Tip: You can customize this high-level summary in your review settings.