fix(console): Group invite account type dropdown doesn't pop over the…

… modal (#2771)
proofzero · Nov 22, 2023 · 8f6b394 · 8f6b394
1 parent e490bd3
commit 8f6b394
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 37 deletions.
diff --git a/apps/console/app/routes/__layout/groups/$groupID/index.tsx b/apps/console/app/routes/__layout/groups/$groupID/index.tsx
@@ -151,7 +151,11 @@ const InviteMemberModal = ({
   }, [invitations, selectedProvider, identifier])
 
   return (
-    <Modal isOpen={isOpen} handleClose={closeAndClearFetcher}>
+    <Modal
+      isOpen={isOpen}
+      handleClose={closeAndClearFetcher}
+      overflowAbsolute={true}
+    >
       <div className="p-6">
         <section className="mb-4 w-full flex flex-row items-start justify-between">
           <div className="flex flex-col">
@@ -226,42 +230,48 @@ const InviteMemberModal = ({
                           className="absolute bg-white p-2 flex flex-col gap-2 mt-1 focus-visible:ring-0 focus-visible:outline-none border shadow"
                           static
                         >
-                          {accountTypes.map((provider) => (
-                            <Listbox.Option
-                              key={provider}
-                              value={provider}
-                              className={({ active }) =>
-                                classNames(
-                                  'flex flex-row items-center gap-2 hover:bg-gray-100 py-2 px-4 rounded-lg cursor-pointer',
-                                  {
-                                    'bg-gray-100': active,
-                                  }
-                                )
-                              }
-                            >
-                              {({ selected }) => (
-                                <>
-                                  <img
-                                    className="w-5 h-5"
-                                    src={getProviderIcons(provider)}
-                                  />
-                                  <Text
-                                    size="sm"
-                                    weight="normal"
-                                    className="text-gray-800"
-                                  >
-                                    {_.upperFirst(provider)}
-                                  </Text>
-                                  {selected && (
-                                    <CheckIcon
-                                      className="h-5 w-5 text-indigo-600"
-                                      aria-hidden="true"
+                          {accountTypes
+                            .filter(
+                              (provider) =>
+                                provider !== EmailAccountType.Mask &&
+                                provider !== CryptoAccountType.Wallet
+                            )
+                            .map((provider) => (
+                              <Listbox.Option
+                                key={provider}
+                                value={provider}
+                                className={({ active }) =>
+                                  classNames(
+                                    'flex flex-row items-center gap-2 hover:bg-gray-100 py-2 px-4 rounded-lg cursor-pointer',
+                                    {
+                                      'bg-gray-100': active,
+                                    }
+                                  )
+                                }
+                              >
+                                {({ selected }) => (
+                                  <>
+                                    <img
+                                      className="w-5 h-5"
+                                      src={getProviderIcons(provider)}
                                     />
-                                  )}
-                                </>
-                              )}
-                            </Listbox.Option>
-                          ))}
+                                    <Text
+                                      size="sm"
+                                      weight="normal"
+                                      className="text-gray-800"
+                                    >
+                                      {_.upperFirst(provider)}
+                                    </Text>
+                                    {selected && (
+                                      <CheckIcon
+                                        className="h-5 w-5 text-indigo-600"
+                                        aria-hidden="true"
+                                      />
+                                    )}
+                                  </>
+                                )}
+                              </Listbox.Option>
+                            ))}
                         </Listbox.Options>
                       </Transition>
                     </div>

diff --git a/packages/design-system/src/helpers/get-provider-icons.ts b/packages/design-system/src/helpers/get-provider-icons.ts
@@ -21,6 +21,7 @@ export default (provider: string) => {
     case 'webauthn':
       return webauthn
     case 'ethereum':
+    case 'eth':
       return ethereum
     case 'facebook':
       return facebook

diff --git a/packages/design-system/src/molecules/modal/Modal.tsx b/packages/design-system/src/molecules/modal/Modal.tsx
@@ -8,11 +8,13 @@ export type ModalProps = {
   isOpen: boolean
   handleClose?: (value: boolean) => void
   fixed?: boolean
+  overflowAbsolute?: boolean
 }
 
 export const Modal = ({
   isOpen = false,
   fixed = false,
+  overflowAbsolute = false,
   handleClose,
   children,
   ...rest
@@ -52,8 +54,9 @@ export const Modal = ({
               <Dialog.Panel className={`${fixed ? 'pb-10' : ''}`}>
                 <div
                   className={classNames(
-                    'border bg-white rounded-lg shadow-xl thin-scrollbar overflow-y-auto ',
+                    'border bg-white rounded-lg shadow-xl thin-scrollbar',
                     {
+                      'overflow-y-auto': !overflowAbsolute,
                       'h-max min-w-fit w-max min-[480px]:w-[96vw] lg:w-[62vw] h-[96vh] lg:h-[76vh]':
                         fixed,
                       'h-max min-w-fit w-max min-h-max max-w-[96vw] lg:w-full max-h-[89vh] lg:h-full':