Merge pull request #1620 from unrenamed/fix/broken-drawer-ui-on-mobile

fix(ui): modal scrolling behavior on mobile
dubinc · Oct 28, 2024 · 869b31b · 869b31b
2 parents 1dea14b + 77042b7
commit 869b31b
Show file tree

Hide file tree

Showing 8 changed files with 57 additions and 50 deletions.
diff --git a/apps/web/ui/modals/add-edit-domain-modal.tsx b/apps/web/ui/modals/add-edit-domain-modal.tsx
@@ -36,7 +36,7 @@ function AddEditDomainModal({
     <Modal
       showModal={showAddEditDomainModal}
       setShowModal={setShowAddEditDomainModal}
-      className="scrollbar-hide h-fit max-h-[95vh] overflow-auto"
+      className="max-h-[95dvh]"
     >
       <div className="flex flex-col items-center justify-center gap-y-3 border-b border-gray-200 px-4 py-4 pt-8 sm:px-16">
         {logo ? (

diff --git a/apps/web/ui/modals/add-edit-token-modal.tsx b/apps/web/ui/modals/add-edit-token-modal.tsx
@@ -146,7 +146,7 @@ function AddEditTokenModal({
       <Modal
         showModal={showAddEditTokenModal}
         setShowModal={setShowAddEditTokenModal}
-        className="scrollbar-hide h-fit max-h-[95vh] overflow-auto"
+        className="max-h-[95dvh]"
       >
         <div className="flex flex-col items-center justify-center space-y-3 border-b border-gray-200 px-4 py-4 pt-8 sm:px-16">
           {logo ? (

diff --git a/apps/web/ui/modals/import-csv-modal/index.tsx b/apps/web/ui/modals/import-csv-modal/index.tsx
@@ -135,12 +135,12 @@ function ImportCsvModal({
     <Modal
       showModal={showImportCsvModal}
       setShowModal={setShowImportCsvModal}
+      className="max-h-[95dvh] max-w-lg"
       onClose={() =>
         queryParams({
           del: "import",
         })
       }
-      className="h-fit max-h-[95dvh] max-w-lg overflow-y-auto"
     >
       <div className="flex flex-col items-center justify-center space-y-3 border-b border-gray-200 px-4 py-8 sm:px-16">
         <div className="flex items-center gap-x-3 py-4">

diff --git a/apps/web/ui/modals/invite-teammate-modal.tsx b/apps/web/ui/modals/invite-teammate-modal.tsx
@@ -39,45 +39,44 @@ function InviteTeammateModal({
     <Modal
       showModal={showInviteTeammateModal}
       setShowModal={setShowInviteTeammateModal}
+      className="max-h-[95dvh]"
     >
-      <div className="scrollbar-hide h-fit max-h-[95dvh] overflow-y-auto">
-        <div className="flex flex-col items-center justify-center space-y-3 border-b border-gray-200 px-4 py-4 pt-8 sm:px-16">
-          {logo ? (
-            <BlurImage
-              src={logo}
-              alt="Invite Teammates"
-              className="h-10 w-10 rounded-full"
-              width={20}
-              height={20}
-            />
-          ) : (
-            <Logo />
-          )}
-          <h3 className="text-lg font-medium">Invite Teammates</h3>
-          <p className="text-center text-sm text-gray-500">
-            Invite teammates with{" "}
-            <a
-              href="https://dub.co/help/article/workspace-roles"
-              target="_blank"
-              className="underline hover:text-gray-900"
-            >
-              different roles and permissions
-            </a>
-            . Invitations will be valid for 14 days.
-          </p>
-        </div>
-        {isLoading ? (
-          <div className="flex items-center justify-center p-8">
-            <LoadingSpinner />
-          </div>
-        ) : (
-          <InviteTeammatesForm
-            onSuccess={() => setShowInviteTeammateModal(false)}
-            className="bg-gray-50 px-4 py-8 sm:px-16"
-            invites={invites}
+      <div className="flex flex-col items-center justify-center space-y-3 border-b border-gray-200 px-4 py-4 pt-8 sm:px-16">
+        {logo ? (
+          <BlurImage
+            src={logo}
+            alt="Invite Teammates"
+            className="h-10 w-10 rounded-full"
+            width={20}
+            height={20}
           />
+        ) : (
+          <Logo />
         )}
+        <h3 className="text-lg font-medium">Invite Teammates</h3>
+        <p className="text-center text-sm text-gray-500">
+          Invite teammates with{" "}
+          <a
+            href="https://dub.co/help/article/workspace-roles"
+            target="_blank"
+            className="underline hover:text-gray-900"
+          >
+            different roles and permissions
+          </a>
+          . Invitations will be valid for 14 days.
+        </p>
       </div>
+      {isLoading ? (
+        <div className="flex items-center justify-center p-8">
+          <LoadingSpinner />
+        </div>
+      ) : (
+        <InviteTeammatesForm
+          onSuccess={() => setShowInviteTeammateModal(false)}
+          className="bg-gray-50 px-4 py-8 sm:px-16"
+          invites={invites}
+        />
+      )}
     </Modal>
   );
 }

diff --git a/apps/web/ui/modals/send-test-webhook-modal.tsx b/apps/web/ui/modals/send-test-webhook-modal.tsx
@@ -53,7 +53,6 @@ function SendTestWebhookModal({
     <Modal
       showModal={showSendTestWebhookModal}
       setShowModal={setShowSendTestWebhookModal}
-      className="overflow-visible"
     >
       <div className="flex flex-col items-center justify-center space-y-3 border-b border-gray-200 px-4 py-4 pt-8 text-center sm:px-16">
         <Logo />

diff --git a/apps/web/ui/modals/transfer-domain-modal.tsx b/apps/web/ui/modals/transfer-domain-modal.tsx
@@ -67,7 +67,6 @@ function TransferDomainModal({
     <Modal
       showModal={showTransferDomainModal}
       setShowModal={setShowTransferDomainModal}
-      className="overflow-visible"
     >
       <form
         onSubmit={async (e) => {

diff --git a/apps/web/ui/modals/transfer-link-modal.tsx b/apps/web/ui/modals/transfer-link-modal.tsx
@@ -36,7 +36,6 @@ function TransferLinkModal(props: TransferLinkModalProps) {
     <Modal
       showModal={props.showTransferLinkModal}
       setShowModal={props.setShowTransferLinkModal}
-      className="overflow-visible"
     >
       <TransferLinkModalInner {...props} />
     </Modal>

diff --git a/packages/ui/src/modal.tsx b/packages/ui/src/modal.tsx
@@ -61,18 +61,19 @@ export function Modal({
           <Drawer.Overlay className="fixed inset-0 z-50 bg-gray-100 bg-opacity-10 backdrop-blur" />
           <Drawer.Content
             className={cn(
-              "fixed bottom-0 left-0 right-0 z-50 rounded-t-[10px] border-t border-gray-200 bg-white",
+              "fixed bottom-0 left-0 right-0 z-50 flex flex-col",
+              "rounded-t-[10px] border-t border-gray-200 bg-white",
               className,
             )}
           >
-            <VisuallyHidden.Root>
-              <Drawer.Title>Modal</Drawer.Title>
-              <Drawer.Description>This is a modal</Drawer.Description>
-            </VisuallyHidden.Root>
-            <div className="sticky top-0 z-20 flex w-full items-center justify-center rounded-t-[10px] bg-inherit">
-              <div className="my-3 h-1 w-12 rounded-full bg-gray-300" />
+            <div className="scrollbar-hide flex-1 overflow-y-auto rounded-t-[10px] bg-inherit">
+              <VisuallyHidden.Root>
+                <Drawer.Title>Modal</Drawer.Title>
+                <Drawer.Description>This is a modal</Drawer.Description>
+              </VisuallyHidden.Root>
+              <DrawerIsland />
+              {children}
             </div>
-            {children}
           </Drawer.Content>
           <Drawer.Overlay />
         </Drawer.Portal>
@@ -99,7 +100,9 @@ export function Modal({
           onOpenAutoFocus={(e) => e.preventDefault()}
           onCloseAutoFocus={(e) => e.preventDefault()}
           className={cn(
-            "animate-scale-in fixed inset-0 z-40 m-auto max-h-fit w-full max-w-md overflow-hidden border border-gray-200 bg-white p-0 shadow-xl sm:rounded-2xl",
+            "fixed inset-0 z-40 m-auto h-fit w-full max-w-md",
+            "border border-gray-200 bg-white p-0 shadow-xl sm:rounded-2xl",
+            "scrollbar-hide animate-scale-in overflow-y-auto",
             className,
           )}
         >
@@ -113,3 +116,11 @@ export function Modal({
     </Dialog.Root>
   );
 }
+
+function DrawerIsland() {
+  return (
+    <div className="sticky top-0 z-20 flex items-center justify-center rounded-t-[10px] bg-inherit">
+      <div className="my-3 h-1 w-12 rounded-full bg-gray-300" />
+    </div>
+  );
+}