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:
@@ -121,6 +121,7 @@ body.sessions-page {
|
||||
.projects-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
.projects-table thead {
|
||||
|
||||
@@ -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,59 +171,20 @@ 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);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Render projects table with session data (legacy function for backward compatibility)
|
||||
*/
|
||||
|
||||
Reference in New Issue
Block a user