Angular zooming out changes the shape of the badge

Issue

So I am using Angular Material badge and I want the shape to be full circle if the content is single digit and zoom out on chrome normally using the zoom or ctrl - / + . However I am either getting an ellipsis as the badge content grows or it is a circle with curved edges for small values and it becomes smaller and not centered as we zoom out.

.nav-link-badge {
              @media (min-width: 576px){
                display: absolute !important;
                align-items: center !important;
                width: auto !important;
                right: unset !important;
                text-align: center !important;
                padding-top: 50px;
                padding-right: 30px;
                padding-bottom: 50px;
                padding-left: 80px;
                font-size: 11px;
                font-weight: 600;
                border-radius: 20px;
                transition: opacity 0.2s ease-in-out 0.1s;
                margin-left: 8px;

                + .collapsable-arrow {
                    margin-left: 8px;
                }
              }
            }

Please suggest how I can get the desired behaviour in Angular badge. thank you

Solution

media  ( min-width: 576px){
            .nav-link-badge  {
                display: absolute !important;
                align-items: center !important;
                width: 35px;
                height: 35px;
                right: unset !important;
                text-align: center !important;
                padding-top: 50px;
                padding-right: 30px;
                padding-bottom: 50px;
                padding-left: 80px;
                font-size: 11px;
                font-weight: 600;
                border-radius: 20px;
                transition: opacity 0.2s ease-in-out 0.1s;
                margin-left: 8px;
                border-radius: 50%;

Answered By - user18605774