Use pencil icon for project rename

assets/app.js

@@ -207,6 +207,16 @@ document.addEventListener('visibilitychange', async () => {
         project.collapsed = !project.collapsed;
         save();
     }
+    function renameProject(pId) {
+        modalState = { type: 'renameProject', pId, partId: null };
+        const project = projects.find(p => p.id === pId);
+        modalTitle.innerText = "Rename Project";
+        modalInput.value = project.name;
+        modalInput.type = "text";
+        modalInput.placeholder = "Project name";
+        modal.classList.add('active');
+        setTimeout(() => modalInput.focus(), 100);
+    }
     async function deletePart(pId, partId) {
         const ok = await showConfirm({ title: 'Delete part?', text: 'This part will be removed.', confirmText: 'Delete', danger: true });
         if (ok) {
@@ -308,6 +318,10 @@ function closeModal() {
             const part = projects.find(p => p.id === modalState.pId).parts.find(pt => pt.id === modalState.partId);
             part.name = val;
         }
+        else if (modalState.type === 'renameProject') {
+            const project = projects.find(p => p.id === modalState.pId);
+            project.name = val;
+        }
         else if (modalState.type === 'manualCount') {
             const num = parseInt(val);
             if (!isNaN(num) && num >= 0) {
@@ -341,6 +355,9 @@ function render() {
         return;
     }
 
+    const grid = document.createElement('div');
+    grid.className = 'projects-grid';
+
     projects.forEach(project => {
         const sortedParts = [...project.parts].sort((a, b) => a.finished - b.finished);
         const projectCollapsedClass = project.collapsed ? 'project-collapsed' : '';
@@ -394,15 +411,18 @@ function render() {
                     <button class="btn-toggle-project">▼</button>
                     <span class="project-title">${project.name}</span>
                 </div>
-                <div style="display:flex; gap:10px; align-items:center;">
+                <div class="project-actions">
+                    <button class="btn-rename-project" onclick="renameProject(${project.id})" title="Rename project">✏️</button>
                     <button class="btn-add-part" onclick="openModal('addPart', ${project.id})">+ Part</button>
                     <button class="btn-delete-project" onclick="deleteProject(${project.id})">×</button>
                 </div>
             </div>
             <div class="part-list">${partsHtml}</div>
         `;
-        app.appendChild(projectContainer);
+        grid.appendChild(projectContainer);
     });
+
+    app.appendChild(grid);
 }
 
 render();

assets/style.css

@@ -119,14 +119,20 @@ h1 {
 .hidden { display: none !important; }
 
 .container {
-    max-width: 650px;
+    max-width: 1200px;
     margin: 0 auto;
-    padding: 1.5rem 1rem calc(120px + env(safe-area-inset-bottom, 0px));
+    padding: 1.5rem 1.25rem calc(120px + env(safe-area-inset-bottom, 0px));
     position: relative;
     z-index: 2;
     flex: 1;
 }
 
+.projects-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+    gap: 20px;
+}
+
 /* --- PROJECT CONTAINER --- */
 .project-container {
     background: var(--card-bg);
@@ -140,7 +146,7 @@ h1 {
 
 .project-header {
     display: flex; justify-content: space-between; align-items: center;
-    padding: 15px 5px; margin-bottom: 10px;
+    padding: 15px 5px; margin-bottom: 10px; gap: 10px;
 }
 
 .project-title-group { display: flex; align-items: center; gap: 10px; }
@@ -159,6 +165,8 @@ h1 {
 .project-collapsed .part-list { display: none; }
 .project-collapsed { margin-bottom: 1rem; opacity: 0.8; box-shadow: none; }
 
+.project-actions { display: flex; gap: 8px; align-items: center; }
+
 .btn-add-part {
     background: var(--project-color); color: var(--card-bg); border: none;
     border-radius: 20px; padding: 6px 16px; font-size: 0.9rem; font-weight: bold;
@@ -171,6 +179,12 @@ h1 {
 }
 .btn-delete-project:hover { color: var(--danger); }
 
+.btn-rename-project {
+    background: none; border: none; color: var(--text-muted);
+    padding: 5px 8px; border-radius: 8px; font-size: 1rem; cursor: pointer;
+}
+.btn-rename-project:hover { color: var(--project-color); }
+
 /* --- PART CARD --- */
 .part-card {
     background: var(--card-bg);