preference sidebar incorrect render fix + badge center alignment (#3783)

UI/Web/src/app/sidenav/preference-nav/preference-nav.component.html

@@ -9,7 +9,7 @@
 
           @for(section of sections; track section.title + section.children.length; let idx = $index;) {
             @if (hasAnyChildren(user, section)) {
-              <h5 class="side-nav-header mb-2 ms-3" [ngClass]="{'mt-4': idx > 0}">{{t(section.title)}}</h5>
+              <h5 class="side-nav-header mb-2" [ngClass]="{'mt-4': idx > 0}">{{t(section.title)}}</h5>
               @for(item of section.children; track item.fragment) {
                 @if (accountService.hasAnyRole(user, item.roles, item.restrictRoles)) {
                   <app-side-nav-item [id]="'nav-item-' + item.fragment" [noIcon]="true" link="/settings" [fragment]="item.fragment" [title]="item.fragment | settingFragment" [badgeCount]="item.badgeCount$ | async"></app-side-nav-item>

UI/Web/src/theme/components/_sidenav.scss

@@ -28,7 +28,7 @@
   }
   //START closed state of the sidebar
   &.closed {
-    width: 2.825rem;
+    width: 3.125rem;
     overflow-x: hidden;
     overflow-y: hidden;
     background-color: var(--side-nav-closed-bg-color);
@@ -36,6 +36,11 @@
     height: calc((var(--vh) * 100) - 6.5rem);
     border-radius: unset;
 
+    // For Firefox
+    @supports (-moz-appearance: none) {
+      width: 2.5rem;
+    }
+
     .side-nav {
       .side-nav-item {
         color: var(--side-nav-item-closed-color);
@@ -46,6 +51,10 @@
           }
         }
 
+        .phone-hidden:first-of-type {
+          margin-left: unset;
+        }
+
         .active-highlight {
           opacity: 0;
         }
@@ -83,10 +92,10 @@
         display: flex;
 
         &:first-of-type {
-          text-align: center;
           width: 2.5rem;
           min-width: 2.5rem;
           margin-left: 0.3rem;
+          justify-content: center;
         }
 
         &:last-child {
@@ -95,9 +104,7 @@
         }
 
         div {
-          align-items: center;
           height: 100%;
-          justify-content: inherit;
           padding: 0 0.625rem;
 
           i {
@@ -193,10 +200,12 @@
     .side-nav {
       overflow-x: hidden;
       padding-bottom: 0.625rem;
+      padding-left: 1.125rem;
 
       .side-nav-header {
         color: #ffffff;
         font-size: 1rem;
+        margin-left: unset;
 
         &:first-of-type {
           margin-top: 0.7rem;
@@ -207,7 +216,6 @@
         font-size: 1rem;
         min-height: 1.875rem;
         justify-content: unset;
-        margin-left: 1.125rem;
 
         &.active {
           .side-nav-text {
@@ -220,6 +228,14 @@
           margin-left: 0.75rem;
           font-size: 0.9rem;
           color: #999999;
+          
+          div {
+            display: flex;
+            
+            .badge {
+              align-self: center;
+            }
+          }
         }
 
         .card-actions {
@@ -278,9 +294,9 @@
       }
     }
   }
-  //START sidebar closed
+  //START sidebar bottom closed
   &.closed {
-    width: 3.4375rem;
+    width: 2.5rem;
     overflow-x: hidden;
     overflow-y: auto;
     background-color: unset;
@@ -295,7 +311,7 @@
       }
     }
   }
-  //END sidebar closed
+  //END sidebar bottom closed
 }
 //END kavita+ subscription bottom heart button