Fix webhook dropdown scrolling by wrapping content in scrollable div

Author: Amine Afia

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

@@ -323,30 +323,34 @@ export function FilterDetailsStep({
                           : null}
                       </SelectValue>
                     </SelectTrigger>
-                    <SelectContent className="max-h-60 overflow-y-auto">
-                      {eventSignatures.map((event) => {
-                        // Truncate the hash for display purposes
-                        const truncatedHash = truncateMiddle(
-                          event.signature,
-                          6,
-                          4,
-                        );
+                    <SelectContent>
+                      <div className="max-h-60 overflow-y-auto">
+                        {eventSignatures.map((event) => {
+                          // Truncate the hash for display purposes
+                          const truncatedHash = truncateMiddle(
+                            event.signature,
+                            6,
+                            4,
+                          );
 
-                        return (
-                          <SelectItem
-                            key={event.signature}
-                            value={event.signature}
-                            title={event.name}
-                          >
-                            <div className="flex flex-col">
-                              <span className="font-medium">{event.name}</span>
-                              <span className="text-muted-foreground text-xs">
-                                Signature: {truncatedHash}
-                              </span>
-                            </div>
-                          </SelectItem>
-                        );
-                      })}
+                          return (
+                            <SelectItem
+                              key={event.signature}
+                              value={event.signature}
+                              title={event.name}
+                            >
+                              <div className="flex flex-col">
+                                <span className="font-medium">
+                                  {event.name}
+                                </span>
+                                <span className="text-muted-foreground text-xs">
+                                  Signature: {truncatedHash}
+                                </span>
+                              </div>
+                            </SelectItem>
+                          );
+                        })}
+                      </div>
                     </SelectContent>
                   </Select>
                 ) : watchFilterType === "transaction" &&
@@ -373,24 +377,26 @@ export function FilterDetailsStep({
                           : null}
                       </SelectValue>
                     </SelectTrigger>
-                    <SelectContent className="max-h-60 max-w-[600px] overflow-y-auto">
-                      {functionSignatures.map((func) => (
-                        <SelectItem
-                          key={func.signature}
-                          value={func.signature}
-                          title={func.signature}
-                          className="w-full overflow-x-auto"
-                        >
-                          <div className="flex w-full flex-col">
-                            <span className="overflow-x-auto whitespace-nowrap pb-1 font-medium">
-                              {func.name}
-                            </span>
-                            <span className="overflow-x-auto text-muted-foreground text-xs">
-                              Selector: {func.signature}
-                            </span>
-                          </div>
-                        </SelectItem>
-                      ))}
+                    <SelectContent>
+                      <div className="max-h-60 max-w-[600px] overflow-y-auto">
+                        {functionSignatures.map((func) => (
+                          <SelectItem
+                            key={func.signature}
+                            value={func.signature}
+                            title={func.signature}
+                            className="w-full overflow-x-auto"
+                          >
+                            <div className="flex w-full flex-col">
+                              <span className="overflow-x-auto whitespace-nowrap pb-1 font-medium">
+                                {func.name}
+                              </span>
+                              <span className="overflow-x-auto text-muted-foreground text-xs">
+                                Selector: {func.signature}
+                              </span>
+                            </div>
+                          </SelectItem>
+                        ))}
+                      </div>
                     </SelectContent>
                   </Select>
                 ) : (