Update badge counts again to prevent overlay

app/soapbox/components/icon_with_counter.tsx

@@ -16,7 +16,7 @@ const IconWithCounter: React.FC<IIconWithCounter> = ({ icon, count, countMax, ..
       <Icon id={icon} {...rest as IIcon} />
 
       {count > 0 && (
-        <i className='absolute -top-2 -right-2'>
+        <i className='absolute -top-2 -right-3'>
           <Counter count={count} countMax={countMax} />
         </i>
       )}

app/soapbox/components/sidebar-navigation-link.tsx

@@ -2,7 +2,7 @@ import classNames from 'clsx';
 import React from 'react';
 import { NavLink } from 'react-router-dom';
 
-import { Counter, HStack, Icon, Text } from './ui';
+import { Icon, Text } from './ui';
 
 interface ISidebarNavigationLink {
   /** Notification count, if any. */
@@ -46,19 +46,15 @@ const SidebarNavigationLink = React.forwardRef((props: ISidebarNavigationLink, r
       <span className='relative'>
         <Icon
           src={icon}
+          count={count}
+          countMax={countMax}
           className={classNames('h-5 w-5 group-hover:text-primary-500', {
             'text-primary-500': isActive,
           })}
         />
       </span>
 
-      <HStack space={2} alignItems='center'>
       <Text weight='semibold' theme='inherit'>{text}</Text>
-
-        {count ? (
-          <Counter count={count} countMax={countMax} />
-        ) : null}
-      </HStack>
     </NavLink>
   );
 });

app/soapbox/components/sidebar-navigation.tsx

@@ -116,7 +116,7 @@ const SidebarNavigation = () => {
           to='/chats'
           icon={require('@tabler/icons/mail.svg')}
           count={unreadChatsCount}
-          countMax={20}
+          countMax={9}
           text={<FormattedMessage id='navigation.direct_messages' defaultMessage='Messages' />}
         />
       );

app/soapbox/components/thumb_navigation.tsx

@@ -24,7 +24,7 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
           to='/chats'
           exact
           count={unreadChatsCount}
-          countMax={20}
+          countMax={9}
         />
       );
     }

app/soapbox/components/ui/counter/counter.tsx

@@ -12,7 +12,7 @@ interface ICounter {
 /** A simple counter for notifications, etc. */
 const Counter: React.FC<ICounter> = ({ count, countMax }) => {
   return (
-    <span className='block px-1.5 py-0.5 bg-secondary-500 text-xs font-semibold text-white rounded-full ring-2 ring-white dark:ring-gray-800'>
+    <span className='h-5 min-w-[20px] max-w-[26px] flex items-center justify-center bg-secondary-500 text-xs font-medium text-white rounded-full ring-2 ring-white dark:ring-gray-800'>
       {shortNumberFormat(count, countMax)}
     </span>
   );

app/soapbox/components/ui/icon/icon.tsx

@@ -9,6 +9,8 @@ interface IIcon extends Pick<React.SVGAttributes<SVGAElement>, 'strokeWidth'> {
   className?: string,
   /** Number to display a counter over the icon. */
   count?: number,
+  /** Optional max to cap count (ie: N+) */
+  countMax?: number,
   /** Tooltip text for the icon. */
   alt?: string,
   /** URL to the svg icon. */
@@ -18,11 +20,11 @@ interface IIcon extends Pick<React.SVGAttributes<SVGAElement>, 'strokeWidth'> {
 }
 
 /** Renders and SVG icon with optional counter. */
-const Icon: React.FC<IIcon> = ({ src, alt, count, size, ...filteredProps }): JSX.Element => (
-  <div className='relative' data-testid='icon'>
+const Icon: React.FC<IIcon> = ({ src, alt, count, size, countMax, ...filteredProps }): JSX.Element => (
+  <div className='flex flex-col flex-shrink-0 relative' data-testid='icon'>
     {count ? (
-      <span className='absolute -top-2 -right-3'>
-        <Counter count={count} />
+      <span className='absolute -top-2 -right-3 min-w-[20px] h-5 flex-shrink-0 whitespace-nowrap flex items-center justify-center break-words'>
+        <Counter count={count} countMax={countMax} />
       </span>
     ) : null}