Redesign sidebar user section to fix overlap issue

Restructured layout: avatar, truncated username, and logout icon
in a single row. Collapsed state stacks vertically. Logout button
uses a subtle icon-only style with red hover. Proper text ellipsis
prevents name overflow.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

compliance-dashboard/src/components/sidebar.rs

@@ -130,8 +130,9 @@ pub fn Sidebar() -> Element {
                 let auth_info = use_context::<Signal<AuthInfo>>();
                 let info = auth_info();
                 let initials = info.name.chars().next().unwrap_or('U').to_uppercase().to_string();
+                let user_class = if collapsed() { "sidebar-user sidebar-user-collapsed" } else { "sidebar-user" };
                 rsx! {
-                    div { class: "sidebar-user",
+                    div { class: "{user_class}",
                         div { class: "user-avatar",
                             if info.avatar_url.is_empty() {
                                 span { class: "avatar-initials", "{initials}" }
@@ -140,15 +141,13 @@ pub fn Sidebar() -> Element {
                             }
                         }
                         if !collapsed() {
-                            div { class: "user-info",
-                                span { class: "user-name", "{info.name}" }
-                                a {
-                                    href: "/logout",
-                                    class: "logout-link",
-                                    Icon { icon: BsBoxArrowRight, width: 14, height: 14 }
-                                    " Logout"
-                                }
-                            }
+                            span { class: "user-name", "{info.name}" }
+                        }
+                        a {
+                            href: "/logout",
+                            class: if collapsed() { "logout-btn logout-btn-collapsed" } else { "logout-btn" },
+                            title: "Sign out",
+                            Icon { icon: BsBoxArrowRight, width: 16, height: 16 }
                         }
                     }
                 }