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" 

frontend/styles.css

@@ -245,7 +245,7 @@ body {
 /* Sidebar Styles */
 .app-sidebar {
     width: 280px;
-    min-height: 100vh;
+    height: 100vh;
     background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
     color: white;
     display: flex;
@@ -255,6 +255,7 @@ body {
     left: 0;
     top: 0;
     z-index: 100;
+    overflow: hidden;
 }
 
 .sidebar-header {
@@ -299,6 +300,10 @@ body {
     flex: 1;
     padding: 1rem;
     border-top: 1px solid rgba(255,255,255,0.1);
+    overflow-y: auto;
+    min-height: 0;
+    /* Minimum height for at least 2 calendar items (header + 2 items) */
+    min-height: calc(1rem + 0.75rem + (2 * (1rem + 2.25rem + 0.5rem)));
 }
 
 .calendar-list h3 {
@@ -335,6 +340,7 @@ body {
     transform: translateX(2px);
 }
 
+
 .calendar-color {
     width: 16px;
     height: 16px;
@@ -353,14 +359,16 @@ body {
 
 /* Inline color picker for forms */
 .color-picker {
-    background: white;
+    background: var(--modal-background);
     border-radius: 4px;
     padding: 1rem;
-    border: 1px solid #e5e7eb;
+    border: 1px solid var(--border-primary);
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 0.75rem;
     max-width: 220px;
+    position: relative;
+    z-index: 1000000;
 }
 
 /* Dropdown color picker for sidebar calendars */
@@ -368,9 +376,10 @@ body {
     position: absolute;
     top: 100%;
     left: 0;
-    background: white;
+    background: var(--modal-background);
     border-radius: 4px;
     padding: 1rem;
+    border: 1px solid var(--border-primary);
     box-shadow: 0 4px 12px rgba(0,0,0,0.15);
     z-index: 999999;
     display: grid;
@@ -379,6 +388,12 @@ body {
     min-width: 160px;
     border: 1px solid rgba(0,0,0,0.1);
 }
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 0.75rem;
+    min-width: 160px;
+    border: 1px solid rgba(0,0,0,0.1);
+}
 
 .color-option {
     width: 38px;
@@ -428,6 +443,7 @@ body {
     z-index: 999;
 }
 
+
 .calendar-name {
     color: white;
     font-size: 0.9rem;
@@ -447,6 +463,8 @@ body {
 .sidebar-footer {
     padding: 1rem;
     border-top: 1px solid rgba(255,255,255,0.1);
+    margin-top: auto;
+    flex-shrink: 0;
 }
 
 .app-main {
@@ -458,6 +476,364 @@ body {
     box-sizing: border-box;
 }
 
+/* Responsive Sidebar - Minimum 600px height support */
+@media (max-height: 900px) and (min-height: 600px) {
+    .sidebar-header {
+        padding: 1.2rem 1.2rem 0.8rem;
+    }
+    
+    .sidebar-header h1 {
+        font-size: 1.4rem;
+        margin: 0 0 0.5rem 0;
+    }
+    
+    .user-info {
+        margin-bottom: 0.2rem;
+    }
+    
+    .user-info p {
+        margin: 0.15rem 0;
+        font-size: 0.8rem;
+    }
+    
+    .calendar-list {
+        padding: 0.6rem;
+        min-height: calc(0.8rem + 0.5rem + (2 * (0.8rem + 1.8rem + 0.4rem)));
+    }
+    
+    .calendar-list h3 {
+        font-size: 0.85rem;
+        margin: 0 0 0.5rem 0;
+    }
+    
+    .calendar-list li {
+        padding: 0.3rem 0.5rem;
+        gap: 0.4rem;
+        margin-bottom: 0.2rem;
+    }
+    
+    .calendar-list ul {
+        gap: 0.3rem;
+    }
+    
+    
+    .external-calendar-info {
+        padding: 0.3rem 0.5rem;
+        gap: 0.4rem;
+    }
+    
+    .sidebar-footer {
+        padding: 0.6rem;
+    }
+    
+    .add-calendar-button {
+        margin-bottom: 0.25rem !important;
+        padding: 0.3rem 0.6rem !important;
+        font-size: 0.8rem;
+    }
+    
+    .view-selector {
+        margin-bottom: 0.25rem !important;
+    }
+    
+    .view-selector-dropdown {
+        padding: 0.3rem 0.5rem !important;
+        font-size: 0.8rem;
+    }
+    
+    .theme-selector,
+    .style-selector {
+        margin-bottom: 0.25rem !important;
+    }
+    
+    .theme-selector-dropdown,
+    .style-selector-dropdown {
+        padding: 0.3rem 0.5rem !important;
+        font-size: 0.8rem;
+    }
+    
+    /* Compact calendar headers */
+    .calendar-header {
+        padding: 1rem 1.5rem !important;
+    }
+    
+    .month-year {
+        font-size: 1.5rem !important;
+    }
+    
+    .week-day-header {
+        min-height: 60px !important;
+        padding: 0.4rem !important;
+    }
+    
+    .weekday-header {
+        padding: 0.8rem !important;
+        font-size: 0.85rem !important;
+    }
+    
+    .weekday-name {
+        font-size: 0.85rem !important;
+    }
+    
+    .week-day-header .day-number {
+        font-size: 1.3rem !important;
+    }
+    
+    .logout-button {
+        padding: 0.3rem 0.6rem;
+        font-size: 0.8rem;
+    }
+}
+
+@media (max-height: 750px) and (min-height: 600px) {
+    .sidebar-header {
+        padding: 0.8rem 1rem 0.5rem;
+    }
+    
+    .sidebar-header h1 {
+        font-size: 1.2rem;
+        margin: 0 0 0.3rem 0;
+    }
+    
+    .user-info {
+        margin-bottom: 0.1rem;
+    }
+    
+    .user-info p {
+        font-size: 0.75rem;
+        margin: 0.1rem 0;
+    }
+    
+    .calendar-list {
+        padding: 0.4rem;
+        min-height: calc(0.75rem + 0.4rem + (2 * (0.75rem + 1.6rem + 0.25rem)));
+    }
+    
+    .calendar-list h3 {
+        font-size: 0.8rem;
+        margin: 0 0 0.4rem 0;
+    }
+    
+    .calendar-list li {
+        padding: 0.25rem 0.4rem;
+        gap: 0.3rem;
+        margin-bottom: 0.15rem;
+    }
+    
+    .calendar-list ul {
+        gap: 0.2rem;
+    }
+    
+    .calendar-name {
+        font-size: 0.8rem;
+    }
+    
+    
+    .external-calendar-info {
+        padding: 0.25rem 0.4rem;
+        gap: 0.3rem;
+    }
+    
+    .external-calendar-name {
+        font-size: 0.75rem;
+    }
+    
+    .sidebar-footer {
+        padding: 0.4rem;
+    }
+    
+    .add-calendar-button {
+        margin-bottom: 0.15rem !important;
+        padding: 0.2rem 0.4rem !important;
+        font-size: 0.75rem;
+    }
+    
+    .view-selector {
+        margin-bottom: 0.15rem !important;
+    }
+    
+    .view-selector-dropdown {
+        padding: 0.2rem 0.3rem !important;
+        font-size: 0.75rem;
+    }
+    
+    .theme-selector,
+    .style-selector {
+        margin-bottom: 0.15rem !important;
+    }
+    
+    .theme-selector-dropdown,
+    .style-selector-dropdown {
+        padding: 0.2rem 0.3rem !important;
+        font-size: 0.75rem;
+    }
+    
+    /* More compact calendar headers */
+    .calendar-header {
+        padding: 0.8rem 1.2rem !important;
+    }
+    
+    .month-year {
+        font-size: 1.3rem !important;
+    }
+    
+    .week-day-header {
+        min-height: 55px !important;
+        padding: 0.3rem !important;
+    }
+    
+    .weekday-header {
+        padding: 0.6rem !important;
+        font-size: 0.8rem !important;
+    }
+    
+    .weekday-name {
+        font-size: 0.8rem !important;
+    }
+    
+    .week-day-header .day-number {
+        font-size: 1.2rem !important;
+    }
+    
+    
+    .logout-button {
+        padding: 0.2rem 0.4rem;
+        font-size: 0.75rem;
+    }
+}
+
+@media (max-height: 650px) and (min-height: 600px) {
+    .sidebar-header {
+        padding: 0.5rem 0.8rem 0.3rem;
+    }
+    
+    .sidebar-header h1 {
+        font-size: 1rem;
+        margin: 0 0 0.2rem 0;
+    }
+    
+    .user-info {
+        margin-bottom: 0.05rem;
+    }
+    
+    .user-info p {
+        font-size: 0.7rem;
+        margin: 0.05rem 0;
+    }
+    
+    .calendar-list {
+        padding: 0.3rem;
+        min-height: calc(0.7rem + 0.3rem + (2 * (0.7rem + 1.4rem + 0.2rem)));
+    }
+    
+    .calendar-list h3 {
+        font-size: 0.75rem;
+        margin: 0 0 0.3rem 0;
+    }
+    
+    .calendar-list li {
+        padding: 0.2rem 0.3rem;
+        gap: 0.25rem;
+        margin-bottom: 0.1rem;
+    }
+    
+    .calendar-list ul {
+        gap: 0.15rem;
+    }
+    
+    .calendar-name {
+        font-size: 0.75rem;
+    }
+    
+    .calendar-color {
+        width: 12px;
+        height: 12px;
+    }
+    
+    
+    .external-calendar-list h3 {
+        font-size: 0.75rem;
+        margin-bottom: 0.2rem;
+    }
+    
+    .external-calendar-info {
+        padding: 0.2rem 0.3rem;
+        gap: 0.25rem;
+    }
+    
+    .external-calendar-name {
+        font-size: 0.7rem;
+    }
+    
+    .external-calendar-color {
+        width: 8px;
+        height: 8px;
+    }
+    
+    .sidebar-footer {
+        padding: 0.3rem;
+    }
+    
+    .add-calendar-button {
+        margin-bottom: 0.1rem !important;
+        padding: 0.15rem 0.3rem !important;
+        font-size: 0.7rem;
+    }
+    
+    .view-selector {
+        margin-bottom: 0.1rem !important;
+    }
+    
+    .view-selector-dropdown {
+        padding: 0.15rem 0.25rem !important;
+        font-size: 0.7rem;
+    }
+    
+    .theme-selector,
+    .style-selector {
+        margin-bottom: 0.1rem !important;
+    }
+    
+    .theme-selector-dropdown,
+    .style-selector-dropdown {
+        padding: 0.15rem 0.25rem !important;
+        font-size: 0.7rem;
+    }
+    
+    /* Most compact calendar headers */
+    .calendar-header {
+        padding: 0.6rem 1rem !important;
+    }
+    
+    .month-year {
+        font-size: 1.1rem !important;
+    }
+    
+    .week-day-header {
+        min-height: 50px !important;
+        padding: 0.25rem !important;
+    }
+    
+    .weekday-header {
+        padding: 0.5rem !important;
+        font-size: 0.75rem !important;
+    }
+    
+    .weekday-name {
+        font-size: 0.75rem !important;
+    }
+    
+    .week-day-header .day-number {
+        font-size: 1.1rem !important;
+    }
+    
+    
+    .logout-button {
+        padding: 0.15rem 0.3rem;
+        font-size: 0.7rem;
+    }
+}
+
 /* Authentication Forms */
 .login-container, .register-container {
     display: flex;
@@ -1414,8 +1790,8 @@ body {
 .calendar-management-tabs {
     display: flex;
     margin: 1.5rem 0 0 0;
-    background: #f9fafb;
+    background: var(--background-tertiary);
-    border: 1px solid #e5e7eb;
+    border: 1px solid var(--border-primary);
     border-radius: 4px;
     overflow: hidden;
 }
@@ -1424,12 +1800,12 @@ body {
     flex: 1;
     background: transparent;
     border: none;
-    border-right: 1px solid #e5e7eb;
+    border-right: 1px solid var(--border-primary);
     padding: 1.25rem 2rem;
     cursor: pointer;
     font-size: 0.95rem;
     font-weight: 600;
-    color: #6b7280;
+    color: var(--text-secondary);
     transition: all 0.15s ease;
     position: relative;
     text-align: center;
@@ -1440,12 +1816,12 @@ body {
 }
 
 .tab-button:hover {
-    background: #f3f4f6;
+    background: var(--background-secondary);
-    color: #374151;
+    color: var(--text-primary);
 }
 
 .tab-button.active {
-    background: var(--modal-background);
+    background: var(--background-secondary);
     color: var(--primary-color);
     box-shadow: inset 0 -2px 0 var(--primary-color),
                 0 1px 2px rgba(0, 0, 0, 0.05);
@@ -1461,8 +1837,8 @@ body {
     justify-content: flex-end;
     gap: 1rem;
     padding: 2rem 2.5rem;
-    border-top: 1px solid #e5e7eb;
+    border-top: 1px solid var(--modal-header-border);
-    background: #fafafa;
+    background: var(--modal-header-background);
     margin: 0 -2.5rem -2.5rem;
 }
 
@@ -2216,8 +2592,8 @@ body {
     justify-content: flex-end;
     gap: 1rem;
     padding: 1.5rem 2rem;
-    border-top: 1px solid #e9ecef;
+    border-top: 1px solid var(--modal-header-border);
-    background: #f8f9fa;
+    background: var(--modal-header-background);
 }
 
 /* Button Styles */
@@ -2363,7 +2739,7 @@ body {
 /* Tabbed Modal Interface Styles */
 .tab-navigation {
     display: flex;
-    border-bottom: 2px solid #e9ecef;
+    border-bottom: 2px solid var(--border-primary);
     margin-bottom: 1.5rem;
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
@@ -2382,7 +2758,7 @@ body {
     cursor: pointer;
     font-size: 0.85rem;
     font-weight: 500;
-    color: #6c757d;
+    color: var(--text-secondary);
     transition: var(--standard-transition);
     border-bottom: 3px solid transparent;
     white-space: nowrap;
@@ -2393,14 +2769,14 @@ body {
 }
 
 .tab-button:hover {
-    color: #495057;
+    color: var(--text-primary);
-    background: #f8f9fa;
+    background: var(--background-secondary);
 }
 
 .tab-button.active {
-    color: #667eea;
+    color: var(--primary-color);
-    border-bottom-color: #667eea;
+    border-bottom-color: var(--primary-color);
-    background: #f8f9ff;
+    background: var(--background-secondary);
 }
 
 .tab-content {
@@ -2469,7 +2845,7 @@ body {
 .advanced-info .form-help-text {
     margin-top: 0.5rem;
     margin-bottom: 0;
-    border-top: 1px solid #e9ecef;
+    border-top: 1px solid var(--border-primary);
     padding-top: 0.5rem;
 }
 
@@ -2519,7 +2895,7 @@ body {
 .people-validation {
     margin-top: 1rem;
     padding-top: 1rem;
-    border-top: 1px solid #e9ecef;
+    border-top: 1px solid var(--border-primary);
 }
 
 .attendee-roles-preview {
@@ -2672,7 +3048,7 @@ body {
 .resources-section {
     margin-top: 1rem;
     padding-top: 1rem;
-    border-top: 1px solid #e9ecef;
+    border-top: 1px solid var(--border-primary);
 }
 
 .resource-features {
@@ -2863,7 +3239,7 @@ body {
 .geo-section {
     margin-top: 1rem;
     padding-top: 1rem;
-    border-top: 1px solid #e9ecef;
+    border-top: 1px solid var(--border-primary);
 }
 
 .geo-features {
@@ -3090,7 +3466,7 @@ body {
 .attachments-section {
     margin-top: 1rem;
     padding-top: 1rem;
-    border-top: 1px solid #e9ecef;
+    border-top: 1px solid var(--border-primary);
 }
 
 .attachment-features {
@@ -4129,7 +4505,7 @@ body {
 
 /* External Calendar Section in Sidebar */
 .external-calendar-list {
-    margin-bottom: 2rem;
+    margin-bottom: 2px;
 }
 
 .external-calendar-list h3 {
@@ -4170,6 +4546,8 @@ body {
     transform: translateX(2px);
 }
 
+
+
 .external-calendar-info input[type="checkbox"] {
     appearance: none;
     -webkit-appearance: none;
@@ -5009,3 +5387,94 @@ body {
     flex-shrink: 0;
 }
 
+/* Event text sizing based on viewport width */
+@media (max-width: 1200px) {
+    .week-event .event-time {
+        font-size: 0.55rem !important;
+    }
+    
+    .week-event .event-title,
+    .event-box .event-title,
+    .event-content .event-title {
+        font-size: 0.6rem !important;
+    }
+    
+    .temp-event-box.moving-event .event-time,
+    .temp-event-box.resizing-event .event-time {
+        font-size: 0.55rem !important;
+    }
+    
+    .temp-event-box.moving-event .event-title,
+    .temp-event-box.resizing-event .event-title {
+        font-size: 0.6rem !important;
+    }
+    
+    .all-day-event {
+        font-size: 0.6rem !important;
+    }
+    
+    .event-box {
+        font-size: 0.6rem !important;
+    }
+}
+
+@media (max-width: 900px) {
+    .week-event .event-time {
+        font-size: 0.5rem !important;
+    }
+    
+    .week-event .event-title,
+    .event-box .event-title,
+    .event-content .event-title {
+        font-size: 0.55rem !important;
+    }
+    
+    .temp-event-box.moving-event .event-time,
+    .temp-event-box.resizing-event .event-time {
+        font-size: 0.5rem !important;
+    }
+    
+    .temp-event-box.moving-event .event-title,
+    .temp-event-box.resizing-event .event-title {
+        font-size: 0.55rem !important;
+    }
+    
+    .all-day-event {
+        font-size: 0.55rem !important;
+    }
+    
+    .event-box {
+        font-size: 0.55rem !important;
+    }
+}
+
+@media (max-width: 600px) {
+    .week-event .event-time {
+        font-size: 0.45rem !important;
+    }
+    
+    .week-event .event-title,
+    .event-box .event-title,
+    .event-content .event-title {
+        font-size: 0.5rem !important;
+    }
+    
+    .temp-event-box.moving-event .event-time,
+    .temp-event-box.resizing-event .event-time {
+        font-size: 0.45rem !important;
+    }
+    
+    .temp-event-box.moving-event .event-title,
+    .temp-event-box.resizing-event .event-title {
+        font-size: 0.5rem !important;
+    }
+    
+    .all-day-event {
+        font-size: 0.5rem !important;
+    }
+    
+    .event-box {
+        font-size: 0.5rem !important;
+    }
+}
+