feat: member invite resource selection break with many projects (#7295)

Author: jonathanawesome

.changeset/witty-jeans-hope.md

@@ -0,0 +1,5 @@
+---
+'hive': patch
+---
+
+Fixes a UI bug in MembershipInvitation modal when there are many projects/targets/services.

packages/web/app/src/components/organization/members/invitations.tsx

@@ -195,11 +195,10 @@ function MemberInvitationForm(props: {
     );
   }
 
-  // TODO: fix visibility when screen is too small (height - elements are not visible... - this can happen when there's a lot of roles)
   return (
     <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)}>
-        <DialogContent className="min-w-[800px]">
+        <DialogContent className="min-w-[800px] max-w-[70vw]">
           <DialogHeader>
             <DialogTitle>Membership Invitation</DialogTitle>
             <DialogDescription>

packages/web/app/src/components/organization/members/resource-selector.tsx

@@ -807,10 +807,10 @@ export function ResourceSelector(props: {
                   </div>
                 </div>
               </div>
-              <div className="mt-0 flex min-h-[250px] flex-wrap rounded-sm">
+              <div className="mt-0 flex h-64 flex-wrap rounded-sm">
                 {/** Projects Content */}
                 {showProjectsTab && (
-                  <div className="flex flex-1 flex-col border pt-2">
+                  <div className="flex h-full flex-1 flex-col overflow-auto border pt-2">
                     <div className="text-muted-foreground mb-1 px-2 text-xs uppercase">
                       access granted
                     </div>
@@ -859,7 +859,7 @@ export function ResourceSelector(props: {
                 {/** Targets Content */}
                 <div
                   className={cn(
-                    'flex flex-1 flex-col border-y border-r pt-2',
+                    'flex h-full flex-1 flex-col overflow-auto border-y border-r pt-2',
                     !showProjectsTab && 'border-l',
                   )}
                 >
@@ -933,7 +933,7 @@ export function ResourceSelector(props: {
                   )}
                 </div>
 
-                <div className="flex flex-1 flex-col border-y border-r">
+                <div className="flex h-full flex-1 flex-col overflow-auto border-y border-r">
                   {/** Services Content */}
                   {serviceAppsState === ServicesAppsState.service && (
                     <div className="py-2">

pnpm-lock.yaml

@@ -28,7 +28,7 @@ await PromisePool.withConcurrency(10)
   .for(new Array(100).fill(null))
   .process(() => org.createProject());
 
-console.log('Create 200 orgainzation members');
+console.log('Create 100 organization members');
 await PromisePool.withConcurrency(10)
   .for(new Array(100).fill(null))
   .process(() => org.inviteAndJoinMember());