Add scrollable overflow to webhook filter select dropdowns #7186
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
WalkthroughThe update applies explicit CSS classes to the event and transaction signature dropdown components in the filter details step, setting a maximum height and enabling vertical scrolling. These changes ensure the dropdown menus do not exceed a set height and remain usable when displaying many items. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant FilterDetailsStep
User->>FilterDetailsStep: Open event/transaction signature dropdown
FilterDetailsStep-->>User: Show dropdown (max height 15rem, scrollable if needed)
User->>FilterDetailsStep: Select item from dropdown
FilterDetailsStep-->>User: Update selection
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (8)
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
How to use the Graphite Merge QueueAdd either label to this PR to merge it via the merge queue:
You must have a Graphite account in order to use the merge queue. Sign up using this link. An organization admin has enabled the Graphite Merge Queue in this repository. Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue. This stack of pull requests is managed by Graphite. Learn more about stacking. |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #7186 +/- ##
==========================================
+ Coverage 55.66% 55.68% +0.01%
==========================================
Files 904 904
Lines 58404 58404
Branches 4117 4126 +9
==========================================
+ Hits 32511 32522 +11
+ Misses 25787 25776 -11
Partials 106 106
🚀 New features to boost your workflow:
|
size-limit report 📦
|
jnsdls
approved these changes
May 28, 2025
Merge activity
|
graphite-app bot
pushed a commit
that referenced
this pull request
May 28, 2025
## [Dashboard] Fix: Add scrolling to webhook event and function signature dropdowns ## Notes for the reviewer This PR adds scrolling functionality to the webhook event and function signature dropdown menus by adding `max-h-60 overflow-y-auto` classes. This ensures that when there are many options, users can still navigate through them effectively. ## How to test 1. Navigate to the webhooks section in a project 2. Open the event signature dropdown and verify it scrolls properly when there are many options 3. Similarly, test the function signature dropdown to ensure it maintains its max width while allowing vertical scrolling <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **Style** - Improved dropdown menus for event and transaction signature selection by limiting their maximum height and enabling vertical scrolling, enhancing usability when many options are available. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
graphite-app
bot
force-pushed
the
Add_scrollable_overflow_to_webhook_filter_select_dropdowns
branch
from
1aa5b11 to
9411b9a
Compare
## [Dashboard] Fix: Add scrolling to webhook event and function signature dropdowns
## Notes for the reviewer
This PR adds scrolling functionality to the webhook event and function signature dropdown menus by adding `max-h-60 overflow-y-auto` classes. This ensures that when there are many options, users can still navigate through them effectively.
## How to test
1. Navigate to the webhooks section in a project
2. Open the event signature dropdown and verify it scrolls properly when there are many options
3. Similarly, test the function signature dropdown to ensure it maintains its max width while allowing vertical scrolling
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **Style**
- Improved dropdown menus for event and transaction signature selection by limiting their maximum height and enabling vertical scrolling, enhancing usability when many options are available.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!-- start pr-codex -->
---
## PR-Codex overview
This PR focuses on enhancing the `FilterDetailsStep` component by improving the usability of the dropdown content with better scrolling behavior.
### Detailed summary
- Updated the `className` of the first `<SelectContent>` from default to `max-h-60 overflow-y-auto` for better vertical scrolling.
- Updated the second `<SelectContent>` to include `overflow-y-auto` while retaining `max-w-[600px]`.
> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`
<!-- end pr-codex -->
graphite-app
bot
force-pushed
the
Add_scrollable_overflow_to_webhook_filter_select_dropdowns
branch
from
9411b9a to
75ae536
Compare
graphite-app
bot
deleted the
Add_scrollable_overflow_to_webhook_filter_select_dropdowns
branch
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
[Dashboard] Fix: Add scrolling to webhook event and function signature dropdowns
Notes for the reviewer
This PR adds scrolling functionality to the webhook event and function signature dropdown menus by adding
max-h-60 overflow-y-autoclasses. This ensures that when there are many options, users can still navigate through them effectively.How to test
Summary by CodeRabbit
PR-Codex overview
This PR focuses on enhancing the
FilterDetailsStepcomponent's UI by improving the scrolling behavior of theSelectContentelements, allowing better visibility of options.Detailed summary
classNameof the first<SelectContent>from default toclassName="max-h-60 overflow-y-auto"to enable vertical scrolling.<SelectContent>to includeoverflow-y-autofor better handling of content overflow while maintaining a maximum width of600px.