fix mobile responsiveness issues

- Fixed malformed .mobile-nav-btn CSS syntax
- Added global overflow-x: hidden to prevent horizontal scroll
- Made projects.js use consistent sidebar overlay approach
- Removed hardcoded min-width: 450px from all modals
- Added safe area insets for notched mobile devices
- Hamburger menu now appears on ALL views on mobile
- Sidebar slides in as overlay on mobile
- All touch targets are at least 44px
- Font sizes are at least 16px to prevent iOS zoom
- Modals are full-width on mobile

public/js/views/projects.js

@@ -14,28 +14,57 @@ export async function renderProjects(app) {
 
   const appEl = document.getElementById('app');
 
+  // Mobile sidebar functions - consistent with other views
+  window.toggleMobileSidebar = function() {
+    const sidebar = document.getElementById('sidebar');
+    const overlay = document.querySelector('.sidebar-overlay');
+    if (sidebar) {
+      sidebar.classList.toggle('mobile-open');
+      if (overlay) overlay.classList.toggle('active');
+    }
+  };
+
+  window.closeMobileSidebar = function() {
+    const sidebar = document.getElementById('sidebar');
+    const overlay = document.querySelector('.sidebar-overlay');
+    if (sidebar) {
+      sidebar.classList.remove('mobile-open');
+      if (overlay) overlay.classList.remove('active');
+    }
+  };
+
   function render() {
     appEl.innerHTML = `
       <header class="app-header">
-        <button class="mobile-nav-btn" onclick="toggleMobileMenu()" title="Menu">☰</button>
+        <button type="button" class="mobile-nav-btn" onclick="window.toggleMobileSidebar()" title="Menu">☰</button>
         <div class="logo">📝 SimpleNote</div>
         <div class="header-actions">
           <button class="btn btn-primary" onclick="window.showNewProjectModal()">+ New</button>
         </div>
       </header>
-      <div class="mobile-menu" id="mobile-menu">
-        <div class="mobile-menu-header">
-          <span>Menu</span>
-          <button onclick="closeMobileMenu()">✕</button>
+      <div class="sidebar-overlay" onclick="window.closeMobileSidebar()"></div>
+      <aside class="sidebar" id="sidebar" style="padding-top: 56px;">
+        <button class="sidebar-close-btn" onclick="window.closeMobileSidebar()">✕</button>
+        <div class="sidebar-scroll">
+          <div class="sidebar-section">
+            <h3>📋 Projects</h3>
+            <div class="tag-list">
+              ${projects.length === 0 ? '<p style="color:var(--color-text-muted);font-size:0.875rem;">No projects yet</p>' : projects.map(project => `
+                <div class="tag-item" onclick="window.app.navigate('project', {id: '${project.id}'}); window.closeMobileSidebar();">
+                  <span>📋 ${escapeHtml(project.name)}</span>
+                </div>
+              `).join('')}
+            </div>
+          </div>
+          <div class="quick-links">
+            <a class="quick-link" href="#" onclick="window.showNewProjectModal(); window.closeMobileSidebar(); return false;">+ New Project</a>
+          </div>
         </div>
-        <div class="mobile-menu-content">
-          <a href="#" onclick="closeMobileMenu(); return false;">📋 All Projects</a>
-        </div>
-      </div>
+      </aside>
       <div class="projects-page">
         <div class="projects-header">
           <h1>Projects</h1>
-          <p class="text-muted">Organize your documents into projects and folders</p>
+          <p style="color: var(--color-text-secondary);">Organize your documents into projects and folders</p>
         </div>
         <div class="projects-grid">
           ${projects.length === 0 ? `
@@ -95,7 +124,7 @@ window.showNewProjectModal = function() {
   const backdrop = document.createElement('div');
   backdrop.className = 'modal-backdrop';
   backdrop.innerHTML = `
-    <div class="modal" style="min-width: 450px;">
+    <div class="modal">
       <div class="modal-header">
         <span>📋</span>
         <h3>Create New Project</h3>
@@ -148,14 +177,3 @@ window.showNewProjectModal = function() {
 
   nameInput.focus();
 }
-
-// Mobile menu functions
-window.toggleMobileMenu = function() {
-  const menu = document.getElementById('mobile-menu');
-  if (menu) menu.classList.toggle('open');
-};
-
-window.closeMobileMenu = function() {
-  const menu = document.getElementById('mobile-menu');
-  if (menu) menu.classList.remove('open');
-};