From 53d03237c59d03bae5aec7efefcbc1dcfd41ebde Mon Sep 17 00:00:00 2001
From: Christopher <39032787+MrRobotjs@users.noreply.github.com>
Date: Fri, 9 May 2025 22:26:50 -0600
Subject: [PATCH] fix home sidebar closed state buttons

- was not sized properly for closed state
- different sizing for firefox since firefox doesnt insert the scrollbar like chrome does
---
 UI/Web/src/theme/components/_sidenav.scss | 21 ++++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/UI/Web/src/theme/components/_sidenav.scss b/UI/Web/src/theme/components/_sidenav.scss
index 31a205edd..33faf7d82 100644
--- a/UI/Web/src/theme/components/_sidenav.scss
+++ b/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 {
@@ -287,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;
@@ -304,7 +311,7 @@
       }
     }
   }
-  //END sidebar closed
+  //END sidebar bottom closed
 }
 //END kavita+ subscription bottom heart button