From dde7afdc19854a38ef322a477e9de417ee6f1c06 Mon Sep 17 00:00:00 2001
From: Hiro <hiro@openclaw.ai>
Date: Sat, 28 Mar 2026 17:42:47 +0000
Subject: [PATCH] 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/css/style.css           | 41 ++++++++++++++++++++--
 public/js/views/projectView.js |  8 ++---
 public/js/views/projects.js    | 62 ++++++++++++++++++++++------------
 3 files changed, 83 insertions(+), 28 deletions(-)

diff --git a/public/css/style.css b/public/css/style.css
index f292def..d4ed677 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -109,6 +109,7 @@
 html {
   font-size: 16px;
   -webkit-font-smoothing: antialiased;
+  overflow-x: hidden;
 }
 
 body {
@@ -118,6 +119,7 @@ body {
   color: var(--color-text);
   background: var(--color-bg);
   min-height: 100vh;
+  overflow-x: hidden;
 }
 
 a {
@@ -1240,7 +1242,7 @@ ul, ol {
 }
 
 /* === Mobile Navigation Drawer === */
-.mobile-nav-btn { display: flex; margin-right: 8px; } .mobile-nav-btnOLD {
+.mobile-nav-btn {
   display: none;
   width: 44px;
   height: 44px;
@@ -1248,9 +1250,24 @@ ul, ol {
   justify-content: center;
   border-radius: var(--radius-md);
   color: var(--color-text-secondary);
-  font-size: 1.25rem;
+  font-size: 1.5rem;
   transition: var(--transition-fast);
   flex-shrink: 0;
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  padding: 0;
+}
+
+.mobile-nav-btn:hover {
+  background: var(--color-hover);
+  color: var(--color-text);
+}
+
+@media (max-width: 1024px) {
+  .mobile-nav-btn {
+    display: flex;
+  }
 }
 
 .mobile-nav-btn:hover {
@@ -2019,3 +2036,23 @@ ul, ol {
     display: block;
   }
 }
+
+/* Safe area insets for notched devices */
+@supports (padding: env(safe-area-inset-top)) {
+  body {
+    padding-top: env(safe-area-inset-top);
+    padding-bottom: env(safe-area-inset-bottom);
+    padding-left: env(safe-area-inset-left);
+    padding-right: env(safe-area-inset-right);
+  }
+  
+  .app-header {
+    padding-top: calc(var(--space-3) + env(safe-area-inset-top));
+  }
+  
+  #toast-container {
+    bottom: calc(var(--space-6) + env(safe-area-inset-bottom));
+    right: calc(var(--space-6) + env(safe-area-inset-right));
+    left: calc(var(--space-6) + env(safe-area-inset-left));
+  }
+}
diff --git a/public/js/views/projectView.js b/public/js/views/projectView.js
index 318e737..6e9bd8b 100644
--- a/public/js/views/projectView.js
+++ b/public/js/views/projectView.js
@@ -290,7 +290,7 @@ window.showNewFolderModal = async function(projectId, parentId) {
   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 Folder</h3>
@@ -366,7 +366,7 @@ window.showEditProjectModal = async function(projectId) {
   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>Edit Project</h3>
@@ -454,7 +454,7 @@ window.showMoveToFolderModal = async function(documentId) {
   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>Move to Folder</h3>
@@ -507,7 +507,7 @@ window.showNewDocModal = async function(projectId, folderId = '') {
   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 Document</h3>
diff --git a/public/js/views/projects.js b/public/js/views/projects.js
index cc8180c..9ab4e53 100644
--- a/public/js/views/projects.js
+++ b/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');
-};