From e0713d78b33c97f375c78edba514c2af57db347f Mon Sep 17 00:00:00 2001
From: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
Date: Fri, 15 Nov 2024 09:51:39 +0000
Subject: [PATCH] fix: z index issue on dropdown menu (#17656)

* portal content

* fix(dropdown-z-index-issue): Fixes dropdown z index issue by portaling
---
 .../components/UserTable/UserTableActions.tsx | 199 +++++++++---------
 1 file changed, 102 insertions(+), 97 deletions(-)

diff --git a/packages/features/users/components/UserTable/UserTableActions.tsx b/packages/features/users/components/UserTable/UserTableActions.tsx
index 2cc794c734..4056172d44 100644
--- a/packages/features/users/components/UserTable/UserTableActions.tsx
+++ b/packages/features/users/components/UserTable/UserTableActions.tsx
@@ -11,6 +11,7 @@ import {
   DropdownMenuTrigger,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuPortal,
   DropdownItem,
   DropdownMenuSeparator,
   showToast,
@@ -74,50 +75,125 @@ export function TableActions({
                 StartIcon="ellipsis"
               />
             </DropdownMenuTrigger>
-            <DropdownMenuContent>
-              {permissionsForUser.canEdit && (
-                <DropdownMenuItem>
-                  <DropdownItem
-                    type="button"
-                    onClick={() =>
-                      dispatch({
-                        type: "EDIT_USER_SHEET",
-                        payload: {
-                          user,
-                          showModal: true,
-                        },
-                      })
-                    }
-                    StartIcon="pencil">
-                    {t("edit")}
-                  </DropdownItem>
-                </DropdownMenuItem>
-              )}
-              {permissionsForUser.canImpersonate && (
-                <>
+            <DropdownMenuPortal>
+              <DropdownMenuContent>
+                {permissionsForUser.canEdit && (
                   <DropdownMenuItem>
                     <DropdownItem
                       type="button"
                       onClick={() =>
                         dispatch({
-                          type: "SET_IMPERSONATE_ID",
+                          type: "EDIT_USER_SHEET",
                           payload: {
                             user,
                             showModal: true,
                           },
                         })
                       }
-                      StartIcon="lock">
-                      {t("impersonate")}
+                      StartIcon="pencil">
+                      {t("edit")}
+                    </DropdownItem>
+                  </DropdownMenuItem>
+                )}
+                {permissionsForUser.canImpersonate && (
+                  <>
+                    <DropdownMenuItem>
+                      <DropdownItem
+                        type="button"
+                        onClick={() =>
+                          dispatch({
+                            type: "SET_IMPERSONATE_ID",
+                            payload: {
+                              user,
+                              showModal: true,
+                            },
+                          })
+                        }
+                        StartIcon="lock">
+                        {t("impersonate")}
+                      </DropdownItem>
+                    </DropdownMenuItem>
+                    <DropdownMenuSeparator />
+                  </>
+                )}
+                {permissionsForUser.canRemove && (
+                  <DropdownMenuItem>
+                    <DropdownItem
+                      type="button"
+                      onClick={() =>
+                        dispatch({
+                          type: "SET_DELETE_ID",
+                          payload: {
+                            user,
+                            showModal: true,
+                          },
+                        })
+                      }
+                      color="destructive"
+                      StartIcon="user-x">
+                      {t("remove")}
+                    </DropdownItem>
+                  </DropdownMenuItem>
+                )}
+                {permissionsForUser.canResendInvitation && (
+                  <DropdownMenuItem>
+                    <DropdownItem
+                      type="button"
+                      onClick={() => {
+                        resendInvitationMutation.mutate({
+                          teamId: orgId,
+                          language: i18n.language,
+                          email: user.email,
+                          isOrg: true,
+                        });
+                      }}
+                      StartIcon="send">
+                      {t("resend_invitation")}
+                    </DropdownItem>
+                  </DropdownMenuItem>
+                )}
+              </DropdownMenuContent>
+            </DropdownMenuPortal>
+          </Dropdown>
+        )}
+      </ButtonGroup>
+      <div className="flex md:hidden">
+        <Dropdown>
+          <DropdownMenuTrigger asChild>
+            <Button type="button" variant="icon" color="minimal" StartIcon="ellipsis" />
+          </DropdownMenuTrigger>
+          <DropdownMenuPortal>
+            <DropdownMenuContent>
+              <DropdownMenuItem className="outline-none">
+                <DropdownItem type="button" StartIcon="external-link">
+                  {t("view_public_page")}
+                </DropdownItem>
+              </DropdownMenuItem>
+              {permissionsForUser.canEdit && (
+                <>
+                  <DropdownMenuItem>
+                    <DropdownItem
+                      type="button"
+                      onClick={() =>
+                        dispatch({
+                          type: "EDIT_USER_SHEET",
+                          payload: {
+                            user,
+                            showModal: true,
+                          },
+                        })
+                      }
+                      StartIcon="pencil">
+                      {t("edit")}
                     </DropdownItem>
                   </DropdownMenuItem>
-                  <DropdownMenuSeparator />
                 </>
               )}
               {permissionsForUser.canRemove && (
                 <DropdownMenuItem>
                   <DropdownItem
                     type="button"
+                    color="destructive"
                     onClick={() =>
                       dispatch({
                         type: "SET_DELETE_ID",
@@ -127,84 +203,13 @@ export function TableActions({
                         },
                       })
                     }
-                    color="destructive"
                     StartIcon="user-x">
                     {t("remove")}
                   </DropdownItem>
                 </DropdownMenuItem>
               )}
-              {permissionsForUser.canResendInvitation && (
-                <DropdownMenuItem>
-                  <DropdownItem
-                    type="button"
-                    onClick={() => {
-                      resendInvitationMutation.mutate({
-                        teamId: orgId,
-                        language: i18n.language,
-                        email: user.email,
-                        isOrg: true,
-                      });
-                    }}
-                    StartIcon="send">
-                    {t("resend_invitation")}
-                  </DropdownItem>
-                </DropdownMenuItem>
-              )}
             </DropdownMenuContent>
-          </Dropdown>
-        )}
-      </ButtonGroup>
-      <div className="flex md:hidden">
-        <Dropdown>
-          <DropdownMenuTrigger asChild>
-            <Button type="button" variant="icon" color="minimal" StartIcon="ellipsis" />
-          </DropdownMenuTrigger>
-          <DropdownMenuContent>
-            <DropdownMenuItem className="outline-none">
-              <DropdownItem type="button" StartIcon="external-link">
-                {t("view_public_page")}
-              </DropdownItem>
-            </DropdownMenuItem>
-            {permissionsForUser.canEdit && (
-              <>
-                <DropdownMenuItem>
-                  <DropdownItem
-                    type="button"
-                    onClick={() =>
-                      dispatch({
-                        type: "EDIT_USER_SHEET",
-                        payload: {
-                          user,
-                          showModal: true,
-                        },
-                      })
-                    }
-                    StartIcon="pencil">
-                    {t("edit")}
-                  </DropdownItem>
-                </DropdownMenuItem>
-              </>
-            )}
-            {permissionsForUser.canRemove && (
-              <DropdownMenuItem>
-                <DropdownItem
-                  type="button"
-                  color="destructive"
-                  onClick={() =>
-                    dispatch({
-                      type: "SET_DELETE_ID",
-                      payload: {
-                        user,
-                        showModal: true,
-                      },
-                    })
-                  }
-                  StartIcon="user-x">
-                  {t("remove")}
-                </DropdownItem>
-              </DropdownMenuItem>
-            )}
-          </DropdownMenuContent>
+          </DropdownMenuPortal>
         </Dropdown>
       </div>
     </>