Implement comprehensive responsive design improvements for sidebar and calendar views

- Add full responsive sidebar support for screens 600px+ height with three breakpoints (900px, 750px, 650px)
- Implement consistent spacing for all sidebar controls (view-selector, theme-selector, style-selector, add-calendar-button)
- Add calendar header compactness scaling based on screen height (padding, font sizes, min-heights)
- Implement width-based responsive event text sizing for better space utilization
- Fix login page theme inheritance issue by resetting theme to default on logout
- Remove problematic position:relative style from external calendar items that caused color picker interference
- Standardize external-calendar-list margin to 2px across all breakpoints
- Add proper overflow handling and minimum heights to ensure all sidebar components remain visible
- Scale event titles and times progressively smaller on narrower viewports (1200px, 900px, 600px breakpoints)

🤖 Generated with [Claude Code](https://claude.ai/code)

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

frontend/src/app.rs

@@ -573,6 +573,22 @@ pub fn App() -> Html {
         });
     }
 
+    // Reset theme to default when user is logged out
+    {
+        let auth_token = auth_token.clone();
+        use_effect_with((*auth_token).clone(), move |token| {
+            if token.is_none() {
+                // User is logged out, reset theme to default
+                if let Some(document) = web_sys::window().and_then(|w| w.document()) {
+                    if let Some(root) = document.document_element() {
+                        let _ = root.set_attribute("data-theme", "default");
+                        let _ = root.set_attribute("data-style", "default");
+                    }
+                }
+            }
+        });
+    }
+
     // Fetch user info when token is available
     {
         let user_info = user_info.clone();

frontend/src/components/sidebar.rs

@@ -262,7 +262,7 @@ pub fn sidebar(props: &SidebarProps) -> Html {
                                         };
                                         
                                         html! {
-                                            <li class="external-calendar-item" style="position: relative;">
+                                            <li class="external-calendar-item">
                                                 <div 
                                                     class={if props.color_picker_open.as_ref() == Some(&format!("external_{}", cal.id)) { 
                                                         "external-calendar-info color-picker-active"