fix: scrolling in project breadcrumb dropdown (#7118)

apps/web/app/(app)/environments/[environmentId]/components/organization-breadcrumb.tsx

@@ -209,7 +209,7 @@ export const OrganizationBreadcrumb = ({
               )}
               {!isLoadingOrganizations && !loadError && (
                 <>
-                  <DropdownMenuGroup>
+                  <DropdownMenuGroup className="max-h-[300px] overflow-y-auto">
                     {organizations.map((org) => (
                       <DropdownMenuCheckboxItem
                         key={org.id}

apps/web/app/(app)/environments/[environmentId]/components/project-breadcrumb.tsx

@@ -234,7 +234,7 @@ export const ProjectBreadcrumb = ({
           )}
           {!isLoadingProjects && !loadError && (
             <>
-              <DropdownMenuGroup>
+              <DropdownMenuGroup className="max-h-[300px] overflow-y-auto">
                 {projects.map((proj) => (
                   <DropdownMenuCheckboxItem
                     key={proj.id}

apps/web/modules/organization/settings/api-keys/components/add-api-key-modal.tsx

@@ -255,7 +255,7 @@ export const AddApiKeyModal = ({
                               </span>
                             </button>
                           </DropdownMenuTrigger>
-                          <DropdownMenuContent className="min-w-[8rem]">
+                          <DropdownMenuContent className="max-h-[300px] min-w-[8rem] overflow-y-auto">
                             {projectOptions.map((option) => (
                               <DropdownMenuItem
                                 key={option.id}
@@ -286,7 +286,7 @@ export const AddApiKeyModal = ({
                               </span>
                             </button>
                           </DropdownMenuTrigger>
-                          <DropdownMenuContent className="min-w-[8rem] capitalize">
+                          <DropdownMenuContent className="max-h-[300px] min-w-[8rem] overflow-y-auto capitalize">
                             {getEnvironmentOptionsForProject(permission.projectId).map((env) => (
                               <DropdownMenuItem
                                 key={env.id}

apps/web/modules/ui/globals.css

@@ -64,11 +64,13 @@
 
 *::-webkit-scrollbar-track {
   background: #e2e8f0;
+  border-radius: 10px;
 }
 
 *::-webkit-scrollbar-thumb {
   background-color: #cbd5e1;
   border: 1px solid #cbd5e1;
+  border-radius: 10px;
 }
 
 .filter-scrollbar::-webkit-scrollbar {