From 7e058ba97242b2be6d74d97943a23aa1cfed025f Mon Sep 17 00:00:00 2001 From: Connor Johnstone Date: Mon, 22 Sep 2025 18:04:02 -0400 Subject: [PATCH] Implement comprehensive responsive design improvements for sidebar and calendar views MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 --- frontend/src/app.rs | 16 + frontend/src/components/sidebar.rs | 2 +- frontend/styles.css | 525 +++++++++++++++++++++++++++-- 3 files changed, 514 insertions(+), 29 deletions(-) diff --git a/frontend/src/app.rs b/frontend/src/app.rs index 8719fbf..1b04863 100644 --- a/frontend/src/app.rs +++ b/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(); diff --git a/frontend/src/components/sidebar.rs b/frontend/src/components/sidebar.rs index d6d75f5..9b6da1b 100644 --- a/frontend/src/components/sidebar.rs +++ b/frontend/src/components/sidebar.rs @@ -262,7 +262,7 @@ pub fn sidebar(props: &SidebarProps) -> Html { }; html! { -
  • +