From 187af8b7d24ecbf1b08a3b3618c61dae0b6db94c Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 24 Apr 2022 17:53:03 -0500
Subject: [PATCH] Improve dropdown menu styles

---
 app/soapbox/components/dropdown_menu.tsx          | 8 ++++----
 app/soapbox/components/ui/icon/svg-icon.tsx       | 2 ++
 app/soapbox/features/account/components/header.js | 2 +-
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/app/soapbox/components/dropdown_menu.tsx b/app/soapbox/components/dropdown_menu.tsx
index e28ea0f9e..4bd747d0a 100644
--- a/app/soapbox/components/dropdown_menu.tsx
+++ b/app/soapbox/components/dropdown_menu.tsx
@@ -6,8 +6,8 @@ import { spring } from 'react-motion';
 import Overlay from 'react-overlays/lib/Overlay';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
 
-import Icon from 'soapbox/components/icon';
 import { IconButton } from 'soapbox/components/ui';
+import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
 import Motion from 'soapbox/features/ui/util/optional_motion';
 
 import type { Status } from 'soapbox/types/entities';
@@ -177,7 +177,7 @@ class DropdownMenu extends React.PureComponent<IDropdownMenu, IDropdownMenuState
     const { text, href, to, newTab, isLogout, icon, destructive } = option;
 
     return (
-      <li className={classNames('dropdown-menu__item', { destructive })} key={`${text}-${i}`}>
+      <li className={classNames('dropdown-menu__item truncate', { destructive })} key={`${text}-${i}`}>
         <a
           href={href || to || '#'}
           role='button'
@@ -190,8 +190,8 @@ class DropdownMenu extends React.PureComponent<IDropdownMenu, IDropdownMenuState
           target={newTab ? '_blank' : undefined}
           data-method={isLogout ? 'delete' : undefined}
         >
-          {icon && <Icon src={icon} />}
-          {text}
+          {icon && <SvgIcon src={icon} className='mr-3 h-5 w-5 flex-none' />}
+          <span className='truncate'>{text}</span>
         </a>
       </li>
     );
diff --git a/app/soapbox/components/ui/icon/svg-icon.tsx b/app/soapbox/components/ui/icon/svg-icon.tsx
index 84604150d..c84e40203 100644
--- a/app/soapbox/components/ui/icon/svg-icon.tsx
+++ b/app/soapbox/components/ui/icon/svg-icon.tsx
@@ -29,6 +29,8 @@ const SvgIcon: React.FC<ISvgIcon> = ({ src, alt, size = 24, className }): JSX.El
       height={size}
       loader={loader}
       data-testid='svg-icon'
+      // The cache causes bugs, and the ServiceWorker already caches icons.
+      cacheRequests={false}
     >
       {/* If the fetch fails, fall back to displaying the loader */}
       {loader}
diff --git a/app/soapbox/features/account/components/header.js b/app/soapbox/features/account/components/header.js
index c1d807546..1db5b1dd3 100644
--- a/app/soapbox/features/account/components/header.js
+++ b/app/soapbox/features/account/components/header.js
@@ -630,7 +630,7 @@ class Header extends ImmutablePureComponent {
                           return (
                             <Comp key={idx} {...itemProps} className='group'>
                               <div className='flex items-center'>
-                                <SvgIcon src={menuItem.icon} className='mr-3 h-5 w-5 text-gray-400 group-hover:text-gray-500' />
+                                <SvgIcon src={menuItem.icon} className='mr-3 h-5 w-5 text-gray-400 flex-none group-hover:text-gray-500' />
 
                                 <div className='truncate'>{menuItem.text}</div>
                               </div>