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>
This commit is contained in:
uroma
2026-01-19 17:57:14 +00:00
Unverified
parent f29c82bbfa
commit df10f31f6c
2 changed files with 8 additions and 46 deletions

View File

@@ -121,6 +121,7 @@ body.sessions-page {
.projects-table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
.projects-table thead {

View File

@@ -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
};
// 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 each session as a table row
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: []
const row = createSessionRow(session);
tbody.appendChild(row);
});
}
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) => {
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 unassigned sessions if any
if (grouped.unassigned.length > 0) {
const section = createUnassignedSection(grouped.unassigned);
tbody.appendChild(section);
}
}
/**