Fix bell Icon Badge

includes/admin/admin-frontend/index.html

@@ -84,8 +84,8 @@
         <div class="admin-alerts-wrap">
           <button type="button" id="admin-alerts-button" class="admin-topbar-action admin-alerts-bell" title="Alerts" aria-label="Alerts" aria-expanded="false" aria-haspopup="true">
             <i class="fas fa-bell" aria-hidden="true"></i>
-            <span id="admin-alerts-badge" class="admin-alerts-badge">0</span>
           </button>
+          <span id="admin-alerts-badge" class="admin-alerts-badge" aria-hidden="true">0</span>
           <div id="admin-alerts-panel" class="admin-alerts-panel" role="dialog" aria-label="Alerts">
             <header class="admin-alerts-panel-header">
               <h3 class="admin-alerts-panel-title">Alerts</h3>

includes/admin/admin-frontend/styles.css

@@ -1455,6 +1455,7 @@ dialog > .dialog-notifications > * {
   padding: 0 1rem;
   border-bottom: 1px solid var(--admin-border);
   background: var(--admin-bg-muted);
+  overflow: visible;
 }
 
 .admin-topbar-spacer {
@@ -1496,10 +1497,14 @@ dialog > .dialog-notifications > * {
 /* Alerts bell + dropdown */
 .admin-alerts-wrap {
   position: relative;
+  display: inline-flex;
+  flex-shrink: 0;
+  overflow: visible;
 }
 
 .admin-alerts-bell {
   position: relative;
+  overflow: visible;
 }
 
 .admin-alerts-bell--active {
@@ -1514,23 +1519,28 @@ dialog > .dialog-notifications > * {
 .admin-alerts-badge {
   display: none;
   position: absolute;
-  top: -0.25rem;
-  right: -0.25rem;
-  min-width: 1.125rem;
-  height: 1.125rem;
-  padding: 0 0.3125rem;
+  top: -0.3125rem;
+  right: -0.4375rem;
+  z-index: 2;
+  min-width: 1.25rem;
+  height: 1.25rem;
+  padding: 0 0.375rem;
   border-radius: var(--radius-full);
+  border: 2px solid var(--admin-bg-muted);
   background: var(--admin-warning);
   color: #0a0e1a;
-  font-size: 0.625rem;
+  font-size: 0.6875rem;
   font-weight: 700;
-  line-height: 1.125rem;
-  text-align: center;
+  line-height: 1;
+  white-space: nowrap;
+  align-items: center;
+  justify-content: center;
   pointer-events: none;
+  box-sizing: border-box;
 }
 
 .admin-alerts-badge--visible {
-  display: block;
+  display: inline-flex;
 }
 
 .admin-alerts-panel {