feat(ui): add responsive sidebar with mobile toggle and overlay

Implement responsive sidebar functionality that auto-opens on desktop (≥1024px) and auto-closes on mobile, with a toggle button for mobile users. Added overlay for mobile sidebar dismissal and CSS for collapsed state on desktop. Minor adjustments to dashboard chart borders and grid layouts.

public/app.js

@@ -57,9 +57,33 @@ document.addEventListener('alpine:init', () => {
             return Alpine.store('data')?.loading || false;
         },
 
+        sidebarOpen: window.innerWidth >= 1024,
+        toggleSidebar() {
+            this.sidebarOpen = !this.sidebarOpen;
+        },
+
         init() {
             console.log('App controller initialized');
 
+            // Handle responsive sidebar transitions
+            let lastWidth = window.innerWidth;
+            window.addEventListener('resize', () => {
+                const currentWidth = window.innerWidth;
+                const lgBreakpoint = 1024;
+                
+                // Desktop -> Mobile: Auto-close sidebar to prevent overlay blocking screen
+                if (lastWidth >= lgBreakpoint && currentWidth < lgBreakpoint) {
+                    this.sidebarOpen = false;
+                }
+                
+                // Mobile -> Desktop: Auto-open sidebar (restore standard desktop layout)
+                if (lastWidth < lgBreakpoint && currentWidth >= lgBreakpoint) {
+                    this.sidebarOpen = true;
+                }
+                
+                lastWidth = currentWidth;
+            });
+
             // Theme setup
             document.documentElement.setAttribute('data-theme', 'black');
             document.documentElement.classList.add('dark');