Improve mobile navbar and user area styling

Navbar now applies a mobileNavOpen style when the mobile menu is open, improving mobile compatibility. User area elements are moved into the link group for better mobile layout, and several CSS adjustments were made for smoother transitions and consistent icon sizing.

frontend/src/components/navbar/navbar.module.css

@@ -17,6 +17,12 @@
 
     --nav-margin-y: 1em;
     opacity: 0.95;
+
+    transition: all 0.3s ease-in-out;
+}
+
+.mobileNavOpen{
+    border-radius: 0;
 }
 
 /* Brand */
@@ -107,6 +113,7 @@
     align-items: center;
     gap: 0.4rem;
     margin: var(--nav-margin-y) auto;
+    width: max-content;
 }
 
 .linkButton:hover {
@@ -315,7 +322,7 @@
 }
 
 .userIcon {
-    font-size: 1.6rem;
+    font-size: inherit;
 }
 
 .avatar {