From 75ae536e6175016387827f0d72d90996795d5eb7 Mon Sep 17 00:00:00 2001
From: AmineAfia <amine@thirdweb.com>
Date: Wed, 28 May 2025 23:11:30 +0000
Subject: [PATCH] Add scrollable overflow to webhook filter select dropdowns
 (#7186)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## [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 -->
---
 .../(sidebar)/webhooks/components/FilterDetailsStep.tsx       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/FilterDetailsStep.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/FilterDetailsStep.tsx
index 00470420d09..1a1fbf01038 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/FilterDetailsStep.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/FilterDetailsStep.tsx
@@ -323,7 +323,7 @@ export function FilterDetailsStep({
                           : null}
                       </SelectValue>
                     </SelectTrigger>
-                    <SelectContent>
+                    <SelectContent className="max-h-60 overflow-y-auto">
                       {eventSignatures.map((event) => {
                         // Truncate the hash for display purposes
                         const truncatedHash = truncateMiddle(
@@ -373,7 +373,7 @@ export function FilterDetailsStep({
                           : null}
                       </SelectValue>
                     </SelectTrigger>
-                    <SelectContent className="max-w-[600px]">
+                    <SelectContent className="max-h-60 max-w-[600px] overflow-y-auto">
                       {functionSignatures.map((func) => (
                         <SelectItem
                           key={func.signature}