From df10f31f6cc6382301ed9dde3e9dc50f2d1a4cb4 Mon Sep 17 00:00:00 2001
From: uroma <uroma@rommark.dev>
Date: Mon, 19 Jan 2026 17:57:14 +0000
Subject: [PATCH] fix: render simple table rows instead of project sections

Fix table alignment issue on landing page by rendering simple table
rows instead of collapsible project sections inside the tbody.

Changes:
- Simplify renderSessionsGroupedByProject() to render table rows directly
- Add table-layout: fixed to .projects-table for proper column widths
- Sort sessions by last activity (newest first)

The previous implementation was rendering div elements (project sections)
inside the table tbody, which broke the table layout. Table elements
only accept tr elements as direct children.

Resolves "things don't align" issue on projects table.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 public/claude-ide/sessions-landing.css |  1 +
 public/claude-ide/sessions-landing.js  | 53 ++++----------------------
 2 files changed, 8 insertions(+), 46 deletions(-)

diff --git a/public/claude-ide/sessions-landing.css b/public/claude-ide/sessions-landing.css
index 5dd840d8..be2ad9a0 100644
--- a/public/claude-ide/sessions-landing.css
+++ b/public/claude-ide/sessions-landing.css
@@ -121,6 +121,7 @@ body.sessions-page {
 .projects-table {
     width: 100%;
     border-collapse: collapse;
+    table-layout: fixed;
 }
 
 .projects-table thead {
diff --git a/public/claude-ide/sessions-landing.js b/public/claude-ide/sessions-landing.js
index 72d84d51..95474d90 100644
--- a/public/claude-ide/sessions-landing.js
+++ b/public/claude-ide/sessions-landing.js
@@ -151,7 +151,7 @@ async function loadSessions() {
 }
 
 /**
- * Render sessions grouped by project
+ * Render sessions as a simple table
  */
 function renderSessionsGroupedByProject(sessions) {
     const tbody = document.getElementById('projects-tbody');
@@ -171,57 +171,18 @@ function renderSessionsGroupedByProject(sessions) {
     if (table) table.style.display = 'table';
     if (emptyState) emptyState.style.display = 'none';
 
-    // Group sessions by projectId
-    const grouped = {
-        byProject: new Map(), // projectId -> {project, sessions: []}
-        unassigned: [] // sessions without projectId
-    };
-
-    sessions.forEach(session => {
-        const projectId = session.metadata?.projectId;
-
-        if (projectId && window.projectsMap?.has(projectId)) {
-            const project = window.projectsMap.get(projectId);
-
-            if (!grouped.byProject.has(projectId)) {
-                grouped.byProject.set(projectId, {
-                    project: project,
-                    sessions: []
-                });
-            }
-
-            grouped.byProject.get(projectId).sessions.push(session);
-        } else {
-            grouped.unassigned.push(session);
-        }
-    });
-
-    // Sort sessions within each group by last activity
-    grouped.byProject.forEach(group => {
-        group.sessions.sort((a, b) => {
-            const dateA = new Date(a.lastActivity || a.createdAt || a.created_at);
-            const dateB = new Date(b.lastActivity || b.createdAt || b.created_at);
-            return dateB - dateA;
-        });
-    });
-
-    grouped.unassigned.sort((a, b) => {
+    // Sort by last activity (newest first)
+    sessions.sort((a, b) => {
         const dateA = new Date(a.lastActivity || a.createdAt || a.created_at);
         const dateB = new Date(b.lastActivity || b.createdAt || b.created_at);
         return dateB - dateA;
     });
 
-    // Render project sections
-    grouped.byProject.forEach((group, projectId) => {
-        const section = createProjectSection(group.project, group.sessions);
-        tbody.appendChild(section);
+    // Render each session as a table row
+    sessions.forEach(session => {
+        const row = createSessionRow(session);
+        tbody.appendChild(row);
     });
-
-    // Render unassigned sessions if any
-    if (grouped.unassigned.length > 0) {
-        const section = createUnassignedSection(grouped.unassigned);
-        tbody.appendChild(section);
-    }
 }
 
 /**