style: improve mobile and desktop user avatar styles; adjust flex properties and margins for better layout

Author: murdercode

src/styles/responsive.css

@@ -88,16 +88,19 @@
     margin-top: 0;
     margin-bottom: 0;
     display: flex;
-    flex-direction: row; /* Orizzontale in mobile */
+    flex-direction: row;
+    /* Orizzontale in mobile */
     align-items: center;
     gap: 1rem;
-    margin-left: auto; /* Spinge tutto a destra */
+    margin-left: auto;
+    /* Spinge tutto a destra */
   }
 
   /* User avatar adjustments for mobile */
   .user-avatar-container {
     margin-bottom: 0;
-    margin-left: 0; /* Reset, già gestito da sidebar-bottom */
+    margin-left: 0;
+    /* Reset, già gestito da sidebar-bottom */
   }
 
   .user-avatar-btn {
@@ -226,7 +229,8 @@
   }
 
   .sidebar-bottom {
-    gap: 0.75rem; /* Ridotto per schermi piccoli */
+    gap: 0.75rem;
+    /* Ridotto per schermi piccoli */
   }
 
   .sidebar-icon,
@@ -244,8 +248,8 @@
 
   /* User avatar adjustments for extra small screens */
   .user-avatar-btn {
-    width: 40px;
-    height: 40px;
+    width: 32px;
+    height: 32px;
   }
 
   body {

src/styles/sidebar.css

@@ -46,7 +46,8 @@
   margin-top: auto;
   margin-bottom: 1rem;
   display: flex;
-  flex-direction: column; /* Verticale su desktop */
+  flex-direction: column;
+  /* Verticale su desktop */
   align-items: center;
   gap: 1rem;
 }
@@ -198,14 +199,13 @@
 /* User Avatar Styles */
 .user-avatar-container {
   position: relative;
-  margin-bottom: 16px;
   display: flex;
   justify-content: center;
 }
 
 .user-avatar-btn {
-  width: 48px;
-  height: 48px;
+  width: 42px;
+  height: 42px;
   border-radius: 50%;
   overflow: hidden;
   border: 2px solid transparent;
@@ -254,7 +254,8 @@
 .user-dropdown {
   position: absolute;
   bottom: 0;
-  left: 70px; /* Desktop: appare a destra */
+  left: 70px;
+  /* Desktop: appare a destra */
   width: 200px;
   background: var(--focus-bg);
   border: 1px solid color-mix(in srgb, var(--focus-timer-color) 20%, transparent);
@@ -270,6 +271,7 @@
     opacity: 0;
     transform: translateX(-10px) scale(0.95);
   }
+
   to {
     opacity: 1;
     transform: translateX(0) scale(1);
@@ -279,17 +281,19 @@
 /* Mobile responsiveness */
 @media (max-width: 768px) {
   .user-dropdown {
-    bottom: 60px; /* Mobile: sopra l'avatar */
+    bottom: 60px;
+    /* Mobile: sopra l'avatar */
     left: 50%;
     transform: translateX(-50%);
     animation: dropdownFadeInUp 0.2s ease-out;
   }
-  
+
   @keyframes dropdownFadeInUp {
     from {
       opacity: 0;
       transform: translateX(-50%) translateY(10px) scale(0.95);
     }
+
     to {
       opacity: 1;
       transform: translateX(-50%) translateY(0) scale(1);