fix: Improved UI and NavBar Menu

- Fixed alignment issues in the frontend
- Fixed the box border hover selection in the menu bar (mobile)
- Changed the theme toggle button color to standard frontend theme
- Enhanced UI components

1 files changed, 63 insertions, 0 deletions

diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index 5210ba7..0b2a4b4 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -708,6 +708,55 @@ a.nav-button-transparent:not(:hover):not(:focus):not(:active) {
     overscroll-behavior: contain;
     -webkit-overflow-scrolling: touch;
   }
+  
+  /* Hide scrollbar in mobile menu while maintaining scroll functionality */
+  [data-radix-dialog-content] {
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* Internet Explorer and Edge */
+  }
+  
+  [data-radix-dialog-content]::-webkit-scrollbar {
+    display: none; /* Chrome, Safari, Opera */
+    width: 0;
+    height: 0;
+  }
+  
+  /* Specifically target Sheet content scrolling areas */
+  [data-radix-dialog-content] .overflow-y-auto,
+  [data-radix-dialog-content] .overflow-auto {
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* Internet Explorer and Edge */
+  }
+  
+  [data-radix-dialog-content] .overflow-y-auto::-webkit-scrollbar,
+  [data-radix-dialog-content] .overflow-auto::-webkit-scrollbar {
+    display: none; /* Chrome, Safari, Opera */
+    width: 0;
+    height: 0;
+  }
+  
+  /* Mobile navigation specific scrollbar hiding */
+  .mobile-nav-scroll {
+    scrollbar-width: none !important; /* Firefox */
+    -ms-overflow-style: none !important; /* Internet Explorer and Edge */
+  }
+  
+  .mobile-nav-scroll::-webkit-scrollbar {
+    display: none !important; /* Chrome, Safari, Opera */
+    width: 0 !important;
+    height: 0 !important;
+    background: transparent !important;
+  }
+  
+  /* Additional scrollbar hiding for all mobile menu elements */
+  [data-radix-dialog-content] *,
+  [data-radix-dialog-content] *::-webkit-scrollbar {
+    scrollbar-width: none !important;
+    -ms-overflow-style: none !important;
+    display: none !important;
+    width: 0 !important;
+    height: 0 !important;
+  }
 }
 
 /* Small mobile optimizations */
@@ -756,3 +805,17 @@ a.nav-button-transparent:not(:hover):not(:focus):not(:active) {
   outline: 2px solid var(--ring) !important;
   outline-offset: 2px !important;
 }
+
+/* Mobile menu icon stroke uniformity */
+.mobile-nav-scroll svg,
+[data-radix-dialog-content] svg {
+  stroke-linecap: round !important;
+  stroke-linejoin: round !important;
+}
+
+/* Force consistent stroke width for mobile quick action icons */
+@media (max-width: 768px) {
+  [data-radix-dialog-content] button svg {
+    stroke-width: inherit !important;
+  }
+}