From cc1e567a86afa938e54341af9fe5647c624f2f82 Mon Sep 17 00:00:00 2001
From: Djordje Vlaisavljevic <dzvlais@gmail.com>
Date: Thu, 1 Jun 2023 13:43:29 +0100
Subject: [PATCH] Fixed position issues

refs https://github.com/TryGhost/Team/issues/3328
---
 .../src/admin-x-ds/global/Menu.stories.tsx          | 13 +++++++++++--
 .../admin-x-settings/src/admin-x-ds/global/Menu.tsx |  2 +-
 .../settings/general/modals/UserDetailModal.tsx     |  4 +++-
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/ghost/admin-x-settings/src/admin-x-ds/global/Menu.stories.tsx b/ghost/admin-x-settings/src/admin-x-ds/global/Menu.stories.tsx
index 5444aae041..a1e1a516a0 100644
--- a/ghost/admin-x-settings/src/admin-x-ds/global/Menu.stories.tsx
+++ b/ghost/admin-x-settings/src/admin-x-ds/global/Menu.stories.tsx
@@ -5,7 +5,8 @@ import Menu from './Menu';
 const meta = {
     title: 'Global / Menu',
     component: Menu,
-    tags: ['autodocs']
+    tags: ['autodocs'],
+    decorators: [(_story: any) => (<div style={{maxWidth: '600px', margin: '0 auto'}}>{_story()}</div>)]
 } satisfies Meta<typeof Menu>;
 
 export default meta;
@@ -19,6 +20,14 @@ const items = [
 
 export const Default: Story = {
     args: {
-        items
+        items: items,
+        position: 'right'
     }
 };
+
+export const Left: Story = {
+    args: {
+        items: items,
+        position: 'left'
+    }
+};
\ No newline at end of file
diff --git a/ghost/admin-x-settings/src/admin-x-ds/global/Menu.tsx b/ghost/admin-x-settings/src/admin-x-ds/global/Menu.tsx
index aad256e760..233467aa0e 100644
--- a/ghost/admin-x-settings/src/admin-x-ds/global/Menu.tsx
+++ b/ghost/admin-x-settings/src/admin-x-ds/global/Menu.tsx
@@ -33,7 +33,7 @@ const Menu: React.FC<MenuProps> = ({items, position, className}) => {
 
     return (
         /* Menu */
-        <div className={className}>
+        <div className={`relative inline-block ${className}`}>
             {/* Menu Trigger */}
             <div>
                 <button aria-expanded="true" aria-haspopup="true" className="flex items-center rounded-sm bg-grey-100 px-2 py-1 text-grey-400 hover:text-grey-600" id="menu-button" type="button">
diff --git a/ghost/admin-x-settings/src/components/settings/general/modals/UserDetailModal.tsx b/ghost/admin-x-settings/src/components/settings/general/modals/UserDetailModal.tsx
index e92bbb4498..98cb68014d 100644
--- a/ghost/admin-x-settings/src/components/settings/general/modals/UserDetailModal.tsx
+++ b/ghost/admin-x-settings/src/components/settings/general/modals/UserDetailModal.tsx
@@ -337,7 +337,9 @@ const UserDetailModal:React.FC<UserDetailModalProps> = ({user, updateUser}) => {
                     {userData.cover_image && (
                         <div className='absolute inset-0 z-0 block bg-gradient-to-tr from-[rgba(0,0,0,0.5)] to-[rgba(0,0,0,0.01)]'></div>
                     )}
-                    <Menu className='absolute right-4 top-4' items={items} position='left'></Menu>
+                    <div className="absolute right-4 top-4">
+                        <Menu items={items} position='left'></Menu>
+                    </div>
                     <div className='relative z-10 mt-60 flex gap-4'>
                         <Avatar bgColor={generateAvatarColor((userData.name ? userData.name : userData.email))} className='-ml-1' image={userData.profile_image} label={getInitials(userData.name)} labelColor='white' size='xl' />
                         <div>