Enhancement: more v3 ui tweaks (#13774)

src-ui/src/app/components/app-frame/toasts-dropdown/toasts-dropdown.component.html

@@ -1,7 +1,7 @@
 
-<li ngbDropdown class="nav-item mx-1" (openChange)="onOpenChange($event)">
+<li ngbDropdown class="nav-item mx-1 position-relative" (openChange)="onOpenChange($event)">
   @if (toasts().length) {
-    <span class="badge rounded-pill z-3 pe-none bg-secondary me-2 position-absolute top-0 left-0">{{ toasts().length }}</span>
+    <span class="notification-count badge rounded-pill z-3 pe-none bg-secondary position-absolute">{{ toasts().length }}</span>
   }
   <button class="btn border-0" id="notificationsDropdown" ngbDropdownToggle aria-label="Notifications" i18n-aria-label>
     <i-bs width="1.3em" height="1.3em" name="bell"></i-bs>

src-ui/src/app/components/app-frame/toasts-dropdown/toasts-dropdown.component.scss

@@ -11,11 +11,47 @@
   display: none;
 }
 
+.notification-count {
+  top: -.2rem;
+  right: -.2rem;
+  min-width: 1.15rem;
+  height: 1.15rem;
+  padding: .18rem .32rem;
+  font-size: .68rem;
+  line-height: 1;
+}
+
+.nav-item > .btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 2.5rem;
+  min-height: 2.5rem;
+  padding: .45rem .55rem;
+  border-radius: .6rem;
+
+  &:hover,
+  &:focus-visible {
+    background-color: rgba(0, 0, 0, .14);
+  }
+}
+
 .dropdown-item {
   white-space: initial;
 }
 
 @media screen and (max-width: 400px) {
+  .nav-item {
+    margin-right: 0 !important;
+    margin-left: 0 !important;
+  }
+
+  .nav-item > .btn {
+    min-width: 2.25rem;
+    padding-right: .4rem;
+    padding-left: .4rem;
+  }
+
   :host ::ng-deep .dropdown-menu-end {
     right: -3rem;
   }