fix(graph): swap task pill layout — subject large on top, ID small below

This commit is contained in:
iliya 2026-03-28 20:59:43 +02:00
parent 3be815ecbb
commit 7804e86979

View file

@ -139,23 +139,25 @@ function drawTaskPill(
); );
ctx.fill(); ctx.fill();
// Display ID // Subject (main title — large)
const displayId = node.displayId ?? node.label;
ctx.font = `bold ${TASK_PILL.idFontSize}px monospace`;
ctx.textAlign = 'left';
ctx.textBaseline = 'middle';
ctx.fillStyle = isFinished ? COLORS.textDim : COLORS.textPrimary;
ctx.fillText(displayId, -halfW + TASK_PILL.textOffsetX, -4);
// Subject text
if (node.sublabel) { if (node.sublabel) {
ctx.font = `${TASK_PILL.subjectFontSize}px sans-serif`; ctx.font = `bold ${TASK_PILL.idFontSize}px sans-serif`;
ctx.fillStyle = isFinished ? COLORS.textMuted : COLORS.textDim; ctx.textAlign = 'left';
ctx.textBaseline = 'middle';
ctx.fillStyle = isFinished ? COLORS.textDim : COLORS.textPrimary;
const maxW = w - TASK_PILL.textOffsetX - 8; const maxW = w - TASK_PILL.textOffsetX - 8;
const subject = truncateText(ctx, node.sublabel, maxW, ctx.font); const subject = truncateText(ctx, node.sublabel, maxW, ctx.font);
ctx.fillText(subject, -halfW + TASK_PILL.textOffsetX, 8); ctx.fillText(subject, -halfW + TASK_PILL.textOffsetX, -4);
} }
// Display ID (secondary — small)
const displayId = node.displayId ?? node.label;
ctx.font = `${TASK_PILL.subjectFontSize}px monospace`;
ctx.textAlign = 'left';
ctx.textBaseline = 'middle';
ctx.fillStyle = isFinished ? COLORS.textMuted : COLORS.textDim;
ctx.fillText(displayId, -halfW + TASK_PILL.textOffsetX, 8);
// Approved badge: checkmark at right side // Approved badge: checkmark at right side
if (node.reviewState === 'approved') { if (node.reviewState === 'approved') {
ctx.font = 'bold 11px sans-serif'; ctx.font = 'bold 11px sans-serif';