fix: Tweak table column widths. Will probably make them dynamicalyl adjust based on the longest string in the column. But that's an overoptimization for now.

This commit is contained in:
Eyal Toledano
2025-03-26 20:25:02 -04:00
parent 217adcc764
commit 5b0552fc20
2 changed files with 58 additions and 9 deletions

View File

@@ -835,14 +835,33 @@ function listTasks(tasksPath, statusFilter, withSubtasks = false) {
} }
// COMPLETELY REVISED TABLE APPROACH // COMPLETELY REVISED TABLE APPROACH
// Define fixed column widths based on terminal size // Define percentage-based column widths and calculate actual widths
const idWidth = 10; // Adjust percentages based on content type and user requirements
const statusWidth = 20;
const priorityWidth = 10; // Adjust ID width if showing subtasks (subtask IDs are longer: e.g., "1.2")
const depsWidth = 25; const idWidthPct = withSubtasks ? 10 : 7;
// Calculate title width from available space // Calculate max status length to accommodate "in-progress"
const titleWidth = terminalWidth - idWidth - statusWidth - priorityWidth - depsWidth - 10; // 10 for borders and padding const statusWidthPct = 15;
// Increase priority column width as requested
const priorityWidthPct = 12;
// Make dependencies column smaller as requested (-20%)
const depsWidthPct = 20;
// Calculate title/description width as remaining space (+20% from dependencies reduction)
const titleWidthPct = 100 - idWidthPct - statusWidthPct - priorityWidthPct - depsWidthPct;
// Allow 10 characters for borders and padding
const availableWidth = terminalWidth - 10;
// Calculate actual column widths based on percentages
const idWidth = Math.floor(availableWidth * (idWidthPct / 100));
const statusWidth = Math.floor(availableWidth * (statusWidthPct / 100));
const priorityWidth = Math.floor(availableWidth * (priorityWidthPct / 100));
const depsWidth = Math.floor(availableWidth * (depsWidthPct / 100));
const titleWidth = Math.floor(availableWidth * (titleWidthPct / 100));
// Create a table with correct borders and spacing // Create a table with correct borders and spacing
const table = new Table({ const table = new Table({

View File

@@ -510,6 +510,21 @@ async function displayNextTask(tasksPath) {
{ padding: { top: 0, bottom: 0, left: 1, right: 1 }, margin: { top: 1, bottom: 0 }, borderColor: 'magenta', borderStyle: 'round' } { padding: { top: 0, bottom: 0, left: 1, right: 1 }, margin: { top: 1, bottom: 0 }, borderColor: 'magenta', borderStyle: 'round' }
)); ));
// Calculate available width for the subtask table
const availableWidth = process.stdout.columns - 10 || 100; // Default to 100 if can't detect
// Define percentage-based column widths
const idWidthPct = 8;
const statusWidthPct = 15;
const depsWidthPct = 25;
const titleWidthPct = 100 - idWidthPct - statusWidthPct - depsWidthPct;
// Calculate actual column widths
const idWidth = Math.floor(availableWidth * (idWidthPct / 100));
const statusWidth = Math.floor(availableWidth * (statusWidthPct / 100));
const depsWidth = Math.floor(availableWidth * (depsWidthPct / 100));
const titleWidth = Math.floor(availableWidth * (titleWidthPct / 100));
// Create a table for subtasks with improved handling // Create a table for subtasks with improved handling
const subtaskTable = new Table({ const subtaskTable = new Table({
head: [ head: [
@@ -518,7 +533,7 @@ async function displayNextTask(tasksPath) {
chalk.magenta.bold('Title'), chalk.magenta.bold('Title'),
chalk.magenta.bold('Deps') chalk.magenta.bold('Deps')
], ],
colWidths: [6, 12, Math.min(50, process.stdout.columns - 65 || 30), 30], colWidths: [idWidth, statusWidth, titleWidth, depsWidth],
style: { style: {
head: [], head: [],
border: [], border: [],
@@ -741,6 +756,21 @@ async function displayTaskById(tasksPath, taskId) {
{ padding: { top: 0, bottom: 0, left: 1, right: 1 }, margin: { top: 1, bottom: 0 }, borderColor: 'magenta', borderStyle: 'round' } { padding: { top: 0, bottom: 0, left: 1, right: 1 }, margin: { top: 1, bottom: 0 }, borderColor: 'magenta', borderStyle: 'round' }
)); ));
// Calculate available width for the subtask table
const availableWidth = process.stdout.columns - 10 || 100; // Default to 100 if can't detect
// Define percentage-based column widths
const idWidthPct = 8;
const statusWidthPct = 15;
const depsWidthPct = 25;
const titleWidthPct = 100 - idWidthPct - statusWidthPct - depsWidthPct;
// Calculate actual column widths
const idWidth = Math.floor(availableWidth * (idWidthPct / 100));
const statusWidth = Math.floor(availableWidth * (statusWidthPct / 100));
const depsWidth = Math.floor(availableWidth * (depsWidthPct / 100));
const titleWidth = Math.floor(availableWidth * (titleWidthPct / 100));
// Create a table for subtasks with improved handling // Create a table for subtasks with improved handling
const subtaskTable = new Table({ const subtaskTable = new Table({
head: [ head: [
@@ -749,7 +779,7 @@ async function displayTaskById(tasksPath, taskId) {
chalk.magenta.bold('Title'), chalk.magenta.bold('Title'),
chalk.magenta.bold('Deps') chalk.magenta.bold('Deps')
], ],
colWidths: [10, 15, Math.min(50, process.stdout.columns - 40 || 30), 20], colWidths: [idWidth, statusWidth, titleWidth, depsWidth],
style: { style: {
head: [], head: [],
border: [], border: [],