Skip to content

Commit 75ae536

Browse files
committed
Add scrollable overflow to webhook filter select dropdowns (#7186)
## [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 -->
1 parent 41e59a9 commit 75ae536

File tree

1 file changed

+2
-2
lines changed
  • apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components

1 file changed

+2
-2
lines changed

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/FilterDetailsStep.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -323,7 +323,7 @@ export function FilterDetailsStep({
323323
: null}
324324
</SelectValue>
325325
</SelectTrigger>
326-
<SelectContent>
326+
<SelectContent className="max-h-60 overflow-y-auto">
327327
{eventSignatures.map((event) => {
328328
// Truncate the hash for display purposes
329329
const truncatedHash = truncateMiddle(
@@ -373,7 +373,7 @@ export function FilterDetailsStep({
373373
: null}
374374
</SelectValue>
375375
</SelectTrigger>
376-
<SelectContent className="max-w-[600px]">
376+
<SelectContent className="max-h-60 max-w-[600px] overflow-y-auto">
377377
{functionSignatures.map((func) => (
378378
<SelectItem
379379
key={func.signature}

0 commit comments

Comments
 (0)