Drop unread indicator limit and fix overflow issue

stylesheets/_modules.scss

@@ -4607,17 +4607,13 @@ button.module-image__border-overlay:focus {
           @include dark-theme {
             border-color: $color-gray-80;
           }
-
-          &--two-digits,
-          &--many {
-            right: -(7px + $border-width);
-          }
         }
       }
 
       // We want this to just be the unread indicator selector, not a child of the parent.
       @at-root #{$unread-indicator-selector} {
         $size: 18px;
+        flex-shrink: 0;
 
         @include font-caption-bold;
         border-radius: 10px;
@@ -4628,8 +4624,8 @@ button.module-image__border-overlay:focus {
         margin-left: 10px;
         margin-top: 1px;
         min-width: $size;
-        padding-left: 3px;
+        padding-left: 4px;
-        padding-right: 3px;
+        padding-right: 4px;
         text-align: center;
         word-break: normal;
         display: flex;
@@ -4646,22 +4642,6 @@ button.module-image__border-overlay:focus {
         @include dark-theme {
           background-color: $color-ultramarine-dawn;
         }
-
-        &--two-digits,
-        &--many {
-          padding-left: 4px;
-          padding-right: 4px;
-        }
-
-        &--many {
-          font-size: 10px;
-
-          &::after {
-            content: '+';
-            display: inline-block;
-            font-size: 9px;
-          }
-        }
       }
 
       &__content {

ts/components/ConversationList.stories.tsx

@@ -398,7 +398,7 @@ ConversationMessageRequest.story = {
 export function ConversationsUnreadCount(): JSX.Element {
   return (
     <Wrapper
-      rows={[4, 10, 34, 250].map(unreadCount => ({
+      rows={[4, 10, 34, 250, 2048].map(unreadCount => ({
         type: RowType.Conversation,
         conversation: createConversation({
           lastMessage: {

ts/components/conversationList/BaseConversationListItem.tsx

@@ -310,22 +310,9 @@ function UnreadIndicator({
     return null;
   }
 
-  let classModifier: undefined | string;
-  if (count > 99) {
-    classModifier = 'many';
-  } else if (count > 9) {
-    classModifier = 'two-digits';
-  }
-
   return (
-    <div
+    <div className={classNames(`${BASE_CLASS_NAME}__unread-indicator`)}>
-      className={classNames(
+      {Boolean(count) && count}
-        `${BASE_CLASS_NAME}__unread-indicator`,
-        classModifier &&
-          `${BASE_CLASS_NAME}__unread-indicator--${classModifier}`
-      )}
-    >
-      {Boolean(count) && Math.min(count, 99)}
     </div>
   );
 }