From 2b688f089a8f3bf4fc806bc8403a305e4d6bf231 Mon Sep 17 00:00:00 2001
From: Matteo Scurati <matteo.scurati@gmail.com>
Date: Fri, 14 Jun 2024 17:01:37 +0200
Subject: [PATCH] fix: use a min-width value in the notifications-tag-counter
 (#25322)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--
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.
---
 .../app-header/__snapshots__/app-header.test.js.snap      | 4 ++--
 .../multichain/notifications-tag-counter/index.scss       | 5 +++++
 .../notifications-tag-counter.tsx                         | 8 ++++++--
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap b/ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap
index 290cdbe01773..d464e487dd57 100644
--- a/ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap
+++ b/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>
diff --git a/ui/components/multichain/notifications-tag-counter/index.scss b/ui/components/multichain/notifications-tag-counter/index.scss
index f5c8b1fe1e03..328c4cb9728d 100644
--- a/ui/components/multichain/notifications-tag-counter/index.scss
+++ b/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;
diff --git a/ui/components/multichain/notifications-tag-counter/notifications-tag-counter.tsx b/ui/components/multichain/notifications-tag-counter/notifications-tag-counter.tsx
index 39b2b0175db1..4964eb8e7a23 100644
--- a/ui/components/multichain/notifications-tag-counter/notifications-tag-counter.tsx
+++ b/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>