fix: use a min-width value in the notifications-tag-counter (#25322)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

This PR introduces a fix for a bug related to the UI of the
`notifications-tag-counter` component. The component now has a min-width
to prevent the tag from appearing squished in the case of a single
character.

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/25322?quickstart=1)

## **Related issues**

## **Manual testing steps**

## **Screenshots/Recordings**

### **Before**

<img width="97" alt="Screenshot 2024-06-14 at 11 58 07"
src="https://github.com/MetaMask/metamask-extension/assets/1284304/e9344e9b-ef7b-421b-8631-a19b27f90bc0">

### **After**

<img width="214" alt="Screenshot 2024-06-14 at 14 54 30"
src="https://github.com/MetaMask/metamask-extension/assets/1284304/5704f5d7-a16f-4de9-812a-e4d6c59fb4f6">
<img width="279" alt="Screenshot 2024-06-14 at 14 54 35"
src="https://github.com/MetaMask/metamask-extension/assets/1284304/4eb2de3b-ca53-428a-abc8-0b720cd2eb32">

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [x] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap

@@ -383,11 +383,11 @@ exports[`App Header should match snapshot 1`] = `
               style="position: relative;"
             >
               <div
-                class="mm-box notification-list-item__unread-dot__wrapper mm-box--padding-top-0 mm-box--padding-right-0 mm-box--padding-bottom-0 mm-box--padding-left-0 mm-box--display-block mm-box--background-color-error-default mm-box--rounded-md mm-box--border-style-none"
+                class="mm-box notification-list-item__unread-dot__wrapper mm-box--padding-top-0 mm-box--padding-right-0 mm-box--padding-bottom-0 mm-box--padding-left-0 mm-box--display-block mm-box--background-color-error-default mm-box--rounded-lg mm-box--border-style-none"
                 style="position: absolute; cursor: pointer; top: -5px; left: 10px; z-index: 1;"
               >
                 <p
-                  class="mm-box mm-text notifications-tag-counter__unread-dot mm-text--body-xs mm-box--color-error-inverse"
+                  class="mm-box mm-text notifications-tag-counter__unread-dot mm-text--body-xs mm-text--text-align-center mm-box--color-error-inverse"
                 >
                   1
                 </p>

ui/components/multichain/notifications-tag-counter/index.scss

@@ -2,7 +2,12 @@
   padding-left: 6px;
   padding-right: 6px;
 
+  &__text {
+    min-width: 13px;
+  }
+
   &__unread-dot {
+    min-width: 16.5px;
     padding-left: 3px;
     padding-right: 3px;
     line-height: 1.4;

ui/components/multichain/notifications-tag-counter/notifications-tag-counter.tsx

@@ -8,6 +8,7 @@ import {
   Display,
   TextColor,
   TextVariant,
+  TextAlign,
 } from '../../../helpers/constants/design-system';
 
 type NotificationsTagCounterProps = {
@@ -37,7 +38,7 @@ export const NotificationsTagCounter = ({
         }}
         backgroundColor={BackgroundColor.errorDefault}
         borderStyle={BorderStyle.none}
-        borderRadius={BorderRadius.MD}
+        borderRadius={BorderRadius.LG}
         paddingTop={0}
         paddingBottom={0}
         paddingLeft={0}
@@ -47,6 +48,7 @@ export const NotificationsTagCounter = ({
           color={TextColor.errorInverse}
           variant={TextVariant.bodyXs}
           className="notifications-tag-counter__unread-dot"
+          textAlign={TextAlign.Center}
         >
           {notificationsCount > 10 ? '9+' : notificationsCount}
         </Text>
@@ -58,7 +60,7 @@ export const NotificationsTagCounter = ({
     <Box
       backgroundColor={BackgroundColor.errorDefault}
       borderStyle={BorderStyle.none}
-      borderRadius={BorderRadius.MD}
+      borderRadius={BorderRadius.LG}
       paddingTop={0}
       paddingBottom={0}
       className="notifications-tag-counter"
@@ -67,6 +69,8 @@ export const NotificationsTagCounter = ({
         color={TextColor.errorInverse}
         variant={TextVariant.bodySm}
         data-testid="global-menu-notification-count"
+        className="notifications-tag-counter__text"
+        textAlign={TextAlign.Center}
       >
         {notificationsCount > 10 ? '9+' : notificationsCount}
       </Text>