Cleanup a few things

app/soapbox/components/dropdown-menu/dropdown-menu-item.tsx

@@ -69,7 +69,7 @@ const DropdownMenuItem = ({ index, item, onClick }: IDropdownMenuItem) => {
   }, [itemRef.current, index]);
 
   if (item === null) {
-    return <li className='my-2 block h-[1px] bg-gray-100 dark:bg-gray-800' />;
+    return <li className='my-1 mx-2 h-[2px] bg-gray-100 dark:bg-gray-800' />;
   }
 
   return (
@@ -87,7 +87,7 @@ const DropdownMenuItem = ({ index, item, onClick }: IDropdownMenuItem) => {
         title={item.text}
         className={
           clsx({
-            'flex px-4 py-2.5 text-sm text-gray-700 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 focus:bg-gray-100 dark:focus:bg-primary-800 cursor-pointer': true,
+            'flex px-4 py-2.5 text-sm text-gray-700 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none cursor-pointer': true,
             'text-danger-600 dark:text-danger-400': item.destructive,
           })
         }

app/soapbox/components/dropdown-menu/dropdown-menu.tsx

@@ -18,16 +18,16 @@ import type { Status } from 'soapbox/types/entities';
 export type Menu = Array<MenuItem | null>;
 
 interface IDropdownMenu {
-  children?: JSX.Element,
-  disabled?: boolean,
-  items: Menu,
-  onClose?: () => void,
-  onOpen?: () => void,
-  onShiftClick?: React.EventHandler<React.MouseEvent | React.KeyboardEvent>,
-  placement?: Placement,
-  src?: string,
-  status?: Status,
-  title?: string,
+  children?: React.ReactElement
+  disabled?: boolean
+  items: Menu
+  onClose?: () => void
+  onOpen?: () => void
+  onShiftClick?: React.EventHandler<React.MouseEvent | React.KeyboardEvent>
+  placement?: Placement
+  src?: string
+  status?: Status
+  title?: string
 }
 
 const listenerOptions = supportsPassiveEvents ? { passive: true } : false;
@@ -286,6 +286,7 @@ const DropdownMenu = (props: IDropdownMenu) => {
                   'absolute w-0 h-0 border-0 border-solid border-transparent': true,
                   'border-t-white dark:border-t-gray-900 -bottom-[5px] -ml-[5px] left-[calc(50%-2.5px)] border-t-[5px] border-x-[5px] border-b-0': placement === 'top',
                   'border-b-white dark:border-b-gray-900 -top-[5px] -ml-[5px] left-[calc(50%-2.5px)] border-t-0 border-x-[5px] border-b-[5px]': placement === 'bottom',
+                  'border-b-white dark:border-b-gray-900 -top-[5px] -ml-[5px] left-[92.5%] border-t-0 border-x-[5px] border-b-[5px]': placement === 'bottom-end',
                 })
               }
             />

app/soapbox/components/ui/portal/portal.tsx

@@ -1,4 +1,4 @@
-import React, { useLayoutEffect, useRef } from 'react';
+import React, { useLayoutEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
 
 interface IPortal {
@@ -9,17 +9,14 @@ interface IPortal {
  * Portal
  */
 const Portal: React.FC<IPortal> = ({ children }) => {
-  const isRendered = useRef<boolean>(false);
+  const [isRendered, setIsRendered] = useState<boolean>(false);
 
   useLayoutEffect(() => {
-    if (isRendered.current) {
-      return;
-    }
+    setIsRendered(true);
+  }, []);
 
-    isRendered.current = true;
-  }, [isRendered.current]);
 
-  if (!isRendered.current) {
+  if (!isRendered) {
     return null;
   }
 

app/soapbox/features/account/components/header.tsx

@@ -5,7 +5,7 @@ import { AxiosError } from 'axios';
 import { List as ImmutableList } from 'immutable';
 import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
-import { Link, useHistory } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
 
 import { blockAccount, followAccount, pinAccount, removeFromFollowers, unblockAccount, unmuteAccount, unpinAccount } from 'soapbox/actions/accounts';
 import { mentionCompose, directCompose } from 'soapbox/actions/compose';
@@ -16,9 +16,9 @@ import { initReport } from 'soapbox/actions/reports';
 import { setSearchAccount } from 'soapbox/actions/search';
 import { getSettings } from 'soapbox/actions/settings';
 import Badge from 'soapbox/components/badge';
+import DropdownMenu, { Menu } from 'soapbox/components/dropdown-menu';
 import StillImage from 'soapbox/components/still-image';
-import { Avatar, HStack, IconButton, Menu, MenuButton, MenuDivider, MenuItem, MenuLink, MenuList } from 'soapbox/components/ui';
-import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
+import { Avatar, HStack, IconButton } from 'soapbox/components/ui';
 import MovedNote from 'soapbox/features/account-timeline/components/moved-note';
 import ActionButton from 'soapbox/features/ui/components/action-button';
 import SubscriptionButton from 'soapbox/features/ui/components/subscription-button';
@@ -31,8 +31,6 @@ import { Account } from 'soapbox/types/entities';
 import { isDefaultHeader, isLocal, isRemote } from 'soapbox/utils/accounts';
 import { MASTODON, parseVersion } from 'soapbox/utils/features';
 
-import type { Menu as MenuType } from 'soapbox/components/dropdown-menu';
-
 const messages = defineMessages({
   edit_profile: { id: 'account.edit_profile', defaultMessage: 'Edit profile' },
   linkVerifiedOn: { id: 'account.link_verified_on', defaultMessage: 'Ownership of this link was checked on {date}' },
@@ -275,7 +273,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
   };
 
   const makeMenu = () => {
-    const menu: MenuType = [];
+    const menu: Menu = [];
 
     if (!account) {
       return [];
@@ -645,39 +643,15 @@ const Header: React.FC<IHeader> = ({ account }) => {
               {renderShareButton()}
 
               {menu.length > 0 && (
-                <Menu>
-                  <MenuButton
-                    as={IconButton}
+                <DropdownMenu items={menu} placement='bottom-end'>
+                  <IconButton
                     src={require('@tabler/icons/dots.svg')}
                     theme='outlined'
                     className='px-2'
                     iconClassName='w-4 h-4'
                     children={null}
                   />
-
-                  <MenuList className='w-56'>
-                    {menu.map((menuItem, idx) => {
-                      if (typeof menuItem?.text === 'undefined') {
-                        return <MenuDivider key={idx} />;
-                      } else {
-                        const Comp = (menuItem.action ? MenuItem : MenuLink) as any;
-                        const itemProps = menuItem.action ? { onSelect: menuItem.action } : { to: menuItem.to, as: Link, target: menuItem.target || '_self' };
-
-                        return (
-                          <Comp key={idx} {...itemProps} className='group'>
-                            <HStack space={3} alignItems='center'>
-                              {menuItem.icon && (
-                                <SvgIcon src={menuItem.icon} className='h-5 w-5 flex-none text-gray-400 group-hover:text-gray-500' />
-                              )}
-
-                              <div className='truncate'>{menuItem.text}</div>
-                            </HStack>
-                          </Comp>
-                        );
-                      }
-                    })}
-                  </MenuList>
-                </Menu>
+                </DropdownMenu>
               )}
 
               <ActionButton account={account} />