Fix style shift

ui/component/headerProfileMenuButton/view.jsx

@@ -1,6 +1,9 @@
 // @flow
 import 'scss/component/_header.scss';
 
+// $FlowFixMe
+import { Global } from '@emotion/react';
+
 import { Menu as MuiMenu, MenuItem as MuiMenuItem } from '@mui/material';
 import * as ICONS from 'constants/icons';
 import * as PAGES from 'constants/pages';
@@ -26,19 +29,41 @@ export default function HeaderProfileMenuButton(props: HeaderMenuButtonProps) {
 
   const [anchorEl, setAnchorEl] = React.useState(null);
   const open = Boolean(anchorEl);
-  const handleClick = (event) => {
+  const handleClick = (event) => setAnchorEl(!anchorEl ? event.currentTarget : null);
-    setAnchorEl(!anchorEl ? event.currentTarget : null);
+  const handleClose = () => setAnchorEl(null);
-  };
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
 
   const activeChannelUrl = activeChannelClaim && activeChannelClaim.permanent_url;
   // activeChannel will be: undefined = fetching, null = nothing, or { channel claim }
   const noActiveChannel = activeChannelUrl === null;
   const pendingChannelFetch = !noActiveChannel && myChannelClaimIds === undefined;
 
+  const menuProps = {
+    id: 'basic-menu',
+    anchorEl,
+    open,
+    onClose: handleClose,
+    MenuListProps: {
+      'aria-labelledby': 'basic-button',
+      sx: { padding: 'var(--spacing-xs)' },
+    },
+    className: 'menu__list--header',
+    sx: { 'z-index': 2 },
+    PaperProps: { className: 'MuiMenu-list--paper' },
+  };
+
   return (
+    <>
+      {open && (
+        <Global
+          styles={{
+            body: {
+              'overflow-y': 'scroll !important',
+              'padding-right': '0px !important',
+            },
+          }}
+        />
+      )}
+
       <div className="header__buttons">
         {pendingChannelFetch ? (
           <Skeleton variant="circular" animation="wave" className="header__navigationItem--iconSkeleton" />
@@ -62,22 +87,15 @@ export default function HeaderProfileMenuButton(props: HeaderMenuButtonProps) {
           </Button>
         )}
         {authenticated ? (
-        <MuiMenu
+          <MuiMenu {...menuProps}>
-          id="basic-menu"
-          anchorEl={anchorEl}
-          open={open}
-          onClose={handleClose}
-          MenuListProps={{
-            'aria-labelledby': 'basic-button',
-            sx: { padding: 'var(--spacing-xs)' },
-          }}
-          className="menu__list--header"
-          sx={{ 'z-index': 2 }}
-          PaperProps={{ className: 'MuiMenu-list--paper' }}
-        >
             <HeaderMenuLink useMui page={PAGES.UPLOADS} icon={ICONS.PUBLISH} name={__('Uploads')} />
             <HeaderMenuLink useMui page={PAGES.CHANNELS} icon={ICONS.CHANNEL} name={__('Channels')} />
-          <HeaderMenuLink useMui page={PAGES.CREATOR_DASHBOARD} icon={ICONS.ANALYTICS} name={__('Creator Analytics')} />
+            <HeaderMenuLink
+              useMui
+              page={PAGES.CREATOR_DASHBOARD}
+              icon={ICONS.ANALYTICS}
+              name={__('Creator Analytics')}
+            />
             <HeaderMenuLink useMui page={PAGES.REWARDS} icon={ICONS.REWARDS} name={__('Rewards')} />
             <HeaderMenuLink useMui page={PAGES.INVITE} icon={ICONS.INVITE} name={__('Invites')} />
             <HeaderMenuLink useMui page={PAGES.ODYSEE_MEMBERSHIP} icon={ICONS.UPGRADE} name={__('Odysee Premium')} />
@@ -94,19 +112,7 @@ export default function HeaderProfileMenuButton(props: HeaderMenuButtonProps) {
             </MuiMenuItem>
           </MuiMenu>
         ) : (
-        <MuiMenu
+          <MuiMenu {...menuProps}>
-          id="basic-menu"
-          anchorEl={anchorEl}
-          open={open}
-          onClose={handleClose}
-          MenuListProps={{
-            'aria-labelledby': 'basic-button',
-            sx: { padding: 'var(--spacing-xs)' },
-          }}
-          className="menu__list--header"
-          sx={{ 'z-index': 2 }}
-          PaperProps={{ className: 'MuiMenu-list--paper' }}
-        >
             <HeaderMenuLink useMui page={PAGES.AUTH_SIGNIN} icon={ICONS.SIGN_IN} name={__('Log In')} />
             <HeaderMenuLink useMui page={PAGES.AUTH} icon={ICONS.SIGN_UP} name={__('Sign Up')} />
             <HeaderMenuLink useMui page={PAGES.SETTINGS} icon={ICONS.SETTINGS} name={__('Settings')} />
@@ -114,5 +120,6 @@ export default function HeaderProfileMenuButton(props: HeaderMenuButtonProps) {
           </MuiMenu>
         )}
       </div>
+    </>
   );
 }

ui/scss/component/menu-button.scss

@@ -31,6 +31,10 @@ reach-portal {
   max-width: calc(100% - var(--height-button) - var(--spacing-xs));
 }
 
+.MuiMenu-list--paper {
+  display: flex;
+}
+
 [data-reach-menu-list],
 .MuiMenu-list--paper {
   display: block;