chore: fix preferences count bubble size & position

packages/web/src/javascripts/Components/Preferences/PreferencesComponents/CountBubble.tsx

@@ -0,0 +1,28 @@
+import { classNames } from '@standardnotes/snjs'
+
+type Props = {
+  count: string | number | undefined
+  position: 'left' | 'right'
+  className?: string
+}
+
+const CountBubble = ({ count, position, className }: Props) => {
+  if (!count) {
+    return null
+  }
+
+  return (
+    <div
+      className={classNames(
+        'flex aspect-square h-5 w-5 items-center justify-center rounded-full border border-info-contrast bg-info text-[0.75rem] font-bold text-info-contrast md:h-4 md:w-4 md:text-[0.5rem]',
+        'absolute bottom-full translate-y-3 md:translate-y-2',
+        position === 'left' ? 'right-full md:translate-x-2' : 'left-full -translate-x-3 md:-translate-x-2',
+        className,
+      )}
+    >
+      {count}
+    </div>
+  )
+}
+
+export default CountBubble

packages/web/src/javascripts/Components/Preferences/PreferencesComponents/MenuItem.tsx

@@ -2,6 +2,7 @@ import Icon from '@/Components/Icon/Icon'
 import { FunctionComponent } from 'react'
 import { IconType, classNames } from '@standardnotes/snjs'
 import { ErrorCircle } from '@/Components/UIElements/ErrorCircle'
+import CountBubble from './CountBubble'
 
 interface Props {
   iconType: IconType
@@ -31,11 +32,7 @@ const PreferencesMenuItem: FunctionComponent<Props> = ({
   >
     <div className="relative mr-1">
       <Icon className={classNames('text-base', selected ? 'text-info' : 'text-neutral')} type={iconType} />
-      {bubbleCount ? (
-        <div className="absolute bottom-full right-full flex aspect-square h-4 w-4 translate-x-2 translate-y-2 items-center justify-center rounded-full border border-info-contrast bg-info text-[0.5rem] font-bold text-info-contrast">
-          {bubbleCount}
-        </div>
-      ) : null}
+      <CountBubble position="left" count={bubbleCount} />
     </div>
     <div className="min-w-1" />
     {label}