mobile friendly

frontend/src/main.js

@@ -60,6 +60,9 @@ const chatForm = document.getElementById('chat-form');
 const chatInput = document.getElementById('chat-input');
 const clearChatBtn = document.getElementById('clear-chat-btn');
 const chatSendBtn = document.getElementById('chat-send-btn');
+const sidebarEl = document.querySelector('.sidebar');
+const menuToggle = document.getElementById('menu-toggle');
+const sidebarOverlay = document.getElementById('sidebar-overlay');
 
 function updateState(newState) {
     Object.assign(state, newState);
@@ -240,6 +243,11 @@ function selectTask(id, runId = null) {
     renderTaskList();
     renderRunHistory(task);
     showTaskView(task);
+
+    // Close sidebar on mobile after selection
+    if (window.innerWidth <= 768) {
+        closeMobileMenu();
+    }
 }
 
 function renderRunHistory(task) {
@@ -753,6 +761,23 @@ document.querySelectorAll('.tab-btn').forEach(btn => {
     });
 });
 
+function toggleMobileMenu() {
+    sidebarEl.classList.toggle('open');
+    menuToggle.classList.toggle('active');
+    sidebarOverlay.classList.toggle('hidden');
+    document.body.style.overflow = sidebarEl.classList.contains('open') ? 'hidden' : '';
+}
+
+function closeMobileMenu() {
+    sidebarEl.classList.remove('open');
+    menuToggle.classList.remove('active');
+    sidebarOverlay.classList.add('hidden');
+    document.body.style.overflow = '';
+}
+
+menuToggle.addEventListener('click', toggleMobileMenu);
+sidebarOverlay.addEventListener('click', closeMobileMenu);
+
 async function initializeApp() {
     const hasSession = await checkSession();