Fixed position issues

refs https://github.com/TryGhost/Team/issues/3328

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'
+    }
+};

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">

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>